本文給大家分享的是把jQuery的muipicker插件修改實現(xiàn)仿IOS時間選擇特效，非常的不錯，有需要的小伙伴可以參考下。

1.引入mui.js, mui.pincker.min.js, mui.poppicker.js
2.使用地址時，因為數(shù)據(jù)是后臺提供的，所以要轉(zhuǎn)化成js能夠讀取的格式，格式為嵌套格式
3.引入mui.css，當然，可以自己寫css，也可以只把自己需要的標簽樣式復(fù)制過來即可。

首先看一下事例中的代碼

(function($, doc) {
      $.init();
            $.ready(function() {
               //   //級聯(lián)示例
               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 可以阻止選擇框的關(guān)閉
                    //return false;
                   });
               }, false);
            }); 
    })(mui, document);

解釋如下

1.png