jQuery基于muipicker实现仿ios时间选择

2019-11-20 10:32:28

字体：大中小

来源：转载

供稿：网友

首先我们先来看原始的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);

效果图：