基于zepto的移动端轻量级日期插件--date_picker


Posted in Javascript onMarch 04, 2016

前言

做过移动Web开发的同学都知道,移动端日期选择是很常见的需求。在PC端,我们有很丰富的选择,比较出名的就有Mobiscroll和jQuery UI Datepicker。个人看来,这些插件存在的两个显而易见的问题,第一是过重的依赖,对于jQuery的插件,已经强制依赖了80多k的庞然大物,把很多移动端项目拒之门外;第二是太过强大的功能,很多插件花百分之八十的时间去完善插件百分之二十炫酷的额外功能,导致代码量变大,配置繁杂。所以一款少依赖、轻量级和使用简单的移动端日期选择插件是非常必要的。本文简单介绍近来写的一款基于zepto的移动端轻量级日期插件--date_picker。

插件设计原则

只保留最必要的功能

日期选择插件无非就是可以进行年、月、日选择,并且提供必要的年月切换动画特效,至于什么最小时间、最大时间、主题定制,概不在本插件功能范围。

保留必要的依赖

本插件虽说是基于zepto,实际上还隐性依赖了Github上面一个比较牛的库fastclick。我们知道,移动端点击事件处理有两个常见的问题:(1)移动端click事件有300ms,通常采用touch事件来代替click事件来提高灵敏性;(2)touch事件会存在穿透的问题,一般插件都不用touch事件;基于这两个问题,fastclick做了兼容,只需要简单调用它提供的api就能够愉快得和原本一样调用click事件,所以这个依赖不能省。至于依赖zepto,实际上是可有可无的,一来博主平时工作都是写原生js的,不用插件也没多大的感觉,二来插件受众面就会小一些。不过鉴于zepto在移动端已然和zepto在PC端一样如鱼得水,就毫不客气采用了。

既能够支持模块化又能本地引用文件使用的

久远一点的插件基本都是让你下载一个文件,然后用script去引用,这样本无可厚非,只不过放着最大的包管理器npm不用,岂不是对不起页面仔这个称号。所以本插件支持文件引用也支持CMD方式的模块引用。

功能介绍

直接上图:

基于zepto的移动端轻量级日期插件--date_picker

技术细节

transitionEnd事件

插件的主面板是当前月份的天数详情,如果点击上一个月或者下一个月插件需要计算出上一个月或者下一个月的天数信息,然后插入到DOM节点中。在插入到DOM节点之后,就需要采用动画效果来显示最新的一月并且褪去老的一个月,采用的方式是CSS2d转化加过渡。我们需要处理的就是在旧的一个月褪去看不见的时候及时从DOM树中删除,不然如果用户一直点下一个月或者上一个月的话,内存会炸的。为了实现这个移除功能,一个办法是采用setTimeout事件在特定的时间去删除节点,经过尝试,发现由于Javascript定时器不准确的特性和前后一个月切换带来的逻辑复杂度增加,这种方案很不可行。
于是,本插件采用了第二个方案:transitionEnd事件。直接引用一下MDN的介绍:

The transitionend event is fired when a CSS transition has completed. In the case where a transition is removed before completion, such as if the transition-property is removed, then the event will not fire. The event will also not fire if the animated element becomes display: none before the transition fully completes.

也就是只要你不去随便乱动元素的CSS属性,在动画完成的时候,你就可以执行相应的操作(删除节点)。
再来看看兼容性:

基于zepto的移动端轻量级日期插件--date_picker

对于移动Web开发足矣!

最后就是在绑定事件的兼容性问题,不同厂商对于这个事件的定义并不一致,比如IOS里面监听的是transitionend事件,但是在安卓里面监听transitionend事件完全没反应,经过一番Google,发现安卓需要监听webkitTransitionEnd事件。为了解决绑定事件时候的兼容性问题,就需要检测浏览器到底支持哪种事件。下面贴上Stackoverflow上面一个问答的代码片段:

function whichTransitionEvent() {
  var t,
   el = document.createElement('fakeelement');
   transitions = {
    'OTransition'  :'oTransitionEnd',
    'MSTransition'  :'msTransitionEnd',
    'MozTransition'  :'transitionend',
    'WebkitTransition' :'webkitTransitionEnd',
    'transition'   :'transitionEnd'
   };

  for(t in transitions){
   if( el.style[t] !== undefined ){
    return transitions[t];
   }
  }

  return false;
 }

安装使用

安装

支持下面两种方式

  1. git clone之后直接拷贝引用bin文件夹下面的datepicker.min.css和datepicker.min.js
  2. 从npm下载安装:npm install --save date_picker

使用

引用样式datepicker.min.css
引用datepicker.min.js或者引用模块var DatePicker = require('date_picker');
实例化组件,绑定插件日期选择完成之后的回调函数

var _date = document.getElementById('date');

 var datePicker = new DatePicker({
  confirmCbk: function(data) {
   _date.value = data.year + '-' + data.month + '-' + data.day;
  }
 });

 _date.onfocus = function(e) {
  _date.blur();
  datePicker.open();
 };

插件外置两个API: open和close,其中特别注意上面demo中_date在获取焦点之后里面强制去除了焦点,是为了避免安卓下面为input标签设置readonly属性并不能禁止原生键盘弹出的问题。

Javascript 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
学习ExtJS accordion布局
Oct 08 Javascript
javascript入门基础之私有变量
Feb 23 Javascript
通过判断JavaScript的版本实现执行不同的代码
May 11 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 #Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 #Javascript
js实现文字滚动效果
Mar 03 #Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 #Javascript
JQuery日期插件datepicker的使用方法
Mar 03 #Javascript
jQuery日历插件datepicker用法详解
Mar 03 #Javascript
初步使用Node连接Mysql数据库
Mar 03 #Javascript
You might like
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
javascript 限制输入脚本大全
2009/11/03 Javascript
JS 对象介绍
2010/01/20 Javascript
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
Python下singleton模式的实现方法
2014/07/16 Python
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
如何用Python合并lmdb文件
2018/07/02 Python
Python提取频域特征知识点浅析
2019/03/04 Python
Django接收自定义http header过程详解
2019/08/23 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
深入分析python 排序
2020/08/24 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
运动会致辞稿50字
2014/02/04 职场文书
活动策划邀请函
2014/02/06 职场文书
优秀医生事迹材料
2014/02/12 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
简历里的自我评价范文
2014/02/24 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
三八节活动主持词
2015/07/04 职场文书
php去除数组中为0的元素的实例分析
2021/11/17 PHP