DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> TimergliderJS 一個基於jQuery的時間軸插件
TimergliderJS 一個基於jQuery的時間軸插件
編輯: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"}
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved