MUI-picker（選擇器），一級、二級聯動、三級聯動
阿新 • • 發佈：2018-12-28
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>