时间表 Timesheet.js

分享到：更多

这个Javascript程序使用神奇的HTML5和CSS3技术，将时间数据和事件进行可视化显示。使用纯JavaScript绘制时间表(轴)，使用CSS3进行漂亮的美好，同时兼容移动手机设备 …

2002

2003

2004

2005

2006

2007

2008

2009

2010

2011

2012

2013

2002-09/2002 一个惊险刺激的时刻
06/2002-09/2003 一些美好的记忆
2003 非常倒霉的事情
10/2003-2006 至少还有点意思
02/2005-05/2006 非常享受的时光
07/2005-09/2005 又开始倒霉了
10/2005-2008 这段时间什么都没有发生
01/2008-05/2009 权利的游戏第4季
01/2009-05/2009 权利的游戏第5季
02/2010-05/2010 权利的游戏第6季
09/2008-06/2010 行尸走肉第3季

在页面是只需要引入 Timesheet.js 然后配置你的数据。没有其它的程序哭依赖，不需要jQuery，更不需要Angular.JS！几行简单的JavaScript代码就能实现漂亮的HTML5布局，使用CSS3技术自定义出你想要的任何显示效果。


    <script src="/javascripts/timesheet.js" type="text/javascript" />

下面就是一个简单的一些事件时间表的数据样例：


    new Timesheet('timesheet-default', 2002, 2013, [
  ['2002', '09/2002', 'A freaking awesome time', 'lorem'],
  ['06/2002', '09/2003', 'Some great memories', 'ipsum'],
  ['2003', 'Had very bad luck'],
  ['10/2003', '2006', 'At least had fun', 'dolor'],
  ['02/2005', '05/2006', 'Enjoyed those times as well', 'ipsum'],
  ['07/2005', '09/2005', 'Bad luck again', 'default'],
  ['10/2005', '2008', 'For a long time nothing happened', 'dolor'],
  ['01/2008', '05/2009', 'LOST Season #4', 'lorem'],
  ['01/2009', '05/2009', 'LOST Season #4', 'lorem'],
  ['02/2010', '05/2010', 'LOST Season #5', 'lorem'],
  ['09/2008', '06/2010', 'FRINGE #1 & #2', 'ipsum']
]);

时间表Timesheet.js的用法是否简单。希望你用的舒心愉快，感谢你的阅读了解，如果你有兴趣，可以尝试着个Timesheet.js定义各种不同的显示样式 …