mobileSelect.js

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

##Features

---

• 原生js移动端选择控件，不依赖任何库
• 可传入普通数组或者json数组
• 可根据传入的参数长度，自动渲染出对应的列数，支持单项到多项选择
• 自动识别是否级联
• 选择成功后，提供自定义回调函数
• 同样，每次滑动时，也调用另一个回调函数
• 能够在已经实例化控件后，提供update函数，传其他参数再次渲染
• 提供重定位函数

##Demo

---

##Installation

---

<link rel="stylesheet" type="text/css" href="css/mobileSelect.css">
<script src="js/mobileSelect.js" type="text/javascript"></script>

##Getting Started

---

普通数组格式-非联动

<input type="text" id="day">

<script type="text/javascript">
var mobileSelect1 = new MobileSelect({
    trigger: '#day', 
    title: '单项选择',  
    wheels: [
                {data:['周日','周一','周二','周三','周四','周五','周六']}
            ],
    position:[2] //初始化定位
});
</script>

---

json格式-非联动

var mobileSelect6 = new MobileSelect({
    trigger: '#trigger6',
    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 数组
    } 
});

---

json格式-联动

  var addressLocation = new MobileSelect({
      trigger: '#id',
      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);
      } 
  });

---

##API

---

function	arguments	Description
setTitle()	string	设置控件的标题
updateWheel()	sliderIndex, data	重新渲染指定的轮子
locatePostion()	sliderIndex, posIndex	传入位置数组，重定位轮子的位置
callback()	indexArr, data	点击-选择 后执行的回调函数，返回当前选中的索引、以及选中的json数组
limit()	indexArr	每一次手势滑动结束后执行的回调函数,返回当前选中的索引

---

##项目demo： 使用limit()、callback()、updateWheel()、locatePostion()函数实现如下功能：

• 选择当天日期时，不得超过今天已过时辰。
• 选择取车时间后，还车时间不得超过取车时间（包括日期和时间）。

---