MUI框架擴展了Picker組件，可用於彈出單級或多級選擇器，poppicker和dtpicker是對picker的具體實現
【PopPicker示例】
注：PopPicker組件依賴mui.picker.js/.css和mui.poppicker.js/.css，請務必在mui.js/css後中引用。
1. 初始化PopPicker組件對象
var picker = new mui.PopPicker();2. 給對象設置數據集
picker.setData([{value:'fish',text:'魚'},{value:'paws',text:'熊掌'}]);3. 顯示PopPicker對象
picker.show(SelectedItemsCallback)注：SelectedItemsCallback爲回調函數
下面直接上代碼：）
<html>
<head>
<meta charset="utf-8">
<title>PopPicker</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!--標準mui.css-->
<link rel="stylesheet" href="css/mui.min.css">
<!--App自定義的css-->
<link rel="stylesheet" type="text/css" href="css/mui.picker.css" />
<link rel="stylesheet" type="text/css" href="css/mui.poppicker.css" />
</head>
<body>
<div class="mui-content">
<button id='subinvman_sel' class="mui-btn mui-btn-block" type='button'>魚與熊掌</button>
</div>
<!--引用js文件-->
<script src="../../js/jquery-1.11.2.min.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/mui.picker.min.js"></script>
<script type="text/javascript">
mui.init({
swipeBack:true //啓用右滑關閉功能
});
//PopPicker選擇器
var subinvman_sel=$("#subinvman_sel")[0];
if(subinvman_sel)
{
var picker=new mui.PopPicker();
picker.setData([{value:'fish',text:'魚'},{value:'paws',text:'熊掌'}]);
document.querySelector("#subinvman_sel").addEventListener("tap",function(){
picker.show(function(items){
$("#subinvman_sel")[0].innerHTML=items[0].text;
});
});
}
</script>
</body>
</html> 注：picker.setData();數據集可以[{value:'',text:''},{value:'',text:''}]格式後臺動態生成
效果如下圖：
【DtPicker示例】
1. 初始化DtPicker組件對象
var dtpicker = new DtPicker(options);注：options選項詳見MUI官網
2. 顯示dtpicker對象
dtpicker.show(SelectedItemsCallback)注：SelectedItemsCallback爲回調函數
下面是DtPicker代碼示例：
<html>
<head>
<meta charset="utf-8">
<title>DtPicker</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!--標準mui.css-->
<link rel="stylesheet" href="css/mui.min.css">
<!--App自定義的css-->
<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
<link rel="stylesheet" type="text/css" href="css/mui.poppicker.css" />
</head>
<body>
<div class="mui-content">
<button id='subinvman_sel' class="mui-btn mui-btn-block" type='button'>餘生的第一天</button>
</div>
<!--引用js文件-->
<script src="../../js/jquery-1.11.2.min.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/mui.picker.min.js"></script>
<script type="text/javascript">
mui.init({
swipeBack:true //啓用右滑關閉功能
});
//DtPicker選擇器
var subinvman_sel=$("#subinvman_sel")[0];
if(subinvman_sel)
{
document.querySelector("#subinvman_sel").addEventListener("tap",function(){
var dtpicker=new mui.DtPicker({"type":"date"});
dtpicker.show(function(items){
$("#subinvman_sel")[0].innerHTML=items.text;
dtpicker.dispose();
});
});
}
</script>
</body>
</html> 效果如下圖：
