TimergliderJS 一個基於jQuery的時間軸外掛程式

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"}