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. 2013年 ACMICPC 杭州赛区H题

    思路:树状数组统计.待验证,不知道是否对. #include<cstdio> #include<cstring> #include<cmath> #include& ...

  2. BZOJ1800 [Ahoi2009]fly 飞行棋 【枚举】

    题目 给出圆周上的若干个点,已知点与点之间的弧长,其值均为正整数,并依圆周顺序排列. 请找出这些点中有没有可以围成矩形的,并希望在最短时间内找出所有不重复矩形. 输入格式 第一行为正整数N,表示点的个 ...

  3. Codeforces Round #324 (Div. 2) D

    D. Dima and Lisa time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  4. 怎么用tomcat对socket接口的程序进行调试

    对socket(套接字)的demo方法大多都是用main方法进行测试的,那如何用tomcat进行测试呢? 这里需要借助一个工具:工具的名字是:Sockettool.exe .下图是该工具的内容.连上监 ...

  5. js实时监听input中值得变化

    <!DOCTYPE html> <html> <head> <title>zepto</title> <meta name=" ...

  6. 兼容firstChild和firstElementChild

    1.nextSibling和nextElementSibling 顾名思义,就是找下一个节点 nextSibling在低版本浏览器中可以顺利找到下一个元素节点,而在正常浏览器中找到的包含中间空格. n ...

  7. Java并发笔记（一）

    1. lock (todo) 2. 写时复制容器 CopyOnWrite容器即写时复制的容器.通俗的理解是当我们往一个容器添加元素的时候,不直接往当前容器添加,而是先将当前容器进行Copy,复制出一个 ...

  8. oracle odbc 驱动安装(不安装oracle客户端)

    1.下载odbc驱动 需要下载两个东西 instantclient-basiclite-nt-12.1.0.1.0.zip instantclient-odbc-nt-12.1.0.1.0.zip 由 ...

  9. Avoiding memory leaks in POSIX thread programming, 多线程避免内存泄漏

    默认创建的线程为joinable的,必须调用pthread_join()才可以释放所占的内存 创建分离线程detach, attr 线程函数运行结束,调用pthread_exit 其它线程调用pthr ...

  10. OpenGL入门学习 课程 (三) 绘制几何图形的一些细节问题

    http://oulehui.blog.163.com/blog/static/79614698201191832753312/ 先回顾一下我们都学习了些什么: 第一课,编写第一个OpenGL程序第二 ...