分享一個基於事件時間線的Javascript類庫-Chronoline

日期：2012-6-12  來源：GBin1.com

在線演示  本地下載

Chronoline.js是一個javascript的類庫用來幫助開發者建立一個按時間來展現的時間線。

整個時間線水平方向顯示，咱們能夠方便的顯示任什麼時候間長度的事件，而且提供一個tooltip來展現事件詳細內容。

主要特性

須要類庫：

• raphael.js: 2.1.0
• jQuery: 1.7.2
• qTip2: 04/24/12 nightly

支持瀏覽器：

• Internet Explorer 8+ (except the tooltips)
• Firefox 12+
• Chrome 18+

整個類庫支持拖放，支持屏幕橫向滾動。

如何使用

倒入類庫：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="chronoline/jquery.qtip.min.css" />
<script type="text/javascript" src="chronoline/jquery.qtip.min.js"></script>
<script type="text/javascript" src="chronoline/raphael-min.js"></script>
<link rel="stylesheet" type="text/css" href="chronoline/chronoline.css" />
<script type="text/javascript" src="chronoline/chronoline.js"></script>

實例一個時間線：

var timeline1 = new Chronoline(document.getElementById("target1"), events,
{animated: true,
 tooltips: true,
 defaultStartDate: new Date(2012, 3, 5),
 sections: sections,
 sectionLabelAttrs: {'fill': '#997e3d', 'font-weight': 'bold'},
});

若是你須要使用時間軸方式來展現你的事件，Chronoline.js是一個不錯的選擇，但願你們喜歡！若是你有任何問題，請給咱們留言！

 

來源：分享一個基於事件時間線的Javascript類庫-Chronoline