时间轴插件

示例

demo


使用方法

  • 引用css文件timeline-main.css
<link rel="stylesheet" type="text/css" href="css/timeline-main.css">
  • 引入js文件jquery-1.11.1.jstimeline.js
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/timeline.js"></script>
  • 创建一个id = "timeline"div元素。
<div id="timeline"></div>
  • javascript代码,根据自己的需求初始化时间轴插件。
$("#timeline").timeline('init', {
    width:1037, // 插件的对外总体宽度
    height:69, // 插件的对外总体高度
    daysNo : 15, // 插件时间的天数,默认值15
    callback : function(){ // 时间轴的回调函数,时间轴上的值每改变一次触发的函数
        var content = $("#timeline").data().timeline.timelineOutDate; // `timelineOutDate`见下文解释
        $("#myInput").html(content);
    }
});

you can change the parameters within the 'init', {width : xxx, height : xxx, ...}

  • javascript代码,画出时间轴并且绑定事件
$("#timeline").timeline('draw'); // 插件对外的接口函数,画出时间轴主体
$("#timeline").timeline('bindClickEvent'); // 为各个按钮绑定事件

可以调用的公共函数

  • init : 根据用户提供的参数对时间轴进行初始化操作。各项默认值如下:
属性名称 属性默认值 含义
width 1037 插件对外总宽度
height 69 插件对外总高度
daysNo 15 天数
shiftTime 15000(ms) 滑条从左端滑动到右端时间
callback function(){} 时间轴每改变一次,所要回调执行的函数
  • destroy : 销毁所有挂载在时间轴div上的数据。
  • draw : 根据参数要求画出符合要求的时间轴。
  • save : 时间轴每改变一次,都会记录下一个时间以供后用,这个时间值记录在$("#timeline").data().timeline.timelineOutDate,如果需要调用,那么只需在此读取数据即可。而save函数则是负责将时间数据保存下来。

    timelineOutDate的格式:Sat Dec 13 2014 00:17:04 GMT+0800 (CST)

  • bindClickEvent : 把时间轴上的各项元素和相应事件进行绑定。


下一篇博客,我将讲解我的程序源码