jquery实现的时间轴

样式文件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;  
    }

.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 = $("<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);

(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);

调用实现

 <!DOCTYPE html>  
    <html>  
    <head lang="en">  
        <meta charset="UTF-8">  
        <title></title>  
        <link rel="stylesheet" href="style.css" type="text/css">  
        <script src="http://gaodaima/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>

<!DOCTYPE html>

<html>

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>

</body>

</html>

原创文章，转载请注明： 转载自搞代码

本文链接地址: jquery实现的时间轴

分享到： QQ好友微信 QQ空间新浪微博印象笔记轻笔记有道云笔记

微信赏一包辣条吧~

支付宝赏一听可乐吧~

0条评论

搞代码

jquery实现的时间轴

评论

发表评论取消回复

mysql增多新分区报错，提示value must be strictly increasing for each partition

CSS圆角卡片样式-CSS应用实例

MySql用哪种格式存储图片的？该怎么处理

css : CSS简析_css

如何设置文本的上外边距-CSS外边距margin实例

基于Java开发的开源《殖民霸业》开源复刻版-FreeCol软件及源码免费下载

开源压力测试工具 Apache JMeter 5.3软件及源码免费下载

开源视频会议系统OpenMeetings软件带源码免费下载

开源字幕编辑器v7.0.3版本Jubler免费下载

开源全文搜索服务器Solr免费下载

发表评论 取消回复

发表评论取消回复