知識點：
城市篇
- addEventListener(event,function,useCapture) ：方法用于向指定元素添加事件。
addEventListener(事件名廉油，事件需要執(zhí)行的函數(shù)惠险，布爾值)
支持：所有HTML DOM事件
（1）tap和click的區(qū)別：
兩者都會在點擊時觸發(fā)，但是在手機WEB端抒线，click會有 200~300 ms班巩，所以請用tap代替click作為點擊事件。
(tap有擊穿現(xiàn)象嘶炭，現(xiàn)在性能過剩抱慌，用click可行)
singleTap和doubleTap 分別代表單次點擊和雙次點擊。
- *poppicker組件依賴mui.picker.js/.css mui.poppicker.js/.css請務必在mui.js/css后中引用,也可統(tǒng)一引用 壓縮版本:mui.picker.min.js
這里需要引入 mui.picker.js mui.picker.css mui.poppicker.js mui.poppicker.css
四個文件眨猎，或者這四個文件的min文件
- 通過new mui.PopPicker() - 初始化popPicker組件
var picker = new mui.PopPicker({ //這里注意大小寫PopPicker
layer: 3 , //表示三列抑进，即三級菜單或者聯(lián)動
buttons:['取消', '確定'] //顯示按鈕
})
- 通過picker.setData - 給picker對象添加數(shù)據(jù)
setData() 支持數(shù)據(jù)格式為: 數(shù)組
picker.setData([{value:'zz',text:'智子'}]); //一列樣式
picker.setData([{ //二列樣式
value: '110000',
text: '北京市',
children: [{
value: "110101",
text: "東城區(qū)"
}]
}])
picker.setData([{ //三列樣式
value: '110000',
text: '北京市',
children: [{
value: "110101",
text: "東城區(qū)",
children:[{
value: "111000",
text: "中關村"
}]
}]
}])
- 通過picker.show() - 顯示picker
- 通過picker.show( function(getSelectedItems) { } ) 獲取選中的項（數(shù)組）
PopPicker 創(chuàng)建實例并填充數(shù)據(jù)后，可以設定每個層級的選中項睡陪，因為 PopPicker
是支持多層級聯(lián)的寺渗，所以:
(1)可通過 instance.pickers[index] 拿到指定層級的實例，
(2)然后通過setSelectedIndex()和setSelectedValue()兩個方法,設定指定層級的選中項
var picker = new mui.PopPicker();
picker.setData([{
value: "first",
text: "第一項"
}, {
value: "second",
text: "第一項"
}, {
value: "third",
text: "第三項"
}, {
value: "fourth",
text: "第四項"
}, {
value: "fifth",
text: "第五項"
}])
//picker.pickers[0].setSelectedIndex(4, 2000); //4和value:''fourth''的區(qū)別
picker.pickers[0].setSelectedValue('fourth', 2000);
//這里表示默認選中第一列的第四項兰迫，時間是2000毫秒
picker.show(function(SelectedItem) { //獲取選中的項（數(shù)組）注意大小寫
console.log(SelectedItem);
})
- .mui-picker{}可以設置選擇器css樣式信殊；
.mui-picker{
background-color: #fff; //設置選擇器背景為白色
}
日期篇
- 通過new mui.DtPicker() - 初始化DtPicker組件 //城市是new mui.PopPicker()
- 通過type - 設置日歷初始視圖模式
- 通過labels - 設置默認標簽區(qū)域提示語
- 通過beginDate和endDate設置開始，結束日期
- 通過customData -設置時間/日期別名
- 通過dtPicker.show( SelectedItemsCallback ) - 顯示dtPicker
var dtpicker = new mui.DtPicker({ //注意大小寫
"type": "time", // 時間格式(時分)
// "type":"datetime"(年月日時分)
// "type":"date"(年月日)
// "type":"hour"(年月日時)
"labels": ['年', 'Mon', 'Day', 'Hour', 'min'],//設置默認標簽區(qū)域提示語
"beginDate": new Date(2015, 04, 25),//設置開始日期
"endDate": new Date(2016, 04, 25),//設置結束日期
"customData": {
"h": [ //時
{ value: "am", text: "上午" },
{ value: "pm", text: "下午" },
],
"i":[
{value: "10", text: "10分"},
{value: "20", text: "20分"},
]
}
})
dtpicker.show(function(items) {
/* * items.value 拼合后的 value
* items.text 拼合后的 text
* items.y 年逮矛，可以通過 rs.y.vaue 和 rs.y.text 獲取值和文本
* items.m 月鸡号，用法同年
* items.d 日，用法同年
* items.h 時须鼎，用法同年
* items.i 分（minutes 的第二個字母）鲸伴，用法同年
*/
console.log(items.d); //得到選中的年
})
QQ截圖20170624231049.png
完整代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</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" href="mui.min.css">
<link rel="stylesheet" type="text/css" href="mui.picker.min.css">
<link rel="stylesheet" type="text/css" href="mui.poppicker.css">
<!--App自定義的css-->
<!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
<style type="text/css">
/*.mui-poppicker-body{
background-color: white;
border: 1px solid red;
color:yellow;
}*/
.mui-picker{
background-color: white;
}
.mui-poppicker-header{
background-color: white;
}
</style>
</head>
<body>
<div id="aa" style="margin: 10px auto;background:yellow;heigth:30px;width: 300px;">選擇城市</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript" src="./jquery-1.8.3.min.js" ></script>
<script src="mui.min.js"></script>
<script type="text/javascript" src="mui.picker.min.js"></script>
<script type="text/javascript" src="mui.poppicker.js"></script>
<script>
var picker = new mui.PopPicker({
layer: 3, //3層菜單
buttons:['取消','確定'] // 顯示按鈕名字
});
picker.setData([{
value: '110000',
text: '北京市',
children: [{
value: "110101",
text: "東城區(qū)",
children: [
{
value: '110111',
text:'中關村'
},
{
value: '110112',
text:'中關村2'
}
]
}],
}, {
value: '120000',
text: '天津市',
children: [
{
value: "120101",
text: "和平區(qū)"
}, {
value: "120102",
text: "河東區(qū)"
}, {
value: "120104",
text: "南開區(qū)",
children: [
{
value:'120105',
text:'地下城'
},
{
value:'120106',
text:'英雄聯(lián)盟'
}
]
}
]
}])
picker.pickers[0].setSelectedIndex(1); //默認選擇第1列府蔗，第2個元素（即天津市）
picker.pickers[1].setSelectedIndex(2,200,function() {}); //第2列，第三個元素（南開區(qū)）
picker.pickers[2].setSelectedIndex(1); // 第3列汞窗，（英雄聯(lián)盟）
document.getElementById('aa').addEventListener('tap',function() {
picker.show(function(getSelectedItems){ //獲取選中的項（數(shù)組）
console.log(getSelectedItems[0].text); //輸出結果為： 天津市
})
// picker.show(function(SelectedItem) {
// console.log(SelectedItem[0].text);
// })
});
</script>
</html>
