Simonehtml+css3+jquery时间表插件
的有关信息介绍如下：
html+css3+jquery时间表插件
新建html文档。
书写hmtl代码。
111111111111111111111111
111111111111111111111111
111111111111111111111111
111111111111111111111111
111111111111111111111111
111111111111111111111111
111111111111111111111111
111111111111111111111111
111111111111111111111111
111111111111111111111111
十一月 1949
111111111111111111111111
1111111111111111111111111111
书写css代码。
添加引用js。
书写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+='
- '+i+""}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));
代码整体结构
查看效果
