<!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" target="_blank" rel="external nofollow" >
<link href="css/mui.poppicker.css" target="_blank" rel="external nofollow" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" target="_blank" rel="external nofollow" />
<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">
<br />
<h5 class="mui-content-padded">普通示例</h5>
<div id='userResult' class="ui-alert"></div>
<div>
<label>Input</label>
<button id='showUserPicker' class="mui-btn mui-btn-block" type='button'>一級選擇示例 ...</button>
<button id='demo4' data-options='{"type":"date"}' class="btn mui-btn mui-btn-block">選擇日期 ...</button>
<div id='result' class="ui-alert"></div>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<!--<script src="../js/mui.picker.min.js"></script>-->
<script src="js/mui.picker.min.js"></script>
<script src="js/mui.poppicker.js"></script>
<script>
(function($, doc) {
$.init();
$.ready(function() {
});
})(mui, document);
//普通示例
var userPicker = new mui.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 = document.getElementById('showUserPicker');
var userResult = document.getElementById('showUserPicker');
showUserPickerButton.addEventListener('tap', function(event) {
userPicker.show(function(items) {
userResult.innerText = JSON.stringify(items[0].text);
//傳回 false 可以阻止選擇框的關閉
//return false;
});
}, false);
var result = mui('#demo4')[0];
var btns = mui('.btn');
btns.each(function(i, btn) {
btn.addEventListener('tap', function() {
var _self = this;
if (_self.picker) {
_self.picker.show(function(rs) {
result.innerText = '選擇結果: ' + rs.text;
_self.picker.dispose();
_self.picker = null;
});
} else {
var optionsJson = this.getAttribute('data-options') || '{}';
var options = JSON.parse(optionsJson);
var id = this.getAttribute('id');
/*
* 首次顯示時執行個體化元件
* 示例為了簡潔，将 options 放在了按鈕的 dom 上
* 也可以直接通過代碼聲明 optinos 用于執行個體化 DtPicker
*/
_self.picker = new mui.DtPicker(options);
_self.picker.show(function(rs) {
/*
* rs.value 拼合後的 value
* rs.text 拼合後的 text
* rs.y 年，可以通過 rs.y.vaue 和 rs.y.text 擷取值和文本
* rs.m 月，用法同年
* rs.d 日，用法同年
* rs.h 時，用法同年
* rs.i 分（minutes 的第二個字母），用法同年
*/
result.innerText = '選擇結果: ' + rs.text;
/*
* 傳回 false 可以阻止選擇框的關閉
* return false;
*/
/*
* 釋放元件資源，釋放後将将不能再操作元件
* 通常情況下，不需要示放元件，new DtPicker(options) 後，可以一直使用。
* 目前示例，因為内容較多，如不進行資原釋放，在某些裝置上會較慢。
* 是以每次用完便立即調用 dispose 進行釋放，下次用時再建立新執行個體。
*/
_self.picker.dispose();
_self.picker = null;
});
}
}, false);
})
</script>
</body>
</html>
MUI picker選擇器實作下拉菜單和時間選擇器 
MUI picker選擇器實作下拉菜單和時間選擇器 MUI picker選擇器實作下拉菜單和時間選擇器 
