基于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 相关文章推荐
Aptana调试javascript图解教程
Nov 30 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
详解JS模块导入导出
Dec 20 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
CURL状态码列表(详细)
2013/06/27 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
php实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
PHP反射学习入门示例
2019/06/14 PHP
js以对象为索引的关联数组
2010/07/04 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
用Python编写web API的教程
2015/04/30 Python
基于Python log 的正确打开方式
2018/04/28 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
python 实现多维数组(array)排序
2020/02/28 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
中软国际Java程序员机试题
2012/08/19 面试题
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
护士实习生自我鉴定范文
2013/12/10 职场文书
师范类求职信
2014/06/21 职场文书
工作失误检讨书
2015/01/26 职场文书
圣诞节开幕词
2015/01/29 职场文书
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技