伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】

所属分类:韦德1946手机版客户端-选择框
 12306  76  查看评论 (21)
伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】 ie兼容10
更新时间:2017/9/8 上午12:20:01更新说明:更新到最新版

mobileSelect.js

一款多功能的移动端滚动选择器,支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等..    

特性

  • 原生js移动端选择控件,不依赖任何库
  • 可传入普通数组或者json数组
  • 可根据传入的参数长度,自动渲染出对应的列数,支持单项到多项选择
  • 自动识别是否级联
  • 选择成功后,提供自定义回调函数callback() 返回当前选择索引位置、以及选择的数据(数组/json)
  • 每次手势滑动结束后,也提供一个回调函数transitionEnd() 返回当前选择索引位置、以及选择的数据(数组/json)
  • 能够在已经实例化控件后,提供update函数,传其他参数再次渲染
  • 提供重定位函数

使用方法

引入<link rel="stylesheet" type="text/css" href="css/mobileSelect.css"> <script src="js/mobileSelect.js" type="text/javascript"></script>快速入门①普通数组格式-非联动<div id="day"></div> <script type="text/javascript"> var mobileSelect1 = new MobileSelect({     trigger: '#day',      title: '单项选择',       wheels: [                 {data:['周日','周一','周二','周三','周四','周五','周六']}             ],     position:[2] //初始化定位 }); </script>②json格式-非联动<div id="area"></div> <script type="text/javascript"> var mobileSelect2 = new MobileSelect({     trigger: '#area',     title: '地区选择',     wheels: [                 {data:[                     {id:'1',value:'附近'},                     {id:'2',value:'上城区'},                     {id:'3',value:'下城区'},                     {id:'4',value:'江干区'},                     {id:'5',value:'拱墅区'},                     {id:'6',value:'西湖区'}                 ]},                 {data:[                     {id:'1',value:'1000米'},                     {id:'2',value:'2000米'},                     {id:'3',value:'3000米'},                     {id:'4',value:'5000米'},                     {id:'5',value:'10000米'}                 ]}             ],     callback:function(indexArr, data){         console.log(data); //返回选中的json数据     }  }); </script>③json格式-联动<div id="area2"></div> <script type="text/javascript">   var addressLocation = new MobileSelect({       trigger: '#area2',       title: '地区选择-联动',       wheels: [                   {data:[                       {                           id:'1',                           value:'附近',                           childs:[                               {id:'1',value:'1000米'},                               {id:'2',value:'2000米'},                               {id:'3',value:'3000米'},                               {id:'4',value:'5000米'},                               {id:'5',value:'10000米'}                           ]                       },                       {id:'2',value:'上城区'},                       {id:'3',value:'下城区'},                       {id:'4',value:'江干区'},                       {id:'5',value:'拱墅区'},                       {id:'6',value:'西湖区'}                   ]}               ],       position:[0,1],       callback:function(indexArr, data){           console.log(data); //返回选中的json数据       }    }); </script>

参数

选项默认值类型描述
trigger必填参数 无默认值String触发对象的id/class/tag
wheels必填参数 无默认值Array数据源,需要显示的数据
title''            String控件标题
position[0,0,0,…]Array初始化定位
callbackfunction(indexArr, data){}function选择成功后触发的回调函数,返回indexArr、data
transitionEndfunction(indexArr, data){}function每一次手势滑动结束后触发的回调函数,返回indexArr、data
注:回调函数中返回的参数含义如下
  • indexArr是当前选中的索引数组 如[0,0,1] 代表有三个轮子 选中的数据是第一个轮子的第0个数据、第二个轮子的第0个数据、第三个轮子的第1个数据
  • data是当前选中的json数据 如[{id:'1',value:'hello'},{id:'2',value:'world'}]
功能函数:
函数名参数描述
setTitle()string设置控件的标题
updateWheel()sliderIndex, data重新渲染指定的轮子
locatePostion()sliderIndex, posIndex传入位置数组,重定位轮子的位置

注:功能函数中需要传递的参数含义如下
  • sliderIndex 代表的是要修改的轮子的索引
  • posIndex 代表位置索引
功能函数demo:<div id="day"></div> var mySelect = new MobileSelect({     trigger: '#day',      wheels: [                 {data:['周日','周一','周二','周三','周四','周五','周六']},                 {data:['08:00','09:00','10:00','11:00','12:00','13:00','14:00']}             ],     position:[1,1] //初始化定位 两个轮子都选中在索引1的选项 }); //---------------------------------------------- //进行基础的实例化之后,对实例用功能函数操作  // mySelect.setTitle('啦啦啦(???????)');  // 设置控件的标题 // mySelect.updateWheel(0,['sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']); // 更新第0个轮子的数据,数据变为英文的星期几 // mySelect.locatePostion(1,0); // 重新定位第1个轮子的位置,将第1个轮子的第0个数据改为当前选中。 // (第1个轮子是指右边的轮子,左边的轮子是第0个)
相关伟德BETVICTOR-选择框

jQuery仿美团APP筛选

jQuery条件筛选
  选择框
 14534  101

自制小清新select伟德BETVICTOR

通过原生生成美化后的,分享给初学者
  选择框
 11425  66

仿淘宝手机网站选择省市县效果

仿淘宝手机网站选择省市县效果
  选择框
 16171  112

jquery城市选择

使用jquery简单制作的城市选择,学起来很简单,功能还不够完善。
  选择框
 7412  37

讨论这个项目(21)回答他人问题或分享伟德BETVICTOR使用方法奖励jQ币

    For Sun 0
    2018/1/15 14:40:26
    有没有遇到过手机端 选择框不能二次更改的 回复
    tot 0
    2018/1/6 22:46:07
    这个报错。移动端,用demo的ajax方式。 Uncaught TypeError: Cannot use 'in' operator to search for 'childs' in []   求救我啊有重酬  跪求
        tot0
        2018/1/6 22:46:53
        我微信13058288281  作者或者其他大神,谁看到了懂的帮帮我这个傻逼。跪下了
        For Sun0
        2018/1/15 14:41:56
        你数组没拼对
    回复
    遥远的她。 0
    2018/1/2 18:39:30
    如何能不改变触发div的html。
        迷茫触动了人生0
        2018/1/3 10:51:18
        我也想知道
    回复
    含羞草恋上梦昙花 0
    2017/11/16 10:46:46
    在安卓上和pc端没事,在苹果上就不行,选择不是当前选择的值 回复
    Naughty_Guy 0
    2017/11/6 23:02:35
    很好用。。正是我想要,但滑动不流畅,只能忍痛放弃啊。。。或者能否请作者解决一下滑动不流畅的问题啊。。。感谢!
        tot0
        2018/1/6 22:41:37
        您好请问下我用demo内的ajax并不能渲染数据进去 报错 如何解决。  13058288281微信  求救急有赏金感谢
    回复
    一半火焰 0
    2017/10/30 23:01:42
    能否设置移动端页面上局部滑动 回复
    Aset~ 0
    2017/10/25 14:46:20
    在angular中使用时出了点儿问题 回复
    我"? 0
    2017/9/12 16:43:05
    position有问题,当设置了position[1,5]的时候,并不是联动的数据 回复
    SunnyCyx 0
    2017/9/8 10:51:50
    虽然不影响使用,但是在火狐浏览器下会有event is not defined的错误提示。原因是火狐使用了W3C DOM,里面并无event. 回复
    0
    2017/8/29 14:00:31
    我想问一下,打错了,不好意思。 回复
取消回复