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. redis cluster管理工具redis-trib.rb详解

    redis cluster管理工具redis-trib.rb详解 来源 http://weizijun.cn/2016/01/08/redis%20cluster%E7%AE%A1%E7%90%86% ...

  2. BZOJ1951 [Sdoi2010]古代猪文 【费马小定理 + Lucas定理 + 中国剩余定理 + 逆元递推 + 扩展欧几里得】

    题目 "在那山的那边海的那边有一群小肥猪.他们活泼又聪明,他们调皮又灵敏.他们自由自在生活在那绿色的大草坪,他们善良勇敢相互都关心--" --选自猪王国民歌 很久很久以前,在山的那 ...

  3. Python学习笔记（Django篇）——1、环境搭建篇（如何在Pycharm中配置Python和Django）

      1.准备好以下东东,并且按照先后顺序进行安装: Python 3.6 (64-bit) Django-1.11.tar.gz pycharm-community-2016.3.2.exe 安装好了 ...

  4. redux-saga call 和 fork的区别

    call 为阻塞调用, fork为非阻塞调用

  5. tips 前端 背景与元素的透明和模糊

    碰到好几次这样的情况了: 一个带点儿文艺效果 背景图片模糊 而一行别致的文字清晰的悬浮在背景上(口胡,加点美好的想象,生活会更美好) 第一反应是 this is easy. cause i know ...

  6. PriorityQueue详解（一）

    在Java SE 5.0中,引入了一些新的Collection API,PriorityQueue就是其中的一个.今天由于机缘巧合,花了一个小时看了一下这个类的内部实现,代码很有点意思,所以写下来跟大 ...

  7. Linux文件查找命令find,xargs详述【转】

    转自:http://blog.csdn.net/cxylaf/article/details/4069595 转自http://www.linuxsir.org/main/?q=node/137 Li ...

  8. JMM内存模型+volatile+synchronized+lock

    硬件内存模型: Java内存模型: 每个线程都有一个工作内存,线程只可以修改自己工作内存中的数据,然后再同步回主内存,主内存由多个内存共享. 下面 8 个操作都是原子的,不可再分的: 1)  lock ...

  9. javascript原型理解一种

    http://www.jianshu.com/p/15ac7393bc1f 这个系列值得好好学习的.. // 声明构造函数 function Person(name, age) { this.name ...

  10. CentOS6.5升级autoconf版本，解决”Autoconf version 2.64 or higher is required“错误

    CentOS6.5升级autoconf版本,解决”Autoconf version 2.64 or higher is required“错误 https://blog.csdn.net/pretty ...