本文给大家分享的是把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);
解释如下
一般地址后台制定 所以申请数据并转化成嵌套格式,具体可以console.log(cityData3),查看数据结构。
时间选择器做法类似,具体可参考:http://www.jb51.net/article/79818.htm