TimergliderJS 一个基于jQuery的时间轴插件
更新时间：2011年12月07日 23:33:55 作者：
Timeglider JS是一个由javascript支持缩放，数据驱动的时间轴组件。非常适合显示项目历史，项目计划及其其它需要显示历史的项目
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"}
时间轴可以通过右边拖放垂直滑动器来缩放界面：向上缩小，向下放大。同时也支持使用滚轮来控制缩放。通过鼠标拖东空白处可以左右拖动时间轴，点击事件可以弹出一个小窗口来描述时间内容及其数据。
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"}
相关文章
最近做项目时碰到一个需求，就是在移动端支付页面点击支付按钮弹出一个支付键盘，类似于支付宝的那种。项目只是单纯的手机网站，所以这个功能由前端来实现，下面小编给大家带来了jQuery仿移动端支付宝键盘的实现代码，需要的朋友参考下吧2018-08-08
网上查了好多用着都不行，自己搞定了：在包含iframe的页面中加入以下脚本，基本思想是在iframe加载内容后重新设置高度，下面代码尽在IE6中用过，没在其他浏览器中测试。2009-12-12
这篇文章主要介绍了jQuery动画效果相关方法,结合实例形式较为详细的分析了jQuery实现动画效果所用到的常见方法与相关注意事项,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了jQuery实现动画、消失、显现、渐出、渐入效果,结合实例形式分析了jQuery中animate()、hide()、show()、slideUp()、slideDown()、slideToggle()、fadeOut()、fadeIn()等方法简单使用技巧,需要的朋友可以参考下2018-09-09
这篇文章向大家推荐了一款基于jquery实现的简洁文件上传表单样式，实现效果大方精致，极力推荐给大家，希望大家可以喜欢。2015-11-11
下面小编就为大家带来一篇Jquery为DIV添加click事件的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
本篇文章介绍了，基于jquery的has()方法以及与find()方法以及filter()方法的区别详解需要的朋友参考下2013-04-04
这篇文章主要介绍一个自写的jQuery异步加载数据添加事件的方法,需要的朋友可以参考下2014-05-05
本篇文章是对可扩展的无限极联动下拉选项的实例进行了分析介绍，需要的朋友参考下2013-05-05
一个关于jquery星级插件的博文，那是我从网上收集的，它只支持一个页面中使用一次，多次使用的话会发生冲突，达不到我项目的需求，没办法，只能修改它2012-03-03
最新评论