基于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 相关文章推荐
js工具方法弹出蒙版
May 08 Javascript
js遍历子节点子元素附属性及方法
Aug 19 Javascript
浅谈javascript中for in 和 for each in的区别
Apr 23 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 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
在服务端进行目录建立、删除,文件上传、删除的过程的php代码
2008/09/10 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
JMenuTab简单使用说明
2008/03/13 Javascript
11款基于Javascript的文件管理器
2009/10/25 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Python实现一个简单的验证码程序
2017/11/03 Python
python Web开发你要理解的WSGI & uwsgi详解
2018/08/01 Python
Python中的 enum 模块源码详析
2019/01/09 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
基于Django实现日志记录报错信息
2019/12/17 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
python爬虫可以爬什么
2020/06/16 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
人力资源管理毕业求职信
2014/08/05 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python