www.2527.com_澳门新葡8455手机版_新京葡娱乐场网址_
做最好的网站

【Web前端】依照zepto的移位端轻量级日期插件,

2019-07-12 10:21 来源:未知

前言

依照zepto的位移端轻量级日期插件--date_picker,zepto--date_picker

前言

做过活动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情势的模块引用。

意义介绍

一向上图:

Web前端 1

才能细节

transitionEnd事件

插件的主面板是日前月份的天命详细情况,假诺点击前些时间依然下3个月插件要求总计出上个月大概下五个月的流年音信,然后插入到DOM节点中。在插入到DOM节点之后,就供给使用动画效果来显示最新的十11月还要褪去老的三个月,选择的秘诀是CSS2d转化加过渡。大家要求管理的便是在旧的四个月褪去看不见的时候霎时从DOM树中除去,不然假若用户一向点下5个月还是上个月的话,内部存款和储蓄器会炸的。为了完结那么些移除功效,三个办法是使用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属性,在动画达成的时候,你就足以施行相应的操作(删除节点)。
再来看看包容性:

Web前端 2

对于运动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属性并不能够禁止原生键盘弹出的标题。

JQuery日期插件datepicker的应用方法,jquerydatepicker

 JQuery是一款特别美貌的台本框架,其丰硕的控件使用起来也特别轻易,配置极度灵活。上边做贰个行使日期插件datapicker的事例。

1、下载jQuery宗旨文件就绝不说了啊,datepicker是轻量级插件,只需jQuery的min版本就行了,然后到官方网站

2、在HTML中援用下载下来的js文件:

<!-- 引入 jQuery --> 
<mce:script src="js/jquery.1.4.2.js" mce_src="js/jquery-1.5.1.min.js" type="text/javascript"></mce:script> 
<!--添加datepicker支持--> 
<mce:script src="js/jquery.ui.core.js" mce_src="js/jquery.ui.core.js" type="text/javascript"></mce:script> 
<mce:script src="js/jquery.ui.datepicker.js" mce_src="js/jquery.ui.datepicker.js" type="text/javascript"></mce:script> 

3.在HTML中引进暗许样式表文件,这么些文件在ui压缩包中。倘使在官方网址下载,首页就有其一CSS文件下载,也可采取任何皮肤的CSS。

<!--引入样式css--> 
k type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.13.custom.css" mce_href="css/jquery-ui-1.7.3.custom.css" /> 

4.在HTML中插入文本域,最佳设置成只读,不接受用户的手动输入,制止格式混乱,以id标志好。

<input type="text" id="selectDate" readonly="readonly"/> 

5.编写js代码,完毕最后效果。

$(document).ready(function() {   
   $('#selectDate').datepicker();   
 }); 

成效如下图:

Web前端 3

此间只是做了三个最宗旨的日子控件,大家还索要以中文展现,限制日期采取范围等急需,稍微修改js代码:

<mce:script type="text/javascript"><!-- 
  //等待dom元素加载完毕. 
    $(function(){ 
      $("#selectDate").datepicker({//添加日期选择功能 
      numberOfMonths:1,//显示几个月 
      showButtonPanel:true,//是否显示按钮面板 
      dateFormat: 'yy-mm-dd',//日期格式 
      clearText:"清除",//清除日期的按钮名称 
      closeText:"关闭",//关闭选择框的按钮名称 
      yearSuffix: '年', //年的后缀 
      showMonthAfterYear:true,//是否把月放在年的后面 
      defaultDate:'2011-03-10',//默认日期 
      minDate:'2011-03-05',//最小日期 
      maxDate:'2011-03-20',//最大日期 
      monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'], 
      dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], 
      dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], 
      dayNamesMin: ['日','一','二','三','四','五','六'], 
      onSelect: function(selectedDate) {//选择日期后执行的操作 
        alert(selectedDate); 
      } 
      }); 
    }); 

// --></mce:script> 

功效如下:

Web前端 4

此间大概就知足大家应用的急需了。datepicker控件默许是塞尔维亚语的,能够在结构datepicker时通过monthNames、dayNames属性来钦命月、日的华语彰显值,可是每一趟使用是都配备那几个属性不免太费事了,能够追加二个js文件将中文配置都位居个中,每一次使用直接援用就可以,这里坐落jquery.ui.datepicker-zh-CN.js中,内容如下:

