移动端选择组件,支持级联(类似省市区)与非级联
由于组件用到了modernizr的prefixed功能,所以需要引入modernizr.js
<link rel="stylesheet" href="index.css">
<script src="modernizr.js"></script>
<script src="index.js"></script>
var select = new MobileSelect({
title: '请选择',
data: function () {
var num = 3;
function deep() {
var index = arguments[0] || 0,
data = {
name: 'label' + index,
options: []
};
for (var i = 0; i < 50; i++) {
data.options.push((index < num - 1) && Math.random() > 0.5 ? {
value: index + '-' + (arguments[1] || 0) + '-' + i,
children: deep(index + 1, i)
} : index + '-' + (arguments[1] || 0) + '-' + i);
}
return data;
}
return deep();
}(),
update: function (value) {
console.log('update', value);
},
confirm: function (value) {
console.log('confirm', value);
}
});
select.show(); //显示
select.hide(); //隐藏
select.destroy(); //销毁
| 名称 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| title | String | N | 请选择 | 标题 |
| data | Array或Object | Y | - | 数据 |
| immediateSync | Boolean | N | false | 如果是级联关系时,滑动父列时是否立即更新子列,false表示等父列滑动停下来后再更新子列 |
| enable3d | Boolean | N | false | 是否开启3d旋转 |
| spacing | Number | N | 20 | 开启3d旋转时,每列子项之间的角度间隔,单位为deg |
| update | Function | N | - | 数据更新时的回调函数 |
| confirm | Function | N | - | 点击确定按钮时的回调函数 |
data为Array时(非级联关系)如下
| 名称 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| data[{name}] | String | N | - | 列名称,没有则不显示列名称 |
| data[{options}] | Array | Y | - | 列数据,每一项为字符串 |
例如
[{
name: '年',
options: [1, 2, 3, 4, 5, 6]
}, {
name: '月',
options: [1, 2, 3, 4, 5, 6]
}, {
name: '日',
options: [1, 2, 3, 4, 5, 6]
}]
data为Object时(级联关系)如下
| 名称 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| {name} | String | N | - | 列名称,没有则不显示列名称 |
| {options} | Array | Y | - | 列数据,每一项为对象 |
| {options{value}} | String | Y | - | 每一项的数据 |
| {options{children}} | Object(重复data结构) | N | - | 级联子列的配置,没有则无子列 |
例如
{
name: '年',
options: [{
value: 2016,
children: {
name: '月',
options: [{
value: 11,
children: {
name: '日',
options: [1, 2, 3, 4, 5, 6]
}
}, {
value: 12,
children: {
name: '日',
options: [1, 2, 3, 4, 5, 6]
}
}]
}
}, {
value: 2017,
children: {
name: '月',
options: [{
value: 11,
children: {
name: '日',
options: [1, 2, 3, 4, 5, 6]
}
}, {
value: 12,
children: {
name: '日',
options: [1, 2, 3, 4, 5, 6]
}
}]
}
}]
}
| 名称 | 参数 | 描述 |
|---|---|---|
| update | {value} | 数据更新(非级联关系时,只要任一列选择的数据改变;级联关系时,最后一列选择的数据改变)时触发,value是一个数组,元素依次为选择的列数据 |
| confirm | {value} | 点击确定按钮时触发,value是一个数组,元素依次为选择的列数据 |
| 名称 | 参数 | 描述 |
|---|---|---|
| show | - | 显示组件 |
| hide | - | 隐藏组件 |
| destroy | - | 销毁组件 |
| setValue | {value} | 设置选中的值,value是一个数组,元素依次为选择的列数据 |