首页 > 代码库 > Timeline简单配置

Timeline简单配置

2024-11-22 12:21:02   206人阅读

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简单配置


联系
我们