首页
所有分类
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 相关文章推荐
设置下载不需要倒计时cookie(倒计时代码)
Nov 19 Javascript
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
利用jquery操作select下拉列表框的代码
Jun 04 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
JavaScript获取页面中表单（form）数量的方法
Apr 03 Javascript
JavaScript程序设计之JS调试
Dec 09 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
js实现按座位号抽奖
Apr 05 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
基于vue 实现token验证的实例代码
Dec 14 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
城市猎人(1) 西索(1) 波段(1) 申请书(21) Docker(14) 文书(291) HAM-2000(1) AngularJS(2) 观后感(479) explain(2)
You might like
收集的PHP中与数组相关的函数
2007/03/22 PHP
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
php验证码生成代码
2015/11/11 PHP
详解php比较操作符的安全问题
2015/12/03 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
jquery 日期分离成年月日的代码
2010/05/14 Javascript
IE无法设置短域名下Cookie
2010/09/23 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
前端学习笔记style，currentStyle，getComputedStyle的用法与区别
2016/05/28 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
python关键字and和or用法实例
2015/05/28 Python
Python中一行和多行import模块问题
2018/04/01 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
正宗的日本零食和糖果订阅盒：Bokksu
2019/11/21 全球购物
英国网上超市：Ocado
2020/03/05 全球购物
网络体系结构及协议的定义
2014/03/13 面试题
口腔医学技术应届生求职信
2013/11/09 职场文书
优秀教师先进事迹
2014/01/22 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
我的老师教学反思
2014/05/01 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
研讨会通知
2015/04/27 职场文书
竞聘演讲报告：基本写作有哪些？附开头范文
2019/10/16 职场文书
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle