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">&times;</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简单配置的更多相关文章

  1. 小丁带你走进git世界一-git简单配置

    小丁带你走进git世界一-git简单配置 1.github的简单配置 配置提交代码的信息,例如是谁提交的代码之类的. git config  –global user.name BattleHeaer ...

  2. 以实际的WebGIS例子探讨Nginx的简单配置

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 以实际项目中的一个例子来详细讲解Nginx中的一般配置,其中涉 ...

  3. CentOS 7.0 使用 yum 安装 MariaDB 与 MariaDB 的简单配置

    1.安装MariaDB 安装命令 yum -y install mariadb mariadb-server 安装完成MariaDB,首先启动MariaDB,两条命令都可以 systemctl sta ...

  4. ssm简单配置

    MyBatis 是一个可以自定义SQL.存储过程和高级映射的持久层框架. MyBatis 摒除了大部分的JDBC代码.手工设置参数和结果集重获. MyBatis 只使用简单的XML 和注解来配置和映射 ...

  5. 安装MariaDB和简单配置

    1.安装MariaDB 安装命令 yum -y install mariadb mariadb-server 安装完成MariaDB,首先启动MariaDB systemctl start maria ...

  6. BIND的进程一：DNS简单配置与的主从配置

    DNS的简单配置和DNS的主从配置   摘要:DNS(Domain-Name Server) ,DNS的服务起到的作用就是名称解析,在网络通讯来说计算机与计算机是通过IP地址相互通信的, 当是IP地址 ...

  7. 转-squid介绍及其简单配置

    本文原始出处:http://linuxme.blog.51cto.com/1850814/372960 1．Squid是什么? Squid中文权威指南:http://zyan.cc/book/squi ...

  8. Linux中vim的简单配置

    本文主要分享Linux中vim的简单配置 ★配置文件的位置     在目录/etc.下面,有个名为vimrc的文件,这就是系统中公共的vim配置文件,对所有用户都开放.而在每个用户的主目录下,都可以自 ...

  9. CCNA网络工程师学习进程（6）vlan相关协议的配置与路由器简单配置介绍

        前面已经介绍了大部分与vlan技术相关的交换机的协议的配置,更深层次的还有STP协议和以太网端口聚合技术,接着还会简单介绍一下路由器的基本应用.     (1)STP(Spanning-tre ...

随机推荐

  1. BZOJ2743 [HEOI2012]采花 【离线 + 树状数组】

    题目 萧芸斓是Z国的公主,平时的一大爱好是采花. 今天天气晴朗,阳光明媚,公主清晨便去了皇宫中新建的花园采花.花园足够大,容纳了n朵花,花有c种颜色(用整数1-c表示),且花是排成一排的,以便于公主采 ...

  2. java.net.BindException: Address already in use: JVM_Bind <null>:8080错误

    今天打开myeclipse出现java.net.BindException: Address already in use: JVM_Bind <null>:8080错误 从网上搜了一下大 ...

  3. 3.6 Lucene基本检索+关键词高亮+分页

    3.2节我们已经运行了一个Lucene实现检索的小程序,这一节我们将以这个小程序为例,讲一下Lucene检索的基本步骤,同时介绍关键词高亮显示和分页返回结果这两个有用的技巧. 一.Lucene检索的基 ...

  4. Linux命令之time

    我使用过的Linux命令之time - 测定一个命令的资源使用情况 本文链接:http://codingstandards.iteye.com/blog/798788   (转载请注明出处) 用途说明 ...

  5. python类中两个列表实例如何相加或相减

    如下 import numpy a = [1, 2, 3, 4] b = [5, 6, 7, 8] a_array = numpy.array(a) b_array = numpy.array(b) ...

  6. html状态码

    100——客户必须继续发出请求101——客户要求服务器根据请求转换HTTP协议版本 200——交易成功201——提示知道新文件的URL202——接受和处理.但处理未完成203——返回信息不确定或不完整 ...

  7. C++封装随笔

    1接口的封装和设计思想入门 接口的封装和设计思想入门 第一套api函数 #ifndef _CLT_SOCKET_H__ #define _CLT_SOCKET_H__ //客户端初始化环境 int c ...

  8. 全自动google检索后台

    是不是每天为了找后台,伤破了蛋,每次在google输入”site:www.xxx.com intitle:登陆”.是不是手都累麻了,无聊又浪费时间.有了它,你的蛋就不用在碎了 直接上源码 1 2 3 ...

  9. aiohttp的学习

    https://hubertroy.gitbooks.io/aiohttp-chinese-documentation/content/aiohttp%E6%96%87%E6%A1%A3/Client ...

  10. zabbix ssh登录ip监控,登录ip归属地查询

    #!/usr/local/zabbix/scripts/src/bin/python # -*- coding: UTF-8 -*- from bs4 import BeautifulSoup as ...