arale-select
v0.10.1
Published
模拟 select 的组件
Downloads
5
Keywords
Readme
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 的来源有两处
- 初始化传入
- 如果 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
支持三种
- 列表索引,为 Number
- 选择器,为 String
- 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 的字体保持一致,不然宽度可能有不对齐的情况