arale-select

Select

---

模拟 select 的组件。

---

使用方法

Select 继承了 overlay，可使用其中包括 widget、base、class、events、attribute、aspect 的属性和方法。

trigger 为 select

html 片段

<select id="city" name="city">
    <option value="value1">text1</option>
    <option value="value2">text2</option>
</select>

javascript 片段

new Select({
    trigger: '#city'
}).render()

trigger 为其他 DOM

html 片段

<a href="#" id="city"></a>

javascript 片段

new Select({
    trigger: '#city',
    name: 'city',
    model: [
        {value:'value1', text: 'text1'},
        {value:'value2', text: 'text2'}
    ]
}).render();

配置说明

trigger element

trigger 可以为 select 或 其他任何 DOM。

**注意：**trigger只能为一个 DOM，如果选出来多个会取第一个

• 如果为 select，会将其隐藏并生成一个 a 标签放在原来的位置。
• 如果为 DOM，实例化的时候则需要提供 model 作为数据源

如果 trigger 比较复杂，可以选择 DOM 自定义结构，而且需要设置 data-role="trigger-content" 来指定填入内容的位置。

model object

model 的来源有两处

1. 初始化传入
2. 如果 trigger 为 select，则会根据结构生成 model

model 的格式为

[
    {value:'value1', text: 'text1', selected: true},
    {value:'value2', text: 'text2'}
]

value text selected 均为 option 的属性

template string

生成组件的模版，数据源为 model。

triggerTpl string

可以指定触发器的 DOM 结构，默认就是个 a 标签。

classPrefix string (0.9.0 修改，之前为 prefix)

样式前缀，默认为 ui-select

name string

模拟 select 的属性，表单项需要的 name 值，等同于 select.name

注意：如果 trigger 不是 select，那么会先在页面找 name 的 input，找不到再创建一个。

value string

模拟 select 的属性，获取被选中 option 的 value 值，等同于 select.value

length number

模拟 select 的属性，获取 option 的个数，等同于 select.length

selectedIndex number

模拟 select 的属性，获取被选中 option 的索引值，等同于 select.selectedIndex

multiple boolean

// TODO

disabled boolean

模拟 select 的属性，设置 select 是否可点，等同于 select.disabled

方法

.select(option)

选中某项，option 支持三种

1. 列表索引，为 Number
2. 选择器，为 String
3. DOM，支持 DOM Element 和 jQuery 对象

.syncModel(model)

重新跟进给定的 demo 渲染 select

model 为数据源，和上面提到的 model 格式保持一致

.addOption(option)

将一个选项添加到最后，option 的格式为

{value: 'value1', text: 'text1'}

.getOption(option)

获取某个选项，参数和 .select 方法一致

.removeOption(option)

删除某个选项，参数和 .select 方法一致

.enableOption(option)

使某个选项可选，参数和 .select 方法一致

.disableOption(option)

使某个选项不可选，参数和 .select 方法一致

事件

change

当选择某项的时候会触发，组件初始化不会触发此事件

回调传回的参数为当前选中的项，为 jQuery 对象

new Select({
    trigger: ''
}).on('change', function(target, prev) {
    console.log(target.html());
})

disabledChange

在 disabled 状态变化时会触发这个事件，在初始化的时候也会触发此事件。

.on('disabledChange', function(target, status) {
    console.log(target.html());
})

target 为当前选中的项，status 为变化后的 disabled 状态

问题讨论

• ui-select-item 避免设置 height #13
• trigger 和 template 的字体保持一致，不然宽度可能有不对齐的情况