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. REST Web 服务（一）----REST 介绍

    1. 什么是REST? REST 定义了一组体系架构原则,您可以根据这些原则设计以系统资源为中心的 Web 服务,包括使用不同语言编写的客户端如何通过 HTTP 处理和传输资源状态. 2. REST的 ...

  2. 用类加载器的5种方式读取.properties文件

    用类加载器的5中形式读取.properties文件(这个.properties文件一般放在src的下面) 用类加载器进行读取:这里采取先向大家讲读取类加载器的几种方法:然后写一个例子把几种方法融进去, ...

  3. Hibernate中的延迟加载及fetch

    Hibernate中的延迟加载 1.类级别的查询策略: lazy  :  true(默认值) false(立即加载) 2.多对一关联的查询策略: lazy:  proxy(默认值) no-proxy ...

  4. 如何通过友盟分析发布后App崩溃日志

    http://blog.csdn.net/totogo2010/article/details/39892467 要分析崩溃日志,首先需要保留发布时的编译出来的.xcarchive文件.这个文件包含了 ...

  5. UVA 753 A Plug for UNIX

    最大流解决 . 设置源点 0,连接所有设备(device) .设备-插头 -汇点 #include <map> #include <set> #include <list ...

  6. 非常好的博客！！！linux内存管理概述【转】

    转自:http://blog.csdn.net/bullbat/article/details/7166140 inux内存管理建立在基本的分页机制基础上,在linux内核中RAM的某些部分将会永久的 ...

  7. (33)C#正则表达式

    正则表达式:专门用于字符串处理的语言,用来描述字符串特征的表达式 元字符 . 之间可以出现任意单个字符(除了\n 换行) 例如: a.b   意思是这个表达式必须是三个字符,第一个字符是a,第三个字符 ...

  8. HDU 2191 【多重背包】

    Input 输入数据首先包含一个正整数C,表示有C组测试用例,每组测试用例的第一行是两个整数n和m(1<=n<=100, 1<=m<=100),分别表示经费的金额和大米的种类, ...

  9. CodeForces 445B DZY Loves Chemistry （并查集）

    题意: 有N种药剂编号 1 ~ N,然后有M种反应关系,这里有一个试管,开始时危险系数为 1,每当放入的药剂和瓶子里面的药剂发生反应时危险系数会乘以2,否则就不变,给出N个药剂和M种反应关系,求最大的 ...

  10. HDU 6395 2018 Multi-University Training Contest 7 (快速幂+分块)

    原题地址 Sequence Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)T ...