效果
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta content="telephone=no" name="format-detection" />
<title>Index</title>
<link href="css/mui.min.css" rel="stylesheet" />
<link href="./css/mui.picker.css" rel="stylesheet" />
<link href="./css/mui.poppicker.css" rel="stylesheet" />
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/mui.min.js"></script>
<script src="./js/mui.picker.js"></script>
<script src="./js/mui.poppicker.js"></script>
</head>
<body>
<button class="mui-btn mui-btn-block test" type='button'>选择轮胎</button>
<button class="mui-btn mui-btn-block test" type='button'>选择里程</button>
<button class="mui-btn mui-btn-block test" type='button'>选择规格</button>
<script>
(function ($, doc) {
$.init();
$.ready(function () {
/**
* 获取对象属性的值
* 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
* @param {Object} obj 对象
* @param {String} param 属性名
*/
var _getParam = function (obj, param) {
return obj[param] || '';
};
var data = [
[{
value: 'ywj',
text: '轮胎1'
}, {
value: 'aaa',
text: '轮胎2'
}, {
value: 'lj',
text: '轮胎3'
}, {
value: 'lj',
text: '轮胎4'
}],
[{
value: 'ywj',
text: '里程1'
}, {
value: 'aaa',
text: '里程2'
}, {
value: 'lj',
text: '里程3'
}, {
value: 'lj',
text: '里程4'
}],
[{
value: 'ywj',
text: '规格1'
}, {
value: 'aaa',
text: '规格2'
}, {
value: 'lj',
text: '规格3'
}, {
value: 'lj',
text: '规格4'
}]
];
//普通示例
var userPicker = new $.PopPicker();
var showUserPickerButton = doc.getElementsByClassName('test');
for (var i = 0; i < showUserPickerButton.length; i++) {
(function (i) {
showUserPickerButton[i].addEventListener('tap', function (event) {
userPicker.setData(data[i]);
var s = this;
userPicker.show(function (items) {
s.innerText = items[0].text;
});
}, false);
})(i)
}
});
})(mui, document);
</script>
</body>
</html>
网友评论