jQuery手机端联动滑动选择插件mobile selector

所属分类:输入-快捷键

 2168  16  查看评论 (6)
jQuery手机端联动滑动选择插件mobile selector ie兼容10

mobile selector

参数列表

手机端模拟选择-2级

@param
level [级别:1,2,3]
line [显示行数:默认为3]
height [行高:默认40]
idDefault [是否填充默认值:默认false]
splitStr [分割符号:默认’ ‘(例如:’/’,’-‘,’#’)]
Linkpage [是否联动:默认false]
dataLink [有联动时的数据(有格式)]
data1 [一级数据(Linkpage:false时才有用)]
data2 [二级数据(Linkpage:false时才有用)]
header [头部代码]
afterOne:function(){} [选择一级后回调函数]
afterTwo:function(){} [选择二级后回调函数]
confirm:function(){} [确定回调]
cancel:function(){} [取消回调]
@return deffered{‘show’:fn,’hide’:fn,’updateData’:fn}

组件特色 

1. 除了组件自带需要的样式,需要用户额外编写的css基本没有,除了想修改选择插件每个li的高度。

2. json格式默认为:

var method4=$('.select-value4').selectList({
    level:2,
    data1:level1,
    data2:level2,
    line:5,
    Linkpage:false,
    idDefault:true,
    afterOne:function(result){
        // console.info(result.target.html())
    },
    afterTwo:function(result){
        //console.info(result.target.html())
    },
    confirm:function(){
        method4.updateData([level2,level1]);
        //console.info($('.select-value').data('id1')+'-'+$('.select-value').data('id2')+'-'+$('.select-value').data('id3'));
    }
})

QA:为什么要用这个组件

  1. 除了组件自带需要的样式,需要用户额外编写的css基本没有,除了想修改选择插件每个li的高度。

  2. json格式默认为:

level3=[
    {
        "name": '111',
        "value": '1',
        "child": [
            {
                "name": '222',
                "value": '3',
                "child": [
                    {
                        "name": 'fff',
                        "value": '3'
                    },
                    {
                        "name": 'ggg',
                        "value": '4'
                    },
                    {
                        "name": 'hhh',
                        "value": '5'
                    },
                    {
                        "name": 'yyy',
                        "value": '6'
                    }
                ]
            },
            {
                "name": '555',
                "value": '6',
                "child": [
                    {
                        "name": 'fff',
                        "value": '3'
                    },
                    {
                        "name": 'ggg',
                        "value": '4'
                    },
                    {
                        "name": 'hhh',
                        "value": '5'
                    },
                    {
                        "name": 'yyy',
                        "value": '6'
                    }
                ]
            }
        ]
    },
    {
        "name": 'ddd',
        "value": '2',
        "child": [
            {
                "name": 'fff',
                "value": '3'
            },
            {
                "name": 'ggg',
                "value": '4'
            },
            {
                "name": 'hhh',
                "value": '5'
            },
            {
                "name": 'yyy',
                "value": '6'
            }
        ]
    }
];

3.可修改selector头部代码,增加组件样式灵活性

4.调用组件的元素可以和填充的表单元素不是同一个,如果没设置则默认相同

5.自动填充默认值

6.新增了更新数据的功能,支持动态更新

更多详情请看selector-api.html

相关插件-快捷键

jQuery手机端联动滑动选择插件mobile selector

支持三级或以下层级,可选联动或不联动,支持鼠标滑动
  快捷键
 2168  16

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币

    yqh708 0
    2017/9/1 11:27:27

    大神,如果要三级联动的话,要怎么操作呢?

        六晓0
        2017/9/4 17:34:07

        之前代码和业务觉得累赘就去除了 留个邮箱 等我加上直接发你

    回复
    轩雨墨潇 0
    2017/8/23 12:58:00
    如何在confirm前进行json的更新呢?
        六晓0
        2017/8/28 17:43:12

        你是在哪一步需要更新数据?如果不是在选择器操作的时候更新,就直接绑定事件比如$('.btn').on('click')函数里改变json,如果是选择器操作时,参考场景看看是否要添加回调函数

        六晓1
        2017/8/28 17:50:39

        目前已有的回调函数是

        afterOne:function(){} [选择一级后回调函数]
        afterTwo:function(){} [选择二级后回调函数]

        用法举例

        dataLink:json,
        afterOne:function(){
            this.container.data('mPicker').updateData(updateJson);
        }
    回复
    Yyqsumer 0
    2017/8/17 14:25:39

    简单方便调用,不错

    回复
取消回复