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

控件代码 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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css实现一款漂亮的查询框

    上面展示的是实现后的效果,实现的主要在css控制,再次,添加了text的获得焦点和失去焦点的事件,下面是详细代码:

    lzugis
  • Javascript+CSS实现影像卷帘效果

    用过Arcgis的筒子们对于Arcmap里面的一个卷帘效果肯定记忆很深刻,想把它搬到自己的WebGIS系统中去,抱着同样的想法,我也对这种比较炫的卷帘效果做了一...

    lzugis
  • 纯CSS实现小三角提示信息

    lzugis
  • FF下修改美化文件域(input type=file)的样式

    有兄弟问我修改美化文件域(input type=file)在FF下的样式,暂时没看兼容.也没美化.等到了上海安定好了再好好修改下 <!DOCTYPE html ...

    练小习
  • WordPress免插件仅代码实现“返回顶部、返回底部、评论”效果(样式一)

    本文所说的”返回顶部、返回底部、评论 “相信你知道是什么东东了吧?  一般你在各大网站的右下角都能看到类似的东东,但许多网站都普遍只有“返回顶部”的效果。不过就...

    Jeff
  • wordpress后台登录界面美化

    @font-face { font-family:fzz; src: url('https://img.zmki.cn/ttf/fzz.ttf'); } ...

    AlexTao
  • 3D盒子动画

    ---------------------------------------------------------

    py3study
  • Hexo 博客美化代码块

    最近有人问我博客的代码块是怎么做的,如下面的代码块,然后好久没有写文章了,趁着周末有时间就水一篇吧~

    ihoey
  • IOS下box-shadow的诡异bug的修复

    先说环境,我测试了两台IOS手机,iphone 8 ios 11.4.1 和 iphone 6s plus ios 11.4.1,都存在这个诡异的bug。

    用户1515472
  • CSS3绘图实战-Nut团队标志

    css每一代都会有革命性的更新,尽管目前还有一部分浏览器没有支持CSS3,就算支持也是部分支持。但是她那强大的能力依然还是让我兴奋,一些早期不敢想象的东西,如今...

    练小习

扫码关注云+社区

领取腾讯云代金券