首先我們先來看原始的muipicker的例子
<!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() { //普通樣本 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 = "你選擇的城市是:" + (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text; //返回 false 可以阻止選擇框的關閉 //return false; }); }, false); }); })(mui, document); </script> </body></html>
在此基礎上修改為類似ios選擇時間的外掛程式。
把裡面資料換成下面的資料就可以了。
(function($, doc) { $.init(); $.ready(function() { //普通樣本// 年月 var yearArray = new Array(); for (var i = 0; i < 10; i ++) { var monthArray = new Array(); for (var j = 0; j < 12; j ++) { var month = new Object(); month.value = j + 1 + "月"; month.text = j + 1 + "月"; monthArray.push(month); } var year = new Object(); year.value = i + 2016 + "年" ; year.text = i + 2016 + "年"; year.children = monthArray; yearArray.push(year); };//年月日 var yearArray = new Array(); for (var i = 0; i < 10; i ++) { var monthArray = new Array(); for (var j = 0; j < 12; j ++) { //月的最後一天 var year = i + 2016; var month = j; var lastDay = new Date(year, month + 1, 0).getDate();//month 要加1,原本month是從0開始的,但是因為0是這個月的上個月,所以到了上個月. if(year == 2016 && month == 1) { console.log("lastday" + lastDay); } var dayArray = new Array(); for(var k = 0; k < lastDay; k ++) { var day = new Object(); day.value = k + 1 + "日"; day.text = k + 1 + "日"; dayArray.push(day); } var month = new Object(); month.children = dayArray; month.value = j + 1 + "月"; month.text = j + 1 + "月"; monthArray.push(month); } var year = new Object(); year.value = i + 2016 + "年" ; year.text = i + 2016 + "年"; year.children = monthArray; yearArray.push(year); }; console.log(yearArray);// 小時分鐘 var hoursec = new Array(); for (var i = 0; i < 24; i ++) { var hsChildrenArray = new Array(); for (var j = 0; j < 60; j ++) { var childrenObject = new Object(); var secTrue = j ; if(j < 10) { var secTrue = j ; childrenObject.value = "0" + secTrue; childrenObject.text = "0" + secTrue; }else { childrenObject.value = secTrue ; childrenObject.text = secTrue; } hsChildrenArray.push(childrenObject); } var object = new Object(); if(i < 10) { object.value = "0" + i + ":" ; object.text = "0" + i + ":"; }else { object.value = i +":" ; object.text = i + ":"; } object.children = hsChildrenArray; hoursec.push(object); }; }); })(mui, document);
效果圖：
年月日
小時分鐘
效果只有在手機端或者手機chrome的手機模擬器中可以看到。
最後附上muipicker的github地址 https://github.com/dcloudio/mui/tree/master/examples/hello-mui
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
