首页
所有分类
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 相关文章推荐
js表数据排序 sort table data
Feb 18 Javascript
JS 实现完美include载入实现代码
Aug 05 Javascript
使用jQuery模板来展现json数据的代码
Oct 22 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
js给table赋值的实例代码
Oct 13 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
浅谈Web Storage API的使用
Jun 23 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
pdfkit(1) 微信小程序(9) matplotlib(7) vue-esign(1) 蒙特卡罗(1) bufio(1) 可视化动图(1) ipyvizzu(1) Pillow(2) 条形图(1)
You might like
在php中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
奇怪的PHP引用效率问题分析
2012/03/23 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
ie 调试javascript的工具
2009/04/29 Javascript
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
Linux下编译安装MySQL-Python教程
2015/02/02 Python
老生常谈python中的重载
2018/11/11 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
中国高端家电购物商城：顺电
2018/03/04 全球购物
Camille Jewelry官网：现代女性时尚首饰
2019/07/07 全球购物
意大利体育用品和运动服网上商店：Maxi Sport
2019/09/14 全球购物
前台文员职责范本
2014/03/07 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
工作失职造成投诉的检讨书范文
2014/10/05 职场文书
环保宣传语大全
2015/07/13 职场文书