TimergliderJS 一个基于jQuery的时间轴插件


Posted in Javascript onDecember 07, 2011

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

Javascript 相关文章推荐
JS的IE和Firefox兼容性集锦
Dec 11 Javascript
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
浅析JavaScript 调试方法和技巧
Oct 22 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
jQuery实现简单评论功能
Aug 19 jQuery
javascript实现左右缓动动画函数
Nov 25 Javascript
autoPlay 基于jquery的图片自动播放效果
Dec 07 #Javascript
浅析Prototype的模板类 Template
Dec 07 #Javascript
js 幻灯片的实现
Dec 06 #Javascript
字符串的replace方法应用浅析
Dec 06 #Javascript
js滚动条回到顶部的代码
Dec 06 #Javascript
javascript检测浏览器flash版本的实现代码
Dec 06 #Javascript
javascript 随机展示头像实现代码
Dec 06 #Javascript
You might like
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
jquery map方法使用示例
2014/04/23 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
八年级音乐教学反思
2014/01/09 职场文书
办理信用卡工作证明
2014/01/11 职场文书
迎新晚会主持词
2014/03/24 职场文书
三方协议书范本
2014/04/22 职场文书
小学运动会开幕词
2016/03/04 职场文书
Nginx HTTP跳转至HTTPS
2022/05/15 Servers
Hive日期格式转换方法总结
2022/06/25 数据库
Go语言编译原理之变量捕获
2022/08/05 Golang