知識點：
城市篇
addEventListener(event,function,useCapture) ：方法用于向指定元素添加事件。
addEventListener(事件名，事件需要執行的函數，布爾值)
支援：所有HTML DOM事件
(1)tap和click的差別：
兩者都會在點選時觸發，但是在手機WEB端，click會有 200~300 ms，是以請用tap代替click作為點選事件。
(tap有擊穿現象，現在性能過剩，用click可行)
singleTap和doubleTap 分别代表單次點選和雙次點選。
*poppicker元件依賴mui.picker.js/.css mui.poppicker.js/.css請務必在mui.js/css後中引用,也可統一引用 壓縮版本: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 , //表示三列，即三級菜單或者關聯
buttons:['取消', '确定'] //顯示按鈕
})
通過picker.setData - 給picker對象添加資料
setData() 支援資料格式為: 數組
picker.setData([{value:'zz',text:'智子'}]); //一列樣式
picker.setData([{ //二列樣式
value: '110000',
text: '北京市',
children: [{
value: "110101",
text: "東城區"
}]
}])
picker.setData([{ //三列樣式
value: '110000',
text: '北京市',
children: [{
value: "110101",
text: "東城區",
children:[{
value: "111000",
text: "中關村"
}]
}]
}])
通過picker.show() - 顯示picker
通過picker.show( function(getSelectedItems) { } ) 擷取選中的項(數組)
PopPicker 建立執行個體并填充資料後，可以設定每個層級的選中項，因為 PopPicker
是支援多層級聯的，是以:
(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''的差別
picker.pickers[0].setSelectedValue('fourth', 2000);
//這裡表示預設選中第一列的第四項，時間是2000毫秒
picker.show(function(SelectedItem) { //擷取選中的項(數組)注意大小寫
console.log(SelectedItem);
})
.mui-picker{}可以設定選擇器css樣式；
.mui-picker{
background-color: #fff; //設定選擇器背景為白色
}
日期篇
通過new mui.DtPicker() - 初始化DtPicker元件 //城市是new mui.PopPicker()
通過type - 設定月曆初始視圖模式
通過labels - 設定預設标簽區域提示語
通過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'],//設定預設标簽區域提示語
"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) {
console.log(items.d); //得到選中的年
})
QQ截圖20170624231049.png
完整代碼：
Hello MUI
.mui-picker{
background-color: white;
}
.mui-poppicker-header{
background-color: white;
}
選擇城市
var picker = new mui.PopPicker({
layer: 3, //3層菜單
buttons:['取消','确定'] // 顯示按鈕名字
});
picker.setData([{
value: '110000',
text: '北京市',
children: [{
value: "110101",
text: "東城區",
children: [
{
value: '110111',
text:'中關村'
},
{
value: '110112',
text:'中關村2'
}
]
}],
}, {
value: '120000',
text: '天津市',
children: [
{
value: "120101",
text: "和平區"
}, {
value: "120102",
text: "河東區"
}, {
value: "120104",
text: "南開區",
children: [
{
value:'120105',
text:'地下城'
},
{
value:'120106',
text:'英雄聯盟'
}
]
}
]
}])
picker.pickers[0].setSelectedIndex(1); //預設選擇第1列，第2個元素(即天津市)
picker.pickers[1].setSelectedIndex(2,200,function() {}); //第2列，第三個元素(南開區)
picker.pickers[2].setSelectedIndex(1); // 第3列，(英雄聯盟)
document.getElementById('aa').addEventListener('tap',function() {
picker.show(function(getSelectedItems){ //擷取選中的項(數組)
console.log(getSelectedItems[0].text); //輸出結果為： 天津市
})
// picker.show(function(SelectedItem) {
// console.log(SelectedItem[0].text);
// })
});