前言
最近在为某培训机构开发教务管理系统,其中遇到的比较多的就是课表的展示,在google中搜索一番之后,找到了一款比较好的timetable,所以和大家一起分享一下。 在线demo: http://timetable.askblog.net/Timetable.htm
step0
引入相关的css及js文件
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" />
<link href="css/docs.css" rel="stylesheet" />
<link href="css/tribal-bootstrap.css" rel="stylesheet" />
<link href="css/tribal-timetable.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.ba-resize.js"></script>
<script type="text/javascript" src="js/bootstrap-tooltip.js"></script>
<script type="text/javascript" src="js/bootstrap-collapse.js"></script>
<script type="text/javascript" src="js/tribal.js"></script>
<script type="text/javascript" src="js/tribal-shared.js"></script>
<script type="text/javascript" src="js/tribal-timetable.js"></script>
step1
timetable主体有三部分组成:横轴的时间分段,纵轴的日期分段以及主体的事件。
横轴显示为:
<div class="tt-times">
<div class="tt-time" data-time="0">
09<span class="hidden-phone">.00</span></div>
...
</div>
纵轴显示为:
<div class="tt-days">
<div class="tt-day" data-day="0">
11-11</div>
...
</div>
主体显示为:
<div class="timetable" data-days="8" data-hours="8">
<ul class="tt-events">
<li class="tt-event btn-success" data-day="0" data-start="0" data-duration="2.5">
数理统计<br />
09:00 - 11:30<br />
金老师</li>
....
</ul>
</div>
data-days中指定了纵轴的日期的范围大小,而data-hours中指定了横轴的时间范围大小。 主体事件中相关字段的解释如下:
- data-day 事件序号
- data-start 非常重要的字段即事件的开始时间,后面介绍具体的计算方法
- data-duration 顾名思义即为事件的持续时间
关于data-start的计算 (当前事件的开始时间 - 横轴的开始时间) / 3600s 从而获得小时数
总结
本文主要介绍了一款基于Bootstrap的时间表timetable的用法,以及托管在github上的示例代码。
代码
引用
如果您对算法或编程感兴趣,欢迎扫描下方二维码并关注公众号“算法与编程之美”,和您一起探索算法和编程的神秘之处,给您不一样的解题分析思路。