Timeglider JS 實際執行畫面

Timeglider JS 是一個數據驅動的時間軸撥放套件，平移部件用JavaScript編寫的。這個小工具的核心是我們的時間，我們的創作和出版應用程序，並可以集成到任何HTML的應用環境。時間表可以進行放大，縮小，拖動垂直滾動條在正確的：放大（更短的時間內所示），向下縮小（更多的時間顯示）。鼠標滾輪也可以作為變焦控制器。

使用方法：
第一步 先載入程式所需要的檔案
//載入 jQuery UI 的CSS 樣式檔案
<link rel="stylesheet" href="css-folder/aristo/jquery-ui-1.8.5.custom.css" type="text/css" media="screen" title="no title" charset="utf-8">
//載入 Timeglider JS CSS 樣式檔案
<link rel="stylesheet" href="timeglider/Timeglider.css" type="text/css" media="screen" title="no title" charset="utf-8">
//使用Google ajax API 直接連結 jQuery 1.8.2的min版本
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
//使用Google ajax API 直接連結 jQuery UI 1.9.1的min版本
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
//載入其他的 JS Libraries
<script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.tmpl.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ba-tinyPubSub.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.mousewheel.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.ui.ipad.js" type="text/javascript" charset="utf-8"></script>
<script src="js/globalize.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ba-debug.min.js" type="text/javascript" charset="utf-8"></script>
//載入 Timeglider JS 的程式碼
<script src="timeglider/TG_Date.js" type="text/javascript" charset="utf-8"></script>
<script src="timeglider/TG_Org.js" type="text/javascript" charset="utf-8"></script>
<script src="timeglider/TG_Timeline.js" type="text/javascript" charset="utf-8"></script>
<script src="timeglider/TG_TimelineView.js" type="text/javascript" charset="utf-8"></script>
<script src="timeglider/TG_Mediator.js" type="text/javascript" charset="utf-8"></script>
<script src="timeglider/timeglider.timeline.widget.js" type="text/javascript" charset="utf-8"></script>

第二步 在你要放置時間軸的HTML部分給他個可識別的代號 例如ID
<div id='placement'></div>
第三步 準備一個JSON的檔案
[    
  {
    "id": "jshist", //編號
    "title": "A little history of JavaScript", //標題
    "focus_date": "2001-01-01 12:00:00", //時間焦點
    "initial_zoom": "43",//初始焦距
    "timezone": "-07:00", //時區
    "events": [
    {
      "id": "jshist-01", //事件編號
      "title": "Mocha - Live Script",//事件標題
      "description": "JavaScript was originally developed by Brendan Eich of
             Netscape under the name Mocha. LiveScript was the official name for the
             language when it first shipped in beta releases of Netscape Navigator 2.0
             in September 1995", //內容敘述
      "startdate": "1995-04-01 12:00:00", //開始時間
      "enddate": "1995-04-01 12:00:00", //結束時間
      "date_display": "month", //顯示
      "link": "http://en.wikipedia.org/wiki/JavaScript",//連結
      "importance": 40,  //重要性
      "icon":"square_blue.png" //圖示
     },
     {
      "id": "jshist-02",
      "title": "JavaScript is Born",
      "description": "LiveScript is Renamed JavaScript in a joint
             announcement with Netscape and Sun Microsystems",
      "startdate": "1995-12-04 12:00:00",
      "enddate": "1995-12-04",
      "date_display": "day",
      "link": "http: //en.wikipedia.org/wiki/JavaScript",
      "importance": 50,
      "icon":"triangle_orange.png"
    }
  ]
  }
]

第四步 加入 JavaScript 使他開始動作
$(function () {
   var tg1 = $("#placement").timeline({
     "data_source":"json_tests/js_history.json",
     "min_zoom":15,
     "max_zoom":60,
  });
});

附上參數

參數	預設	說明
data_source	null	資料來源
new timezone	00:00	時區設定
min_zoom	1	最小檢視大小
max_zoom	50	最大檢視大小
initial_timeline_id	null	如只加載一個時間表就不需設定
icon_folder	js/timeglider/icons/	小圖示的資料夾設定
show_footer	true	是否顯示頁腳
display_zoom_level	true	是否顯示縮放等級
event_modal	{}	事件模式

作者網站：http://timeglider.com/jquery/
檔案大小：735 KB(包含範例)
檔案下載：http://timeglider.com/widget/timeglider_widget_code.zip
檔案備份：下載