jQuery(function($){ 
  $.datepicker.regional['zh-CN'] = { 
    closeText: '关闭', 
    prevText: '<上月', 
    nextText: '下月>', 
    currentText: '今天', 
    monthNames: ['一月','二月','三月','四月','五月','六月', 
    '七月','八月','九月','十月','十一月','十二月'], 
    monthNamesShort: ['一','二','三','四','五','六', 
    '七','八','九','十','十一','十二'], 
    dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], 
    dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], 
    dayNamesMin: ['日','一','二','三','四','五','六'], 
    weekHeader: '周', 
    dateFormat: 'yy-mm-dd', 
    firstDay: 1, 
    isRTL: false, 
    showMonthAfterYear: true, 
    yearSuffix: '年'}; 
  $.datepicker.setDefaults($.datepicker.regional['zh-CN']); 
}); 

6.在页面中引进中文插件

<!-- 添加中文支持--> 
  <mce:script src="js/jquery.ui.datepicker-zh-CN.js" mce_src="js/jquery.ui.datepicker-zh-CN.js" type="text/javascript"></mce:script> 

完全的页面代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
 <HEAD> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <TITLE>日期控件datepicker</TITLE> 

  <!-- 引入 jQuery --> 
  <mce:script src="js/jquery.1.4.2.js" mce_src="js/jquery.1.4.2.js" type="text/javascript"></mce:script> 

  <!--添加datepicker支持--> 
  <mce:script src="js/jquery.ui.core.js" mce_src="js/jquery.ui.core.js" type="text/javascript"></mce:script> 
  <mce:script src="js/jquery.ui.datepicker.js" mce_src="js/jquery.ui.datepicker.js" type="text/javascript"></mce:script> 
  <!-- 或者引入jquery ui包,其中也包含对datepicker的支持 
  <mce:script src="js/jquery-ui-1.7.3.custom.min.js" mce_src="js/jquery-ui-1.7.3.custom.min.js" type="text/javascript"></mce:script> 
  --> 

  <!--引入样式css--> 
  <link type="text/css" rel="stylesheet" href="css/jquery-ui-1.7.3.custom.css" mce_href="css/jquery-ui-1.7.3.custom.css" /> 

  <!-- 添加中文支持--> 
  <mce:script src="js/jquery.ui.datepicker-zh-CN.js" mce_src="js/jquery.ui.datepicker-zh-CN.js" type="text/javascript"></mce:script> 

  <mce:script type="text/javascript"><!-- 
  //等待dom元素加载完毕. 
    $(function(){ 
      $("#selectDate").datepicker({//添加日期选择功能 
      numberOfMonths:1,//显示几个月 
      showButtonPanel:true,//是否显示按钮面板 
      dateFormat: 'yy-mm-dd',//日期格式 
      clearText:"清除",//清除日期的按钮名称 
      closeText:"关闭",//关闭选择框的按钮名称 
      yearSuffix: '年', //年的后缀 
      showMonthAfterYear:true,//是否把月放在年的后面 
      defaultDate:'2011-03-10',//默认日期 
      minDate:'2011-03-05',//最小日期 
      maxDate:'2011-03-20',//最大日期 
      //monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'], 
      //dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], 
      //dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], 
      //dayNamesMin: ['日','一','二','三','四','五','六'], 
      onSelect: function(selectedDate) {//选择日期后执行的操作 
        alert(selectedDate); 
      } 
      }); 
    }); 

// --></mce:script> 
 </HEAD> 
 <BODY> 
 <input type="text" id="selectDate" readonly="readonly"/> 
 </BODY> 
</HTML> 

只顾:由于jquery datepicker首页上ui.core.js和ui.datepicker.js不是风尚版本的,假使下载新本子jquery-ui-1.8.第13中学的css文件会招致日期控件不可能呈现的难题,所以这里运用了1.7.3的ui。简单一点便是用jquery-ui的压缩js。

如上就是本文的全体内容,关于JQuery日期插件datepicker就为我们介绍这么多,希望对大家的学习抱有协助。

