/mobile-select

移动端选择组件，支持级联（类似省市区）与非级联

Primary LanguageJavaScriptMIT LicenseMIT

mobile-select

移动端选择组件，支持级联（类似省市区）与非级联

引入

由于组件用到了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是一个数组，元素依次为选择的列数据