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 相关文章推荐
jQuery 操作XML入门
Dec 25 Javascript
ASP中Sub和Function的区别说明
Aug 30 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
js设置随机切换背景图片的简单实例
Nov 12 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 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
smarty中先strip_tags过滤html标签后truncate截取文章运用
2010/10/25 PHP
php读取纯真ip数据库使用示例
2014/01/26 PHP
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
js实现简单的秒表
2020/01/16 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
全面了解python字符串和字典
2016/07/07 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
Django通过json格式收集主机信息
2020/05/29 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
国际象棋商店:The Chess Store
2018/07/09 全球购物
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
教师竞聘演讲稿
2014/05/16 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
商业计划书范文
2019/04/24 职场文书
导游词之江南周庄
2019/12/06 职场文书
Redis全局ID生成器的实现
2022/06/05 Redis