在線演示1  在線演示2

Timeglider JS是一個由javascript支持縮放，數據驅動的時間軸組件。非常適合顯示項目歷史，項目計劃及其其它需要顯示歷史的項目。

時間軸可以通過右邊拖放垂直滑動器來縮放界面：向上縮小，向下放大。同時也支持使用滾輪來控制縮放。通過鼠標拖東空白處可以左右拖動時間軸，點擊事件可以彈出一個小窗口來描述時間內容及其數據。

JS組件有以下幾個目標：

• 支持iPads和其它支持觸摸的設備
• 非常容易整合到基于HTML/JS應用和界面
• 支持復雜的布局，并且可以對任何指定自定義HTML元素添加事件

安裝

第一步：jQuery UI及其Timeglider 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"> 
<link rel="stylesheet" href="css-folder/Timeglider.css" type="text/css"     media="screen" title="no title" charset="utf-8">

第二步：倒入jQuery類庫

<script src="/your_js_folder/jquery.js" type='text/javascript'>

第三步：jQuery UI JS

你需要下載最新的jQuery UI 。最小的配置如下：

• all of the core modules
• interactions: draggable & droppable
• widgets: button, dialogue, slider & datepicker
• no effects are necessary

第四步：Timeglider 

倒入timeglider類庫：

<script src="your_js_folder/timeglider.min.js" type='text/javascript'>

插件代碼如下：

<!-- html: -->    
<div id='placement'></div>      
<!-- js: -->    
$(document).ready(function () {        
  var tg1 = $("#placement").timeline({              
  "data_source":"json_tests/js_history.json",            
  "min_zoom":15,          
  "max_zoom":60,       
});    
}); 

相關選項：

• data_source：指定包含時間軸數據的JSON文件。因為使用JSON，不是JSONP所以必須使用同一域名下的數據。 (必須)
• new timezone：指定timezone的偏移 (缺省："00:00" (GMT))
• min_zoom：最小的縮放度 (缺省：1)
• max_zoom：最大的縮放度 (缺省： 50)
• initial_timeline_id：用來指定時間軸ID，如果有倆個以上時間軸，則需要，否則不需要
• icon_folder：指向一個包含圖標的目錄 (缺省："js/timeglider/icons/")
• show_footer：頁底（列表，設置及其過濾按鈕）可以被隱藏 (缺省：true)
• display_zoom_level：是否顯示縮放滑動器
• event_modal：指向一個HTML文件用來替代缺省的彈出信息框，樣例：{type:"full", href:"/js/timeglider/templates/full_modal.html"}