jQuery时间表插件Timeglider

所属分类： JQ特效输入日期和时间

查看演示立即下载

插件描述：Timeglider是一个支持缩放，平移数据驱动的时间表的jQuery插件，特别适于历史项目、项目规划等等。时间线可以缩放拖动右侧的垂直滚动条：在（不显示时间）放大和缩小下来（更多的时间显示）。鼠标滚轮也可作为一个缩放控制器。

注：此插件需要在服务端运行，本地预览会有跨域问题！

介绍

Timeglider JS是一个由javascript支持缩放，数据驱动的时间轴组件。非常适合显示项目历史，项目计划及其其它需要显示历史的项目。

时间轴可以通过右边拖放垂直滑动器来缩放界面：向上缩小，向下放大。同时也支持使用滚轮来控制缩放。通过鼠标拖动空白处可以左右拖动时间轴，点击事件可以弹出一个小窗口来描述时间内容及其数据。

TimegliderJs 特点：

支持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类库

1	`<script` `src="/js/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类库：

1	`<script src="js/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,       
    });    
});

jQuery时间表插件Timeglider

介绍

TimegliderJs 特点：

相关选项：