分享一個jQuery的時間軸插件：TimergliderJS

Timeglider JS是一個由javascript支援縮放，資料驅動的時間軸元件。非常适合顯示項目曆史，項目計劃及其其它需要顯示曆史的項目。

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

JS元件有以下幾個目标：

支援iPads和其它支援觸摸的裝置

非常容易整合到基于HTML/JS應用和界面

支援複雜的布局，并且可以對任何指定自定義HTML元素添加事件

第一步：jQuery UI及其Timeglider CSS檔案

第二步：倒入jQuery類庫

第三步：jQuery UI JS

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

all of the core modules

interactions: draggable & droppable

widgets: button, dialogue, slider & datepicker

no effects are necessary

第四步：Timeglider 

倒入timeglider類庫：

插件代碼如下：

相關選項：

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

歡迎通路GBin1.com