看看我做的一款 时间轴 插件 timegliderJs
TimegliderJs 是一款基于jQuery的时间轴插件。完成后效果。
介绍
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"}
看看我做的一款 时间轴 插件 timegliderJs的更多相关文章
- 推荐5款实用的jQuery时间轴插件
1.使用CSS3和jQuery制作的水平时间轴 这是一个可以在PC和移动端表现非常棒的水平时间轴,它由上部水平滑块和下部时间点对应的内容区块,点击时间轴上的时间点,下部内容会滑动到对应的内容区块.使用 ...
- jQuery时间轴插件:jQuery Timelinr
前言 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. ...
- jQ效果:jQuery时间轴插件jQuery Timelinr
前言 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. ...
- 使用canvas编写时间轴插件
使用canvas编写时间轴插件 背景 项目中有一个视频广场的功能,需要一个时间轴类似视频播放中进度条功能一样显示录像情况,并且可以点击.拖动.放大缩小展示时间轴,获取到时间轴的某个时间.原来的时间轴是 ...
- jQuery时间轴插件timeline.js
http://www.jq22.com/jquery-info13695 http://www.jq22.com/jquery-info13357 简要教程 timeline.js是一款jQuery时 ...
- JQuery+HTML5+CSS3制作时间轴插件,支持响应式布局
一.效果图预览 (图一) (图二) 附注说明: 图一是浏览器宽度像素大于560px下的展示效果,图二是在浏览器宽度像素小于560px下的展现效果.使用的是CSS3的Media Query(媒体查询)实 ...
- 企业级时间轴插件Vue-timelinepick
简介 时间范围选择插件 取当前时间之前一段时间范围 按刻,小时,天分类 在线演示及下载 在线演示:https://yelingfeng.github.io/vue-timelinepick/ 本地下载 ...
- 超炫的时间轴jquery插件Timeline Portfolio
Timeline Portfolio是一款按时间顺序专业显示事件的jquery时间轴插件,可以根据时间的先后嵌入各种媒体包括微博,视频和地图等.这个展现的模式非常适合设计师的作品集和个人简历的展示.T ...
- srt文件的时间轴平移处理
有时srt字幕文件与视频文件的时间不完全吻合,有一个时间差,这就需要对srt文件的时间轴进行平移,具备这个功能的软件很多,比如:Subtitle Tool, subresync, sabbu, Sub ...
随机推荐
- Spring MVC + Security 4 初体验(Java配置版)
spring Version = 4.3.6.RELEASE springSecurityVersion = 4.2.1.RELEASE Gradle 3.0 + Eclipse Neno(4.6) ...
- Objective-C日记-Bounds和Frame
今天在学习有关UIView时,关于Bounds和Frame的问题困扰多时,今日研究了一翻,有所收获,遂记之. 一.问题来源 网上有关bounds和frames的比较的文章主要就是一篇:http://b ...
- mp4文件格式解析
目前MP4的概念被炒得很火,也很乱.最开始MP4指的是音频(MP3的升级版),即MPEG-2 AAC标准.随后MP4概念被转移到视频上,对应的是MPEG-4标准.而现在我们流行的叫法,多半是指能播放M ...
- ajax上传图片
选择文件后 ajax上传图片到后台,后台执行保存操作,返回上传的图片路径,显示到页面 需要引入ajaxfileupload.js js代码 <script type="text/jav ...
- css 超出隐藏显示...
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- effective C++ Item 33 避免隐藏继承而来的名字
1. 普通作用域中的隐藏 名字实际上和继承没有关系.有关系的是作用域.我们都知道像下面的代码: int x; // global variable void someFunc() { double x ...
- java对象克隆以及深拷贝和浅拷贝
1.什么是"克隆"? 在实际编程过程中,我们常常要遇到这种情况:有一个对象A,在某一时刻A中已经包含了一些有效值,此时可能 会需要一个和A完全相同新对象B,并且此后对B任何改动都不 ...
- Oralce Plsql 中文显示乱码问题无需修改注册表完美解决
此方法在其它版系统也可以解决 win10-64 plsql oracle 11g绿色版客户端 错误现象: 因为oracle用的是绿色版,无法设置注册表,尝试以下方法. 解决方法: 1.在plsql中查 ...
- NSTimer的精确度
1.iOS中一般UI上面常用两种定时器 NSTimer和CADisplayLink,那么它们分别的精确度是如何呢? CADisplayLink 是用于帧刷新定时器,也就是和界面的刷新率保持一致,理想情 ...
- 引用类型-----Object
本文章转载至:https://segmentfault.com/a/1190000003984584 关于引用类型的概念: 引用类型:引用类型的值(对象)是引用类型的一个实例: 对象:是某个特定引用类 ...