Timeline简单配置
Timeline是一个Jquery时间轴插件。效果如图
获取地址:https://github.com/ka215/jquery.timeline
配置
(1)html表头加入
<link rel="stylesheet" href="./dist/timeline.min.css">
<script src="./dist/timeline.min.js"></script>
(2)jquery加入
$("#myTimeline").timeline({
startDatetime: '<fmt:formatDate value="${oaBoardroomReserve.reserveData}" pattern="yyyy-MM-dd"/>',
rows: 1,
datetimeFormat: {meta: 'y-m-d H:i'},
rangeAlign: 'center',
range:${rangSize},
langsDir: '${ctxStatic}/timeline/src/langs/'
});
(3)html内容
<!-- Timeline Block -->
<div id="myTimeline">
<ul class="timeline-events">
<li data-timeline-node="{ start:'2017-05-26 10:00',end:'2017-05-26 13:00',content:'text text text text ...' }">Event Label</li>
<li data-timeline-node="{ start:'2017-05-26 23:10',end:'2017-05-27 1:30',content:'<p>In this way, you can include <em>HTML tags</em> in the event body.<br>:<br>:</p>' }">Event Label</li>
</ul>
</div> <!-- Timeline Event Detail View Area (optional) -->
<div class="timeline-event-view"></div>
ok完成!效果如下图
点击选中事件,可以在<div class="timeline-event-view"></div>区域显示详情。
也可做成弹窗效果,html<body>中配置如下
<div id="myTimeline">
<div class="timeline-events">
<div data-timeline-node="{ start:'2017-8-9 08:00',end:'2017-8-9 9:00',callback:'$(\'#myModal\').modal()',content:'Show modal window via bootstrap' }">Event having callback</div>
</div>
</div> <div class="modal fade" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="timeline-event-view"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
实际项目中,前台获取后台传过来的数据作为事件显示在时间轴中,可以在timeline-events div中用jstl标签和EL表达式,效果如下
Timeline简单配置的更多相关文章
- 小丁带你走进git世界一-git简单配置
小丁带你走进git世界一-git简单配置 1.github的简单配置 配置提交代码的信息,例如是谁提交的代码之类的. git config –global user.name BattleHeaer ...
- 以实际的WebGIS例子探讨Nginx的简单配置
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 以实际项目中的一个例子来详细讲解Nginx中的一般配置,其中涉 ...
- CentOS 7.0 使用 yum 安装 MariaDB 与 MariaDB 的简单配置
1.安装MariaDB 安装命令 yum -y install mariadb mariadb-server 安装完成MariaDB,首先启动MariaDB,两条命令都可以 systemctl sta ...
- ssm简单配置
MyBatis 是一个可以自定义SQL.存储过程和高级映射的持久层框架. MyBatis 摒除了大部分的JDBC代码.手工设置参数和结果集重获. MyBatis 只使用简单的XML 和注解来配置和映射 ...
- 安装MariaDB和简单配置
1.安装MariaDB 安装命令 yum -y install mariadb mariadb-server 安装完成MariaDB,首先启动MariaDB systemctl start maria ...
- BIND的进程一:DNS简单配置与的主从配置
DNS的简单配置和DNS的主从配置 摘要:DNS(Domain-Name Server) ,DNS的服务起到的作用就是名称解析,在网络通讯来说计算机与计算机是通过IP地址相互通信的, 当是IP地址 ...
- 转-squid介绍及其简单配置
本文原始出处:http://linuxme.blog.51cto.com/1850814/372960 1.Squid是什么? Squid中文权威指南:http://zyan.cc/book/squi ...
- Linux中vim的简单配置
本文主要分享Linux中vim的简单配置 ★配置文件的位置 在目录/etc.下面,有个名为vimrc的文件,这就是系统中公共的vim配置文件,对所有用户都开放.而在每个用户的主目录下,都可以自 ...
- CCNA网络工程师学习进程(6)vlan相关协议的配置与路由器简单配置介绍
前面已经介绍了大部分与vlan技术相关的交换机的协议的配置,更深层次的还有STP协议和以太网端口聚合技术,接着还会简单介绍一下路由器的基本应用. (1)STP(Spanning-tre ...
随机推荐
- 用IE滤镜实现的一些特效
CSS3是当下非常火的一个话题,很多浏览器都已经开始支持这一特性,然后IE这个拥有庞大用户群体的平台,却无法提供这样的支持,即便是IE9发布,也无法改变这一事实,然而,幸运的是,IE并非在这方面毫无作 ...
- c#后的完整cookie
http://www.cnblogs.com/top5/archive/2010/04/11/1709457.html c#设置 webbrowser的请求cookie,可以通过fiddler分析co ...
- js中哪些语句在if语句中默认为真
结论:js中有一个函数是:Boolean(value)这个函数把一个value值转换成相应的boolean值. 当value为以下值是为true:1.任意的非空字符串 .2.任意的非0数字 而当val ...
- getElementsByName
name属性,name属性是input标签的内建属性,早期浏览器的getElementsByName方法是为了方便的获取用户的输入.由于name只是input的内建属性,其它标签没有,所以getEle ...
- 转:Android 的进程与线程总结
当一个Android应用程序组件启动时候,如果此时这个程序的其他组件没有正在运行,那么系统会为这个程序 以单一线程的形式启动一个新的Linux 进程. 默认情况下,同一应用程序下的所有组件都运行再相同 ...
- 棘手的操作(bzoj 2333)
Description 有N个节点,标号从1到N,这N个节点一开始相互不连通.第i个节点的初始权值为a[i],接下来有如下一些操作: U x y: 加一条边,连接第x个节点和第y个节点 A1 x v: ...
- set(NOIP模拟赛Round 4)
这题很神奇,对吧. 标程还理解了好久,才明白. 这道题需要用状压DP.首先我们看到总共只有15个字符串,所以可以用hash存储状态. 然后我们还需要一维用来存储DP到第几个字符. 所以dp[i][j] ...
- 《Linux命令行与shell脚本编程大全 第3版》创建实用的脚本---11
以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:
- android 研究的环境搭建、高效工具、网站资源
================= 2015 年 10 月 14 号 更新 著名的android开源社区xda有一个帖子,详细描述了android开发和研究环境的初始搭建过程: http://for ...
- 内核中的内存申请:kmalloc、vmalloc、kzalloc、kcalloc、get_free_pages【转】
转自:http://www.cnblogs.com/yfz0/p/5829443.html 在内核模块中申请分配内存需要使用内核中的专用API:kmalloc.vmalloc.kzalloc.kcal ...