做过运动Web开荒的校友都晓得,移动端日期选拔是很布满的急需。在PC端,大家有很充裕的选用,相比有名的就有Mobiscroll和jQuery UI Datepicker。个人看来,这个插件存在的多少个尽人皆知的标题,第一是超重的重视性,对于jQuery的插件,已经强制注重了80多k的巨大,把多数移动端项目拒绝在门外;第二是太过庞大的效果,比比较多插件花十分七的大运去完善插件四成炫目的附加成效,导致代码量变大,配置庞杂。所以一款少注重、轻量级和平运动用简易的移动端日期选择插件是充足须求的。本文简介这几天写的一款基于zepto的活动端轻量级日期插件--date_picker。

您恐怕感兴趣的篇章:

  • jquery完结在页面加载的时自动为日期插件增加当前些天期
  • 移动器材web开垦首推框架:zeptojs介绍
  • zepto.js中tap事件阻止冒泡的兑现格局
  • 听闻zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
  • jQuery插件zepto.js轻便完结tab切换
  • zepto中运用swipe.js制作轮播图附swipeUp,swipeDown不起效果难点
  • Yii2框架援引bootstrap中国和东瀛期插件yii2-date-picker的主意
  • jQuery Mobile开辟中国和扶桑期插件Mobiscroll使用验证
  • JQuery日期插件datepicker的运用办法

前言 做过活动Web开垦的同学都理解,移动端日期选用是很广阔的须求。在PC端,...

您只怕感兴趣的稿子:

  • jquery完毕在页面加载的时自动为日期插件增多当今天子
  • 运动道具web开辟首要推荐框架:zeptojs介绍
  • zepto.js中tap事件阻止冒泡的达成格局
  • 基于zepto.js完毕仿手机QQ空间的大图查看组件ImageView.js详解
  • jQuery插件zepto.js简单完毕tab切换
  • zepto中选择swipe.js制作轮播图附swipeUp,swipeDown不起效果难点
  • Yii2框架引用bootstrap中国和扶桑期插件yii2-date-picker的法子
  • jQuery Mobile开垦中国和日本期插件Mobiscroll使用表明
  • 听大人说zepto的活动端轻量级日期插件--date_picker

JQuery是一款特别不错的本子框架,其充分的控件使用起来也特别轻便,配置特别灵活。上边...

Web前端,插件设计原则

只保留最不能缺少的职能

日子选择插件无非正是能够进行年、月、日选择,而且提供必需的岁月切换动画特效,至于如何最小时间、最大时间、宗旨定制,概不在本插件功能界定。

保留供给的注重

本插件虽说是基于zepto,实际上还隐性正视了Github上边一个相比较牛的库fastclick。大家知道,移动端点击事件管理有四个广泛的标题:(1)移动端click事件有300ms,常常采用touch事件来替代click事件来增加灵敏性;(2)touch事件会存在穿透的标题,一般插件都休想touch事件;基于这五个难点,fastclick做了合作,只要求轻松调用它提供的api就可知欢快得和原先一样调用click事件,所以那几个依赖无法省。至于注重zepto,实际上是可有可无的,一来博主平时做事都以写原生js的,不用插件也没多大的认为,二来插件受众面就能小一些。可是鉴于zepto在移动端已然和zepto在PC端同样如虎傅翼,就不要客气选拔了。

不只能够帮助模块化又能本地引用文件使用的

时期久远一点的插件基本都以令你下载四个文件,然后用script去援用,那样本未有可过分指斥,只可是放着最大的包管理器npm不用,岂不是对不起页面仔那一个称呼。所以本插件帮衬文件引用也支撑CMD格局的模块引用。

作用介绍

直白上航海用教室:

Web前端 5

技巧细节

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属性,在动画达成的时候,你就能够举办相应的操作(删除节点)。
再来看看包容性:

Web前端 6

对此运动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属性并无法禁止原生键盘弹出的标题。

你或者感兴趣的篇章:

  • zepto.js中tap事件阻止冒泡的兑现方式
  • zepto中接纳swipe.js制作轮播图附swipeUp,swipeDown不起效果难点
  • zepto与jquery的分别及zepto的不等应用8条小结
  • 依赖zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
  • 听大人讲zepto.js轻巧实现上传图片
  • 一举手一投足端翻页插件dropload.js(援救Zepto和jQuery)
  • jQuery插件zepto.js轻松落成tab切换
  • Zepto完结密码的藏匿/显示
TAG标签:
版权声明:本文由澳门新葡8455手机版发布于Web前端,转载请注明出处:【Web前端】依照zepto的移位端轻量级日期插件,