移动端城市/时间选择器（使用muipicker插件）

本文给大家分享的是把jQuery的muipicker插件修改实现仿IOS时间选择特效，非常的不错，有需要的小伙伴可以参考下。

1.引入mui.js, mui.pincker.min.js, mui.poppicker.js
2.使用地址时，因为数据是后台提供的，所以要转化成js能够读取的格式，格式为嵌套格式
3.引入mui.css，当然，可以自己写css，也可以只把自己需要的标签样式复制过来即可。

首先看一下事例中的代码

(function($, doc) {
      $.init();
            $.ready(function() {
               //   //级联示例
               var cityPicker3 = new $.PopPicker({
               layer: 3
               });  
               cityPicker3.setData(cityData3);
               var showCityPickerButton = doc.getElementById('showCityPicker3');
               var cityResult3 = doc.getElementById('cityResult3');
               showCityPickerButton.addEventListener('tap', function(event) {
                   cityPicker3.show(function(items) {
                    cityResult3.innerText = "你选择的城市是:" + (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
                    //返回 false 可以阻止选择框的关闭
                    //return false;
                   });
               }, false);
            }); 
    })(mui, document);

解释如下

1.png

一般地址后台制定 所以申请数据并转化成嵌套格式，具体可以console.log（cityData3），查看数据结构。
时间选择器做法类似，具体可参考： http://www.jb51.net/article/79818.htm