多语言展示
当前在线:423今日阅读:117今日分享:28

html+css3+jquery时间表插件

html+css3+jquery时间表插件
工具/原料

adobe dreamweaver

方法/步骤
1

新建html文档。

2

书写hmtl代码。

 
     
  1.       

    111111111111111111111111

     
  2.  
  3.       

    111111111111111111111111

     
  4.  
  5.       

    111111111111111111111111

     
  6.  
  7.       

    111111111111111111111111

     
  8.  
  9.       

    111111111111111111111111

     
  10.  
  11.       

    111111111111111111111111

     
  12.  
  13.       

    111111111111111111111111

     
  14.  
  15.       

    111111111111111111111111

     
  16.  
  17.       

    111111111111111111111111

     
  18.  
  19.       

    111111111111111111111111

     
  20.  
 

十一月 1949

 
     
  1.       

    111111111111111111111111

     
  2.  
  3.       

    1111111111111111111111111111

     
  4.  

3

书写css代码。

4

添加引用js。   

5

书写jquery.b1njTimeline.js。(function($,window,undefined){var pluginName='b1njTimeline',document=window.document,defaults={height:400,margeTop:40};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('

');this.$element=$(this.element).parent();this.$element.css('height',this.options.height);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);this.$element.find('li').each(function(){$li=$(this);$li.wrapInner('
');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)})});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='
    ';for(var i=date;i<=this._dateFin.year();i=i+tranche){var top=self._getTop(new moment(i.toString(),'YYYY'));html_dates+='
  1. '+i+'
  2. '}html_dates+='
      ';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')}};$.fn[pluginName]=function(options){return this.each(function(){if(!$.data(this,'plugin_'+pluginName)){$.data(this,'plugin_'+pluginName,new Plugin(this,options))}})}}(jQuery,window));

6

代码整体结构

7

查看效果

注意事项
1

moment.min.js是个js包,可以网上下载。

2

jquery-1.8.0.min.js是个js包,可以网上下载。