基于zepto的移动端轻量级日期插件
2016-03-04 11:03
323 查看
前言
做过移动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方式的模块引用。
功能介绍
直接上图:![](https://oscdn.geek-share.com/Uploads/Images/Content/202005/09/534f200576f3a3b10f67eb88357a5a40.jpg)
技术细节
transitionEnd事件
插件的主面板是当前月份的天数详情,如果点击上一个月或者
下一个月插件需要计算出上一个月或者下一个月的天数信息,然后插入到DOM节点中。在插入到DOM节点之后,就需要采用动画效果来显示最新的一月并且褪去老的一个月,采用的方式是CSS
2d转化加
过渡。我们需要处理的就是在旧的一个月褪去看不见的时候及时从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属性,在动画完成的时候,你就可以执行相应的操作(删除节点)。
再来看看兼容性:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202005/09/6412534ca516ab0eea218189db1c887f.jpg)
对于移动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; }
安装使用
安装
支持下面两种方式git clone之后直接拷贝引用bin文件夹下面的
datepicker.min.css和
datepicker.min.js
从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属性并不能禁止原生键盘弹出的问题。
在线Demo
点击链接在PC上查看效果或者手机扫码可直接在手机上查看效果:![](https://oscdn.geek-share.com/Uploads/Images/Content/202005/09/baff5dba58e047d60fc99108be18171d.jpg)
小结
本插件代码托管在Github上面,仓库地址为:https://github.com/yuanzm/simple-date-pickernpm上面的仓库地址为:https://www.npmjs.com/package/date_picker
最后打个小广告,欢迎follow我的github: https://github.com/yuanzm
参考资料
http://stackoverflow.com/questions/13823188/android-4-1-change-transition-and-webkittransition-defiend-how-to-properly-de相关文章推荐
- 关于android:configChanges的属性
- adb或appium下多设备中指定设备的启动
- Android开发之蓝牙详解(二)
- Android兼容包Support v4.v7.v13区别与应用场景
- android 比较靠谱的图片压缩
- AndroidStudio怎样导入jar包
- //画虚线
- ios 纯代码屏幕适配
- iOS代理实现tableViewCell中的button在viewController中响应
- Android - 文件读写操作 总结
- android的数据存储方式------5种
- cocospod 安装和使用
- iOS开发 判断输入语言是否是汉语
- 打包遇到错误:missing ios distribution signing identity for XXXXXXXXXX
- ios对js的on绑定事件不生效
- 如何高效率开发android App
- SPRING IN ACTION 第4版笔记-第五章Building Spring web applications-001-SpringMVC介绍
- swift学习笔记-----swift中的指针
- Android,Touch事件分发机制。
- Android Studio ndk-Jni开发详解