• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

jquery时间表插件b1njTimeline_js

javascript 搞代码 7年前 (2018-06-13) 173次浏览 已收录 0个评论

jquery时间表插件b1njTimeline

 ;(function ( $, window, undefined ) {      var pluginName = 'b1njTimeline',         document = window.document,         defaults = {             height: 400,             margeTop: 40         };      // Pugin constructor     function Plugin( element, options ) {         this.element = element;         this.$element = null;         this.options = $.extend( {}, defaults, options) ;         this._dateDebut = false;         this._dateFin = false;         this._duree = false;         this._name = pluginName;         this.init();     }      Plugin.prototype.init = function () {         var self = this;          $(this.element).addClass('events').wrap('<div class="b1njTimeline" />');          this.$element = $(this.element).parent();         this.$element.css('height', this.options.height);          // Recherche date la plus ancienne et la plus r茅cente         this._dateDebut = new moment(this.$element.find('li:first time').attr('datetime'), 'YYYY-MM-DD');         this._dateFin = new moment(this.$element.find('li:last time').attr('datetime'), 'YYYY-MM-DD');         this._duree = this._dateFin.diff(this._dateDebut);          // Placement de l'茅venement         this.$element.find('li').each(function () {             $li = $(this);             $li.wrapInner('<div class="event" />');             var date = new moment($li.find('time').attr('datetime'), 'YYYY-MM-DD')             $li.css('top', self._getTop(date));              $li.on('click', function (e) {                 self.open(this);             });         });          // Mise en place des dates gradu茅es         var date = this._dateDebut.year();         var num_years = this._dateFin.diff(this._dateDebut, 'years');          var tranche = 1;         if (num_years > 500) {             tranche = 100;         } else if (num_years > 250) {             tranche = 50;         } else if (num_years > 100) {             tranche = 25;         } else if (num_years > 50) {             tranche = 10;         } else if (num_years > 25) {             tranche = 5;         } else if (num_years > 10) {             tranche = 2;         }         date = date + 1;         while (date % tranche != 0) {             date = date + 1;         }          var html_dates = '<ol class="timeline_dates">';         for (var i = date; i <= this._dateFin.year(); i = i + tranche) {             var top = self._getTop(new moment(i.toString(), 'YYYY'));             html_dates += '<li style="top: ' + top + 'px"><div>' + i + '</div></li>';         }         html_dates += '<ol>';          this.$element.find('ol').after(html_dates);      };      Plugin.prototype._getTop = function (date) {         var top = date.diff(this._dateDebut) * this.options.height / this._duree;         top = Math.abs(parseInt(top));         top = top + this.options.margeTop;         return top;     };      Plugin.prototype.open = function (desc) {         var $evenement2 = $(desc).find('.event');         if ($evenement2.hasClass('open')) {             $evenement2.removeClass('open');         } else {             this.$element.find('.event').removeClass('open');             $evenement2.addClass('open');         }      };      // Adding Plugin to the jQuery.fn object     $.fn[pluginName] = function (options) {         return this.each(function () {             if (!$.data(this, 'plugin_' + pluginName)) {                 $.data(this, 'plugin_' + pluginName, new Plugin( this, options ));             }         });     }; }(jQuery, window));

欢迎大家阅读jquery时间表插件b1njTimeline_js,跪求各位点评,若觉得好的话请收藏本文,by 搞代码


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:jquery时间表插件b1njTimeline_js
喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址