开发者社区> 楚广明> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

分享一个jQuery的时间轴插件:TimergliderJS

简介: 在线演示1  在线演示2 Timeglider JS是一个由javascript支持缩放,数据驱动的时间轴组件。非常适合显示项目历史,项目计划及其其它需要显示历史的项目。 时间轴可以通过右边拖放垂直滑动器来缩放界面:向上缩小,向下放大。
+关注继续查看

分享一个jQuery的时间轴插件:TimergliderJS - gbin1.com

在线演示1  在线演示2

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"}
欢迎访问GBin1.com

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
分享一个jQuery的时间轴插件:TimergliderJS
在线演示1  在线演示2 Timeglider JS是一个由javascript支持缩放,数据驱动的时间轴组件。非常适合显示项目历史,项目计划及其其它需要显示历史的项目。 时间轴可以通过右边拖放垂直滑动器来缩放界面:向上缩小,向下放大。
669 0
利用JQuery上传插件Uploadify实现图片上传MongoDB并预览
利用JQuery上传插件Uploadify实现图片上传MongoDB并预览
0 0
NET MVC第七章、jQuery插件验证
NET MVC第七章、jQuery插件验证
0 0
编写自定义的JQuery插件的几个注意点
编写自定义的JQuery插件的几个注意点
0 0
关于JQuery validate表单校验插件对级联下拉框的校验问题
关于JQuery validate表单校验插件对级联下拉框的校验问题
0 0
jQuery的DOM文档对象模型,常见的事件,遍历,validate插件,自定义事件方法
jQuery的DOM文档对象模型,常见的事件,遍历,validate插件,自定义事件方法
0 0
论Jquery瀑布流做成插件的想法
现实中很多问题的根源说白了就是经济问题。
0 0
【JQuery】JQuery入门——JQuery 插件-validation
本期主要介绍JQuery入门——知识点讲解(四)
0 0
jquery插件-全屏滚动-54
jquery插件-全屏滚动-54
0 0
+关注
楚广明
10年导入咨询顾问经验,敏捷中国 第一届中国高峰会讲员,行业实施:中国移动、中华联合保险、中国民航信息 ANZ 澳新银行、戴姆勒奔驰汽车、广州证券、浦发银行、爱德万测试、蔚来汽车、清华大学、努比亚、顺丰速运、迅雷、时趣互动......等企业 Atlassian 敏捷项目
文章
问答
文章排行榜
最热
最新
相关电子书
更多
23-Vue.js在前端...1506518547.pdf
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载