时间表 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技术自定义出你想要的任何显示效果。
下面就是一个简单的一些事件时间表的数据样例:
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定义各种不同的显示样式 …