Timeglider JS是一個(gè)由javascript支持縮放，數(shù)據(jù)驅(qū)動(dòng)的時(shí)間軸組件。非常適合顯示項(xiàng)目歷史，項(xiàng)目計(jì)劃及其其它需要顯示歷史的項(xiàng)目。

時(shí)間軸可以通過(guò)右邊拖放垂直滑動(dòng)器來(lái)縮放界面：向上縮小，向下放大。同時(shí)也支持使用滾輪來(lái)控制縮放。通過(guò)鼠標(biāo)拖東空白處可以左右拖動(dòng)時(shí)間軸，點(diǎn)擊事件可以彈出一個(gè)小窗口來(lái)描述時(shí)間內(nèi)容及其數(shù)據(jù)。

JS組件有以下幾個(gè)目標(biāo)：

支持iPads和其它支持觸摸的設(shè)備
非常容易整合到基于HTML/JS應(yīng)用和界面
支持復(fù)雜的布局，并且可以對(duì)任何指定自定義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類(lèi)庫(kù)

<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類(lèi)庫(kù)：
<script src="your_js_folder/timeglider.min.js" type='text/javascript'>
插件代碼如下：

相關(guān)選項(xiàng)：

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

最新評(píng)論