基于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 相关文章推荐
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
javascript生成json数据简单示例分享
Feb 14 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
JavaScript中函数(Function)的apply与call理解
Jul 08 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
JS实现纵向轮播图(初级版)
Jan 18 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缓存设计实现代码
2011/09/30 PHP
php登陆页的密码处理方式分享
2013/10/14 PHP
php检测文件编码的方法示例
2014/04/25 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
python实现彩色图转换成灰度图
2019/01/15 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
WxPython实现无边框界面
2019/11/18 Python
pytorch 求网络模型参数实例
2019/12/30 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
用Python进行websocket接口测试
2020/10/16 Python
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
个人素质的自我评价分享
2013/12/16 职场文书
绿色环保标语
2014/06/12 职场文书
精神文明建设标语
2014/06/16 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
好好学习保证书
2015/02/26 职场文书
小孩不笨观后感
2015/06/03 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
为Java项目添加Redis缓存的方法
2021/05/18 Redis