知识点：
城市篇
- 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) {
/* * 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: "东城区",
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);
// })
});
</script>
</html>
