本文給大家分享的是把jQuery的muipicker插件修改實(shí)現(xiàn)仿IOS時(shí)間選擇特效榜揖，非常的不錯(cuò)，有需要的小伙伴可以參考下觉至。
1.引入mui.js, mui.pincker.min.js, mui.poppicker.js
2.使用地址時(shí)育灸，因?yàn)閿?shù)據(jù)是后臺(tái)提供的号坡，所以要轉(zhuǎn)化成js能夠讀取的格式，格式為嵌套格式
3.引入mui.css矗愧，當(dāng)然倡怎，可以自己寫css，也可以只把自己需要的標(biāo)簽樣式復(fù)制過(guò)來(lái)即可贱枣。
首先看一下事例中的代碼
(function($, doc) {
$.init();
$.ready(function() {
// //級(jí)聯(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
一般地址后臺(tái)制定 所以申請(qǐng)數(shù)據(jù)并轉(zhuǎn)化成嵌套格式监署，具體可以console.log（cityData3），查看數(shù)據(jù)結(jié)構(gòu)纽哥。
時(shí)間選擇器做法類似钠乏，具體可參考：http://www.jb51.net/article/79818.htm
