mpicker组件

Intro

lrselect是一个模拟多选框，可自定义样式，包括选择，移除，全部选择，全部移除，撤销，取消撤销，重新渲染等功能键，支持shift＋点击 连续选，control(command)+点击多选。

Author

name:kerry
email:[email protected]

Example

无

Options

@param {Str}                                 display    显示的方式，默认是显示在底部    'bottom'/'modal'
@param {Boolean}                             shadow     点击遮罩隐藏组件 - 默认为false;若为false，则禁止点击遮罩隐藏组件
@param {Number}                              level      显示的层级，默认：1
@param {Number}                              rows       picker显示的行数，默认：4
@param {Boolean}                             Linkage    选择联动 - 若为false，则不联动
@param {Array}                               dataJson   渲染picker的json - 有规定的格式，可查看json文件。不联动默认遍历获取第一个json
@param {Number}                              height     每一行的高度
@param {Boolean}                             idDefault  匹配默认值 - 若为false，则不匹配
@param {Str}                                 splitStr   设置分割value的符号，与默认值和显示在input里的值有关
@param {Boolean}                             isshort    是否开启简写，默认是关闭的
@param {Element selector}                    header     picker头部html
@param {function}                             confirm: function() {}
@param {function}                             cancel: function() {}

Methods

show：显示方法
hide：隐藏方法（参数：隐藏回调函数）
updateData：更新渲染数据（参数：data）

Usage

var method=$('.select-value').IUI('mPicker',{
            level:2,
            dataJson:dataJson,
            Linkage:true,
            rows:6,
            idDefault:true,
            splitStr:'-',
            header:'<div class="mPicker-header">这是真的<a href="javascript:;" class="mPicker-cancel">取消</a><a href="javascript:;" class="mPicker-confirm">确定</a></div>',
            confirm:function(){
                console.info($('.select-value').data('value1')+'-'+$('.select-value').data('value2'));
                //点击确定后更新json
                method.updateData(level3);
            },
            cancel:function(){
                console.info($('.select-value').data('value1')+'-'+$('.select-value').data('value2'));

            }
        })

        //console.info(method)
        // method.show();
        // method.hide();

        /**
         * 不联动的picker
         * 两级
         */
        var method2=$('.select-value2').IUI('mPicker',{
            level:2,
            dataJson:level3,
            rows:5,
            Linkage:false,
            idDefault:true,
            confirm:function(){
                //console.info($('.select-value2').data('id1')+'-'+$('.select-value2').data('id2')+'-'+$('.select-value2').data('id3'));
            }
        })

        /**
         * 一级
         */
        var method3=$('.select-value3').IUI('mPicker',{
            level:1,
            dataJson:dataJson,
            Linkage:false,
            rows:6,
            idDefault:true,
            header:'<div class="mPicker-header">这是真的<a href="javascript:;" class="mPicker-cancel">取消</a><a href="javascript:;" class="mPicker-confirm">确定</a></div>',
            confirm:function(){
                console.info($('.select-value3').data('id1'));
            },
            cancel:function(){
                console.info($('.select-value3').data('id1'));
            }
        })

Attention

1.注意配置参数的height只决定js部分高度，不包括样式的高度，样式在css里决定，想过加到js,但觉得太麻烦。
2.Linkage决定了是否是联动的，Linkage决定了dataJson的不同格式