代码
样式文件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 = $("<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://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>
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/8626.html