159 lines
5.3 KiB
HTML
159 lines
5.3 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
|||
|
|
<title></title>
|
|||
|
|
<!--标准mui.css-->
|
|||
|
|
<link rel="stylesheet" href="../css/mui.min.css">
|
|||
|
|
<!--App自定义的css-->
|
|||
|
|
<link rel="stylesheet" type="text/css" href="../css/app.css" />
|
|||
|
|
<link href="../css/mui.picker.css" rel="stylesheet" />
|
|||
|
|
<link href="../css/mui.poppicker.css" rel="stylesheet" />
|
|||
|
|
<!--<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />-->
|
|||
|
|
<style>
|
|||
|
|
.mui-btn {
|
|||
|
|
font-size: 16px;
|
|||
|
|
padding: 8px;
|
|||
|
|
margin: 3px;
|
|||
|
|
}
|
|||
|
|
h5.mui-content-padded {
|
|||
|
|
margin-left: 3px;
|
|||
|
|
margin-top: 20px !important;
|
|||
|
|
}
|
|||
|
|
h5.mui-content-padded:first-child {
|
|||
|
|
margin-top: 12px !important;
|
|||
|
|
}
|
|||
|
|
.ui-alert {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 20px 10px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
</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">picker（选择器）</h1>
|
|||
|
|
</header>
|
|||
|
|
<div class="mui-content">
|
|||
|
|
<div class="mui-content-padded">
|
|||
|
|
<h5 class="mui-content-padded">原生 SELECT</h5>
|
|||
|
|
<select class="mui-btn mui-btn-block">
|
|||
|
|
<option value="item-1">item-1</option>
|
|||
|
|
<option value="item-2">item-2</option>
|
|||
|
|
<option value="item-3">item-3</option>
|
|||
|
|
<option value="item-4">item-4</option>
|
|||
|
|
<option value="item-5">item-5</option>
|
|||
|
|
</select>
|
|||
|
|
<br />
|
|||
|
|
<p>原生 SELECT（选择框）在不同的设备上UI可能会有差异，并且不支持多级联动(多个 SELECT 可实现，但较麻烦)，故mui封装了picker组件，参见如下示例。</p>
|
|||
|
|
<h5 class="mui-content-padded">普通示例</h5>
|
|||
|
|
<button id='showUserPicker' class="mui-btn mui-btn-block" type='button'>一级选择示例 ...</button>
|
|||
|
|
<div id='userResult' class="ui-alert"></div>
|
|||
|
|
<h5 class="mui-content-padded">级联示例</h5>
|
|||
|
|
<button id='showCityPicker' class="mui-btn mui-btn-block" type='button'>二级联动示例 ...</button>
|
|||
|
|
<div id='cityResult' class="ui-alert"></div>
|
|||
|
|
<button id='showCityPicker3' class="mui-btn mui-btn-block" type='button'>三级联动示例 ...</button>
|
|||
|
|
<div id='cityResult3' class="ui-alert"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script src="../js/mui.min.js"></script>
|
|||
|
|
<!--<script src="../js/mui.picker.min.js"></script>-->
|
|||
|
|
<script src="../js/mui.picker.js"></script>
|
|||
|
|
<script src="../js/mui.poppicker.js"></script>
|
|||
|
|
<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
|
|||
|
|
<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
|
|||
|
|
<script>
|
|||
|
|
(function($, doc) {
|
|||
|
|
$.init();
|
|||
|
|
$.ready(function() {
|
|||
|
|
/**
|
|||
|
|
* 获取对象属性的值
|
|||
|
|
* 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
|
|||
|
|
* @param {Object} obj 对象
|
|||
|
|
* @param {String} param 属性名
|
|||
|
|
*/
|
|||
|
|
var _getParam = function(obj, param) {
|
|||
|
|
return obj[param] || '';
|
|||
|
|
};
|
|||
|
|
//普通示例
|
|||
|
|
var userPicker = new $.PopPicker();
|
|||
|
|
userPicker.setData([{
|
|||
|
|
value: 'ywj',
|
|||
|
|
text: '董事长 叶文洁'
|
|||
|
|
}, {
|
|||
|
|
value: 'aaa',
|
|||
|
|
text: '总经理 艾AA'
|
|||
|
|
}, {
|
|||
|
|
value: 'lj',
|
|||
|
|
text: '罗辑'
|
|||
|
|
}, {
|
|||
|
|
value: 'ymt',
|
|||
|
|
text: '云天明'
|
|||
|
|
}, {
|
|||
|
|
value: 'shq',
|
|||
|
|
text: '史强'
|
|||
|
|
}, {
|
|||
|
|
value: 'zhbh',
|
|||
|
|
text: '章北海'
|
|||
|
|
}, {
|
|||
|
|
value: 'zhy',
|
|||
|
|
text: '庄颜'
|
|||
|
|
}, {
|
|||
|
|
value: 'gyf',
|
|||
|
|
text: '关一帆'
|
|||
|
|
}, {
|
|||
|
|
value: 'zhz',
|
|||
|
|
text: '智子'
|
|||
|
|
}, {
|
|||
|
|
value: 'gezh',
|
|||
|
|
text: '歌者'
|
|||
|
|
}]);
|
|||
|
|
var showUserPickerButton = doc.getElementById('showUserPicker');
|
|||
|
|
var userResult = doc.getElementById('userResult');
|
|||
|
|
showUserPickerButton.addEventListener('tap', function(event) {
|
|||
|
|
userPicker.show(function(items) {
|
|||
|
|
userResult.innerText = JSON.stringify(items[0]);
|
|||
|
|
//返回 false 可以阻止选择框的关闭
|
|||
|
|
//return false;
|
|||
|
|
});
|
|||
|
|
}, false);
|
|||
|
|
//-----------------------------------------
|
|||
|
|
//级联示例
|
|||
|
|
var cityPicker = new $.PopPicker({
|
|||
|
|
layer: 2
|
|||
|
|
});
|
|||
|
|
cityPicker.setData(cityData);
|
|||
|
|
var showCityPickerButton = doc.getElementById('showCityPicker');
|
|||
|
|
var cityResult = doc.getElementById('cityResult');
|
|||
|
|
showCityPickerButton.addEventListener('tap', function(event) {
|
|||
|
|
cityPicker.show(function(items) {
|
|||
|
|
cityResult.innerText = "你选择的城市是:" + items[0].text + " " + items[1].text;
|
|||
|
|
//返回 false 可以阻止选择框的关闭
|
|||
|
|
//return false;
|
|||
|
|
});
|
|||
|
|
}, false);
|
|||
|
|
//-----------------------------------------
|
|||
|
|
// //级联示例
|
|||
|
|
var cityPicker3 = new $.PopPicker({
|
|||
|
|
layer: 3
|
|||
|
|
});
|
|||
|
|
cityPicker3.setData(cityData3);
|
|||
|
|
var showCityPickerButton = doc.getElementById('showCityPicker3');
|
|||
|
|
var cityResult3 = doc.getElementById('cityResult3');
|
|||
|
|
showCityPickerButton.addEventListener('tap', function(event) {
|
|||
|
|
cityPicker3.show(function(items) {
|
|||
|
|
cityResult3.innerText = "你选择的城市是:" + _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
|
|||
|
|
//返回 false 可以阻止选择框的关闭
|
|||
|
|
//return false;
|
|||
|
|
});
|
|||
|
|
}, false);
|
|||
|
|
});
|
|||
|
|
})(mui, document);
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|