jQuery时间轴/时光轴插件jqtimeline
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 | 函数 | 点击时间点需要执行的函数 | 无 |
标签:jQuery插件