介绍一款时间表(TimeTable)的用法

浏览数：46 / 时间：2015年06月09日

前言

最近在为某培训机构开发教务管理系统，其中遇到的比较多的就是课表的展示，在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中指定了横轴的时间范围大小。
主体事件中相关字段的解释如下：