jQuery基于muipicker實現(xiàn)仿ios時間選擇
首先我們先來看原始的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(選擇框)在不同的設(shè)備上UI可能會有差異,并且不支持多級聯(lián)動(多個 SELECT 可實現(xiàn),但較麻煩),故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">級聯(lián)示例</h5> <button id='showCityPicker' class="mui-btn mui-btn-block" type='button'>二級聯(lián)動示例 ...</button> <div id='cityResult' class="ui-alert"></div> <button id='showCityPicker3' class="mui-btn mui-btn-block" type='button'>三級聯(lián)動示例 ...</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: '總經(jīng)理 艾AA' }, { value: 'lj', text: '羅輯' }, { value: 'ymt', text: '云天明' }, { value: 'shq', text: '史強' }, { value: 'zhbh', text: '章北海' }, { value: 'zhy', text: '莊顏' }, { value: 'gyf', text: '關(guān)一帆' }, { 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 可以阻止選擇框的關(guān)閉 //return false; }); }, false); //----------------------------------------- //級聯(lián)示例 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 可以阻止選擇框的關(guān)閉 //return false; }); }, false); //----------------------------------------- // //級聯(lián)示例 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 可以阻止選擇框的關(guān)閉 //return false; }); }, false); }); })(mui, document); </script> </body> </html>
在此基礎(chǔ)上修改為類似ios選擇時間的插件。
把里面數(shù)據(jù)換成下面的數(shù)據(jù)就可以了。
(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
相關(guān)文章
JQuery Tips(3) 關(guān)于$()包裝集內(nèi)元素的改變
JQuery包裝集內(nèi)的元素在一開始的選定后,還可以通過一系列JQuery提供的方法對包裝集內(nèi)的元素進行擴充,修改,篩選,刪除find()方法 VS filter()方法2009-12-12jquery網(wǎng)頁日歷顯示控件calendar3.1使用詳解
這篇文章主要為大家詳細介紹了jquery網(wǎng)頁日歷顯示控件calendar3.1使用,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11easyUI使用分頁過濾器對數(shù)據(jù)進行分頁操作實例分析
這篇文章主要介紹了easyUI使用分頁過濾器對數(shù)據(jù)進行分頁操作,結(jié)合實例形式詳細分析了easyUI分頁過濾器對數(shù)據(jù)進行分頁操作具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2020-06-06jQuery Ajax和getJSON獲取后臺普通json數(shù)據(jù)和層級json數(shù)據(jù)用法分析
這篇文章主要介紹了jQuery Ajax和getJSON獲取后臺普通json數(shù)據(jù)和層級json數(shù)據(jù)用法,結(jié)合實例形式分析了jQuery基于ajax操作json格式數(shù)據(jù)的相關(guān)技巧,需要的朋友可以參考下2016-06-06