jquery封装的时间轴

最新推荐文章于 2025-09-09 12:51:58 发布

转载最新推荐文章于 2025-09-09 12:51:58 发布 · 1k 阅读

WEB前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个用于在网页上以时间线形式展示从2011年至2013年间关键事件的自定义控件。该控件通过JavaScript实现，并使用CSS进行样式设计，提供了垂直和水平两种布局方式，允许用户点击时间点进行交互。通过实例演示了如何使用提供的jQuery插件和HTML结构来快速创建时间线展示。

效果

代码

样式文件style.css

[css]view plaincopyprint? 
   
 .timeline{  
     position: absolute;  
     z-index: 5000;  
     font-size: 12px;  
     border: 1px solid #ccc;  
     background: whitesmoke;  
     background: -webkit-linear-gradient(top, whitesmoke, #ddd);  
     background: -ms-linear-gradient(top, whitesmoke, #ddd);  
     background: -moz-linear-gradient(top, whitesmoke, #ddd);  
     border-radius: 4px 0 4px 0;  
     box-shadow: 0px 0px 10px rgba(150,150,150,0.5);  
 }  
 .timeline ul.ulvec{  
     margin-left: 10px;  
     list-style: none;  
     background: url("dot.gif") 0px 0px repeat-y;  
     padding-right: 10px;  
 }  
 .timeline ul li.livec{  
     margin-left: -43px;  
     padding: 0px 0px 0px 12px;  
     background: url("biggerdot.png") 0px 50% no-repeat;  
     cursor: pointer;  
 }  
 .timeline ul.ulhor{  
     margin: 0px;  
     padding: 5px 10px;  
     list-style: none;  
     background: url("dot.gif") 0px 5px repeat-x;  
 }  
 .timeline ul li.lihor{  
     display: inline-block;  
     margin: 0px;  
     padding: 10px 0px 0px 0px;  
     margin-top: -3px;  
     background: url("biggerdot.png") 50% 0px no-repeat;  
     cursor: pointer;  
 }  
 .timeline ul li span{  
     display: block;  
     padding: 4px 15px;  
     border: 1px solid transparent;  
 }  
 .timeline ul li.active span{  
     color: #f2f2f2;  
     box-shadow: inset 0px 0px 30px #333333;  
     border-radius: 4px;  
     border: 1px solid #ffffff;  
     background: #666;  
 }  

控件代码 jquery.custom.timeline.js

[javascript]view plaincopyprint? 
   
 (function($){  
     $.fn.TimeLine = function(options){  
         var defaults = {  
             data:null,  
             vertical:false  
         };  
   
         var options = $.extend(defaults,options);  
         var _data = options.data;  
         var _vertical = options.vertical;  
         var _showDiv = $(this).addClass("timeline");  
         var _ul = $("<ul />").appendTo(_showDiv);  
         if(_vertical){  
             _ul.addClass("ulvec");  
         }  
         else{  
             _ul.addClass("ulhor");  
         }  
         for(var i= 0,dl=_data.length;i<dl;i++){  
             var _li = $("<li />").appendTo(_ul);  
             if(_vertical){  
                 _li.addClass("livec");  
             }  
             else{  
                 _li.addClass("lihor");  
             }  
             var _span = $("<span />").attr("value",_data[i].value).html(_data[i].label).appendTo(_li);  
             _span.on("click",function(){  
                 var _value = this.getAttribute("value");  
                 active(_value);  
             });  
         }  
         function active(value){  
             $("li").removeClass("active");  
             var _spans = $("ul").find("span");  
             for(var i= 0,dl=_spans.length;i<dl;i++){  
                 var _span = _spans[i];  
                 if(_span.getAttribute("value")===value){  
                     var _li = $(_span.parentNode);  
                     _li.addClass("active");  
                 }  
             }  
         }  
         this.active = active;  
         return this;  
     }  
 })(jQuery);  

调用实现

[html]view plaincopyprint? 
   
 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
     <meta charset="UTF-8">  
     <title></title>  
     <link rel="stylesheet" href="style.css" type="text/css">  
     <script src="http://localhost/jquery/jquery-1.8.3.js"></script>  
     <script src="jquery.custom.timeline.js"></script>  
     <script>  
         var data = [{"label":"2011年","value":"2011"},  
             {"label":"2012年","value":"2012"},  
             {"label":"2013年","value":"2013"}  
         ];  
         $(function(){  
             var timelinehor = $("#timelinehor").TimeLine({  
                 data:data,  
                 vertical:false  
             });  
             timelinehor.active(data[0].value);  
             var timelinevec = $("#timelinevec").TimeLine({  
                 data:data,  
                 vertical:true  
             });  
             timelinevec.active(data[0].value);  
         });  
     </script>  
 </head>  
 <body>  
 <div id="timelinehor"></div><br><br><br>  
 <div id="timelinevec"></div>  
 </body>  
 </html>  

效果

代码

样式文件style.css

[css]view plaincopyprint? 
    
 .timeline{  
     position: absolute;  
     z-index: 5000;  
     font-size: 12px;  
     border: 1px solid #ccc;  
     background: whitesmoke;  
     background: -webkit-linear-gradient(top, whitesmoke, #ddd);  
     background: -ms-linear-gradient(top, whitesmoke, #ddd);  
     background: -moz-linear-gradient(top, whitesmoke, #ddd);  
     border-radius: 4px 0 4px 0;  
     box-shadow: 0px 0px 10px rgba(150,150,150,0.5);  
 }  
 .timeline ul.ulvec{  
     margin-left: 10px;  
     list-style: none;  
     background: url("dot.gif") 0px 0px repeat-y;  
     padding-right: 10px;  
 }  
 .timeline ul li.livec{  
     margin-left: -43px;  
     padding: 0px 0px 0px 12px;  
     background: url("biggerdot.png") 0px 50% no-repeat;  
     cursor: pointer;  
 }  
 .timeline ul.ulhor{  
     margin: 0px;  
     padding: 5px 10px;  
     list-style: none;  
     background: url("dot.gif") 0px 5px repeat-x;  
 }  
 .timeline ul li.lihor{  
     display: inline-block;  
     margin: 0px;  
     padding: 10px 0px 0px 0px;  
     margin-top: -3px;  
     background: url("biggerdot.png") 50% 0px no-repeat;  
     cursor: pointer;  
 }  
 .timeline ul li span{  
     display: block;  
     padding: 4px 15px;  
     border: 1px solid transparent;  
 }  
 .timeline ul li.active span{  
     color: #f2f2f2;  
     box-shadow: inset 0px 0px 30px #333333;  
     border-radius: 4px;  
     border: 1px solid #ffffff;  
     background: #666;  
 }  

控件代码 jquery.custom.timeline.js

[javascript]view plaincopyprint? 
    
 (function($){  
     $.fn.TimeLine = function(options){  
         var defaults = {  
             data:null,  
             vertical:false  
         };  
   
         var options = $.extend(defaults,options);  
         var _data = options.data;  
         var _vertical = options.vertical;  
         var _showDiv = $(this).addClass("timeline");  
         var _ul = $("<ul />").appendTo(_showDiv);  
         if(_vertical){  
             _ul.addClass("ulvec");  
         }  
         else{  
             _ul.addClass("ulhor");  
         }  
         for(var i= 0,dl=_data.length;i<dl;i++){  
             var _li = $("<li />").appendTo(_ul);  
             if(_vertical){  
                 _li.addClass("livec");  
             }  
             else{  
                 _li.addClass("lihor");  
             }  
             var _span = $("<span />").attr("value",_data[i].value).html(_data[i].label).appendTo(_li);  
             _span.on("click",function(){  
                 var _value = this.getAttribute("value");  
                 active(_value);  
             });  
         }  
         function active(value){  
             $("li").removeClass("active");  
             var _spans = $("ul").find("span");  
             for(var i= 0,dl=_spans.length;i<dl;i++){  
                 var _span = _spans[i];  
                 if(_span.getAttribute("value")===value){  
                     var _li = $(_span.parentNode);  
                     _li.addClass("active");  
                 }  
             }  
         }  
         this.active = active;  
         return this;  
     }  
 })(jQuery);  

调用实现

[html]view plaincopyprint? 
    
 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
     <meta charset="UTF-8">  
     <title></title>  
     <link rel="stylesheet" href="style.css" type="text/css">  
     <script src="http://localhost/jquery/jquery-1.8.3.js"></script>  
     <script src="jquery.custom.timeline.js"></script>  
     <script>  
         var data = [{"label":"2011年","value":"2011"},  
             {"label":"2012年","value":"2012"},  
             {"label":"2013年","value":"2013"}  
         ];  
         $(function(){  
             var timelinehor = $("#timelinehor").TimeLine({  
                 data:data,  
                 vertical:false  
             });  
             timelinehor.active(data[0].value);  
             var timelinevec = $("#timelinevec").TimeLine({  
                 data:data,  
                 vertical:true  
             });  
             timelinevec.active(data[0].value);  
         });  
     </script>  
 </head>  
 <body>  
 <div id="timelinehor"></div><br><br><br>  
 <div id="timelinevec"></div>  
 </body>  
 </html>  