当前位置:首页 ? HTML/CSS

jquery实现的时间轴

2018-11-23 06:01 本站整理 浏览(38)

代码

样式文件style.css

    .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
    (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 = $("
    ").appendTo(_showDiv); if(_vertical){ _ul.addClass("ulvec"); } else{ _ul.addClass("ulhor"); } for(var i= 0,dl=_data.length;i
  • ").appendTo(_ul); if(_vertical){ _li.addClass("livec"); } else{ _li.addClass("lihor"); } var _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

    调用实现