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


Posted in Javascript onFebruary 22, 2016

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

效果图:

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

年月日

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

小时分钟

效果只有在手机端或者手机chrome的手机模拟器中可以看到。

最后附上muipicker的github地址 https://github.com/dcloudio/mui/tree/master/examples/hello-mui

Javascript 相关文章推荐
事件模型在各浏览器中存在差异
Oct 20 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 #Javascript
javascript实现一个简单的弹出窗
Feb 22 #Javascript
Js的Array数组对象详解
Feb 22 #Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 #Javascript
JS字符串的切分用法实例
Feb 22 #Javascript
JS实现上下左右对称的九九乘法表
Feb 22 #Javascript
基于Javascript实现倒计时功能
Feb 22 #Javascript
You might like
php笔记之:php数组相关函数的使用
2013/04/26 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
php支付宝APP支付功能
2020/07/29 PHP
event.srcElement+表格应用
2006/08/29 Javascript
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
一个加载js文件的小脚本
2007/06/28 Javascript
jQuery 树形结构的选择器
2010/02/15 Javascript
js如何实现设计模式中的模板方法
2013/07/23 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
js导出txt示例代码
2014/01/14 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
jquery添加div实现消息聊天框
2020/02/08 jQuery
Vue scoped及deep使用方法解析
2020/08/01 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
PyCharm在win10的64位系统安装实例
2017/11/26 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
Python 如何在字符串中插入变量
2020/08/01 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
怎样写好自我评价呢?
2014/02/16 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
关于保护环境的建议书
2014/05/13 职场文书
银行授权委托书范本
2014/10/04 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android