首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript面向对象之体会[总结]
Nov 13 Javascript
Jquery优化效率 提升性能解决方案
Sep 06 Javascript
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
解析javascript系统错误：-1072896658的解决办法
Jul 08 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
JavaScript中的Math.E属性使用详解
Jun 12 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
Dec 02 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
几行js代码实现自适应
Feb 24 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
JavaScript实现原型封装轮播图
Dec 27 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
localStorage(1) NginxConfig(1) virtualenv(1) 加载异常(1) 骨架屏(1) SVN(1) 共享文件夹(1) caddy(1) Postman(1) 横向滚动(1)
You might like
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
浅析python连接数据库的重要事项
2021/02/22 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
Expedia英国：全球最大的在线旅游公司
2017/09/07 全球购物
Lookfantastic西班牙官网：英国知名美妆购物网站
2018/06/13 全球购物
美国演唱会和体育门票购买网站：Ticketnetwork
2018/10/19 全球购物
internal修饰符起什么作用
2013/12/16 面试题
我与祖国共奋进演讲稿
2014/09/13 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
社区工作者个人总结
2015/02/28 职场文书
通知范文怎么写
2015/04/16 职场文书
学生检讨书怎么写
2015/05/07 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis