jQuery时间轴/时光轴插件jqtimeline

分类：代码日期：2013-11-29

Facebook 的 Timeline 和 QQ空间的时光轴是很好的应用，它以一条直线的方式记录你的各种使用信息，能让你一目了然的知道你在什么时间干了什么事。如果你想创建类似的效果，jqtimeline 也许是个不错的选择。

jqtimeline 是一个简单的、轻量级的 jQuery 时间轴/时光轴插件，你可以用它来创建社交应用、博客的时间表以及社会岗位时间表等等。jqtimeline 的数据是 json 格式，可以很方便地于其他 jQuery 插件集成，你可以可以自己定义 CSS。

兼容性

jqtimeline 对 IE6 兼容欠佳，其他浏览器正常。

使用方法

引入文件

<link rel="stylesheet" href="css/jquery.jqtimeline.css">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.jqtimeline.js"></script>

HTML

<div id="longTimeLine"></div>

JavaScript

var ev = [{
    id: 1,
    name: "Android 1.0 发布，这是 Android 第一个版本。",
    on: new Date(2008, 9, 23)
},
{
    id: 2,
    name: "Android 1.5 发布，取名 Cupcake（纸杯蛋糕）。",
    on: new Date(2009, 4, 30)
},
{
    id: 3,
    name: "Android 1.6 发布，取名 Donut（甜甜圈），首次支持了 CDMA 网络。",
    on: new Date(2009, 9, 15)
},
{
    id: 4,
    name: "Android 2.0 发布，取名  Eclair（松饼）。",
    on: new Date(2009, 10, 26)
},
{
    id: 6,
    name: "Android 2.2 发布，取名 Froyo（冻酸奶）。",
    on: new Date(2010, 5, 20)
},
{
    id: 7,
    name: "Android 2.3 发布，取名 Gingerbread（姜饼）。",
    on: new Date(2010, 12, 7)
},
{
    id: 8,
    name: "Android 3.0 发布，取名 Honeycomb（蜂巢），专用于平板电脑。",
    on: new Date(2011, 2, 2)
},
{
    id: 9,
    name: "Android 3.1 发布，取名 Honeycomb（蜂巢）。",
    on: new Date(2011, 5, 11)
},
{
    id: 10,
    name: "Android 3.2 发布，取名 Honeycomb（蜂巢）。",
    on: new Date(2011, 7, 13)
},
{
    id: 11,
    name: "Android 4.0 发布，取名 Ice Cream Sandwich（冰激凌三明治）。",
    on: new Date(2011, 10, 19)
},
{
    id: 12,
    name: "Android 4.1 发布，取名 Jelly Bean（果冻豆）。",
    on: new Date(2012, 6, 28)
},
{
    id: 13,
    name: "Android 4.2 发布，取名 Jelly Bean（果冻豆）。",
    on: new Date(2012, 10, 30)
}];
$('#longTimeLine').jqtimeline({
    events: ev,
    numYears: 4,
    startYear: 2008,
    click: function(e, event) {
        loadPage(event);
    }
});

参数

参数	类型	说明	默认值
startYear	整数	开始的年份	[Current Year] – 1
numYears	整数	共显示多年	3
gap	整数	每个时间点之间的距离	25
showToolTip	布尔值	鼠标移到时间点显示提示信息	true
groupEventWithinPx
events	数组	事件对象的数组，显示在时间轴上。不要与 JavaScript 事件混淆	无
click	函数	点击时间点需要执行的函数	无