文档章节

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

算法与编程之美
 算法与编程之美
发布于 2014/11/16 12:39
字数 549
阅读 3365
收藏 76

前言

最近在为某培训机构开发教务管理系统,其中遇到的比较多的就是课表的展示,在google中搜索一番之后,找到了一款比较好的timetable,所以和大家一起分享一下。 在线demo: http://timetable.askblog.net/Timetable.htm

demo

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上的示例代码。

代码

引用

如果您对算法或编程感兴趣,欢迎扫描下方二维码并关注公众号“算法与编程之美”,和您一起探索算法和编程的神秘之处,给您不一样的解题分析思路。

© 著作权归作者所有

算法与编程之美
粉丝 297
博文 96
码字总数 106067
作品 0
成都
程序员
私信 提问
加载中

评论(6)

算法与编程之美
算法与编程之美 博主

引用来自“bosslovezz”的评论

我想鼠标能拖拽修改,怎么弄?

@bosslovezz 如果原生的不支持就需要自己添加修改。
bosslovezz
bosslovezz
我想鼠标能拖拽修改,怎么弄?
算法与编程之美
算法与编程之美 博主

引用来自“yak”的评论

怎么修改里面的值?
直接在html中修改就可以了
yak
yak
怎么修改里面的值?
算法与编程之美
算法与编程之美 博主

引用来自“lxbzmy”的评论

#1 课表不都是 竖的么? 列是周一-五,行每节课。
可能展示的形式不太一样,本文介绍的只是一个时间表
lxbzmy
lxbzmy
#1 课表不都是 竖的么? 列是周一-五,行每节课。
jQuery EasyUI使用教程之创建一个课程表

<jQuery EasyUI最新版下载> 本教程将为你展示如何使用jQuery EasyUI创建一个学校的课程表。我们将创建两个表:学校的科目在左边,时间表在右边,你可以拖动学校科目并将其放在时间表的单元格...

Miss_Hello_World
2015/10/19
346
0
jQuery 日历插件--graspSchedule

GraspSchedule 是一款用于可视化的可用于 JSON 数据加载的 jQuery 日历插件,有点类似于时间表或者是日历。你可以用它来创建带有航志时间表(时间轴)的应用程序或网页。...

大胖森
2015/03/24
625
0
Python实现基于遗传算法的排课优化

排课问题的本质是将课程、教师和学生在合适的时间段内分配到合适的教室中,涉及到的因素较多,是一个多目标的调度问题,在运筹学中被称为时间表问题(Timetable Problem,TTP)。设一个星期有...

洛荷
05/09
0
0
RubyCritic:一款不错的检测代码质量工具

关注代码质量是高效开发必须要做的一件事,那么在 Ruby 开发的过程中,是否有什么好的代码质量检测工具呢?下面由 Ruby 工程师路英瑞介绍一下 RubyCritic——一款还不错的代码质量检测工具。...

OneAPM蓝海讯通
2016/02/29
52
1
使用 Python 模块 re 实现解析小工具

简介: Python 模块 re(Regular Expression)是一个很有价值并且非常强大的文本解析工具,本文通过一个简单有趣的小实例来分享一下此模块的使用方法。首先讲述 Python re 的语法和功能,并通...

IBMdW
2011/04/12
970
0

没有更多内容

加载失败,请刷新页面

加载更多

ERC-777以太坊新代币标准解读

ERC777是一个新的高级代币标准,可以视为ERC20的升级版本,因此它解决了ERC20以及ERC223存在的一些问题,开发者可以根据自己的具体需求进行选型。 1、使用ERC820进行合约注册 有别于ERC20的自...

汇智网教程
今天
6
0
代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
今天
5
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
8
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
14
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部