版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/LzzMandy/article/details/85089029
mui框架扩展了pipcker组件,可用于弹出选择器,在各平台上都有统一表现.poppicker和dtpicker是对picker的具体实现
1、文件引用
poppicker组件依赖mui.picker.js/.css mui.poppicker.js/.css
请务必在mui.js/css后中引用,也可统一引用 压缩版本:mui.picker.min.js
2、mui涉及到的方法如下：
| new PopPicker(layer,buttons) | layer | Int | 显示列数 |
| buttons | Type: Array | 显示按钮 如：new mui.PopPicker({buttons:['cancle','ok']}) |
|
| setData([data]) | data | Type: Array | 填充数据 如：picker.setData([{value:'zz',text:'智子'}]) |
| setSelectedIndex(index[,duration,callback]） | index | Type: Number | 指定列表选中项 如:picker.pickers[0].setSelectedIndex(4) |
| duration | Type: Number | 过渡效果持续时间( ms ) 如:picker.pickers[0].setSelectedIndex(4,200) |
|
| callback | Type: Function | 设置成功回调 如:picker.pickers[0].setSelectedIndex(4,200,function(){}) |
|
| setSelectedIndex(value[,duration,callback]） | value | Type: String | 指定列表选中项 如:picker.pickers[0].setSelectedValue('fourth') |
| duration | Type: Number | 渡效果持续时间( ms ) 如:picker.pickers[0].setSelectedValue('fourth',200) |
|
| callback | Type: Function | 设置成功回调 如:picker.pickers[0].setSelectedValue('fourth', 200, function(){}) |
|
| getSelectedItems() | 返回值[data] Type: Array |
获取选中的项（数组） 如:picker.getSelectedItems() |
|
| show(getSelectedItems) | 返回值:[data] Type: Array |
获取选中的项（数组） 如:picker.show(function(getSelectedItems){ console.log(getSelectedItems) }) *return false; 可以阻止选择框的关闭 |
|
| hide() | 隐藏picker 如:picker.hide() |
||
| dispose() | 释放组件资源(释放后将将不能再操作组件) 如:picker.dispose() * 通常情况下，不需要释放组件资源，初始化之后，可以一直使用。 * 当内容较多，如不释放组件资源，在某些设备上可能会卡顿。 * 所以每次用完便立即调用 dispose() 进行释放,下次用时再创建新实例。 |
对上述方法进行讲解：
1）通过new mui.PopPicker()初始化popPicker组件
var picker = new mui.PopPicker({
layer: 1,
buttons: ['cancle', 'ok']
});2）通过setData() 给picker对象添加数据
picker.setData([{
value: "first",
text: "第一项"
}, {
value: "second",
text: "第一项"
},
......
]);3）通过setSelectedIndex()和setSelectedValue()两个方法,设定指定层级的选中项
picker.pickers[0].setSelectedIndex(1);4）通过show(getSelectedItems)显示picker
picker.show(function(selectItems) {
//要实现的内容
});5）实例：展示一级示例、二级联动、三级联动效果，如下：
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数字输入框</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" type="text/css" href="css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="css/app.css" />
<link rel="stylesheet" type="text/css" href="css/mui.picker.css" />
<link rel="stylesheet" type="text/css" href="css/mui.poppicker.css" />
<style>
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">标题</h1>
</header>
<div id="" class="mui-content mui-content-padded">
<h5 class="mui-content-padded">一级示例</h5>
<button id='showUserPicker1' class="mui-btn mui-btn-block" type='button'>一级选择示例 ...</button>
<h5 class="mui-content-padded">二级示例</h5>
<button id='showUserPicker2' class="mui-btn mui-btn-block" type='button'>二级选择联动 ...</button>
<h5 class="mui-content-padded">三级示例</h5>
<button id='showUserPicker3' class="mui-btn mui-btn-block" type='button'>三级选择联动 ...</button>
<div class="content" id="info"></div>
</div>
</body>
<script src="js/mui.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/mui.picker.js"></script>
<script src="js/mui.poppicker.js"></script>
<script>
mui.init();
showLevel1();
showLevel2();
showLevel3();
function showLevel1() {
var picker = new mui.PopPicker({
layer: 1,
buttons: ['cancle', 'ok']
});
picker.setData([{
value: "first",
text: "第一项"
}, {
value: "second",
text: "第一项"
}, {
value: "third",
text: "第三项"
}, {
value: "fourth",
text: "第四项"
}, {
value: "fifth",
text: "第五项"
}]);
document.getElementById("showUserPicker1").addEventListener('tap', function(event) {
$("#info").text("");
// 默认显示第4项
picker.pickers[0].setSelectedIndex(3, 2000);
picker.show(function(selectItems) {
var text = selectItems[0].text;
$("#info").text("现在选择的是：" + text);
});
});
}
function showLevel2() {
$("#info").text("");
var picker = new mui.PopPicker({
layer: 2,
buttons: ['cancle', 'ok']
});
picker.setData([{
value: '110000',
text: '江苏',
children: [{
value: "110101",
text: "徐州"
}, {
value: "110102",
text: "南京"
}]
}, {
value: '120000',
text: '天津市',
children: [{
value: "120101",
text: "和平区"
}, {
value: "120102",
text: "河东区"
}, {
value: "120104",
text: "南开区"
}]
}]);
document.getElementById("showUserPicker2").addEventListener('tap', function(event) {
$("#info").text("");
// 默认第一层显示第1项;第二层显示第2项
picker.pickers[0].setSelectedIndex(0);
picker.pickers[1].setSelectedIndex(2);
picker.show(function(selectItems) {
var text1 = selectItems[0].text;
var text2 = selectItems[1].text;
$("#info").text("现在选择的是：" + text1 + "," + text2);
})
// picker.dispose();
});
}
function showLevel3() {
$("#info").text("");
var picker = new mui.PopPicker({
layer: 3,
buttons: ['cancle', 'ok']
});
picker.setData([{
value: '0',
text: 'A',
children: [{
value: "1",
text: "A-A",
children: [{
value: "2",
text: "A-A-A0"
}, {
value: "3",
text: "A-A-A1"
}, {
value: "4",
text: "A-A-A2"
}],
},{
value: "5",
text: "A-A1",
children: [{
value: "6",
text: "A-A1-A0"
}, {
value: "7",
text: "A-A1-A1"
}, {
value: "8",
text: "A-A1-A2"
}],
}],
}, {
value: '9',
text: 'B',
children: [{
value: "10",
text: "B-B",
children: [{
value: "11",
text: "B-B-B0"
}, {
value: "12",
text: "B-B-B1"
}, {
value: "13",
text: "B-B-B2"
}],
}]
}]);
document.getElementById("showUserPicker3").addEventListener('tap', function(event) {
$("#info").text("");
// 默认第一层显示第1项;第二层显示第2项;第三层显示第3项;
picker.pickers[0].setSelectedIndex(0);
picker.pickers[1].setSelectedIndex(1);
picker.pickers[2].setSelectedIndex(2);
picker.show(function(selectItems) {
var text1 = selectItems[0].text;
var text2 = selectItems[1].text;
var text3 = selectItems[2].text;
$("#info").text("现在选择的是：" + text1 + "," + text2 + "," + text3);
})
});
}
</script>
</html>