jquery encapsulated Timeline

Overview

Many times, will use similar to the time axis of things, in view of the network resources are not so handy, think of their own, this will be the source paste out.

Effect

Code

Style file 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;}

Control Code 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);

Call implementation

<! DOCTYPE html>




jquery encapsulated Timeline