登录/注册

jQuery时间轴/时光轴插件jqtimeline

分类:代码 日期:

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 函数 点击时间点需要执行的函数
标签:
查看演示

下载本素材需消耗 50 积分

无法下载?立即反馈