前言
今天花了我好多时间去寻找想写的主题，从brain开始，后来看了Twitter Server, 最终锁定TimelineJS. 所以今天的30天挑战，我们来学习怎样用TimelineJS创建漂亮的时间轴。
什么是TimelineJS?
TimelineJS是一个开源库，有助创建漂亮的交互式时间轴，可以用Google数据表或者基于REST后端的JSON作为它的数据源。时间轴可以处理各种类型的内容，可以从各种资源放入媒体中，目前支持的一些资源包括：
- Google Plus
- Flickr
- Youtube, Vimeo, DailyMotion
- Google Maps
TimelineJS Demo
今天的demo会显示这个30天挑战系列作为时间轴，你可以从OpenShift上在线查看。
当用户打开到‘/‘ url, 可以看到时间轴包含了这个系列发布的所有博客，后台，我们调用了REST(/api/v1/stories)获取所有文章，作为TimelinsJS预期的格式。
Github 仓库
今天的demo放在 github: day23-timelinejs-demo.
快速启动和运行程序
这步之前假设你已经安装了OpenShift客户端工具，请参考OpenShift安装客户端工具文档。
从创建demo开始，命名day23demo.
$ rhc create-app day23demo tomcat-7 mongodb-2 --from-code=https://github.com/shekhargulati/day23-timelinejs-demo.git
这会创建一个叫gear的程序容器，安装所需的SELinux策略和cgroup配置，OpenShift也会为你安装一个私有git仓库，克隆到本地，然后它会把DNS传播到网络。可访问 http://day23demo-{domain-name}.rhcloud.com/ 查看程序。替换你自己唯一的OpenShift域名(有时也叫命名空间)。
程序部署后可以用curl新建文章。
$ curl -i -X POST -H "Content-Type: application/json" -d ‘{"url":"https://www.openshift.com/blogs/day-21-docker-the-missing-tutorial","startDate":"2013,11,18"}‘ http://day23demo-{domain-name}.rhcloud.com/api/v1/stories
后台
这个程序包含两部分-用Spring框架创建的REST后端和用TimelineJS和jQuery创建的前端。昨天我们讨论了怎样用Spring框架和MongoDB创建RESTful后端，详情参考第22天的博客。
本文要特意指出的是TimelineJS期待的JSON格式，TimelineJS预期数据格式如下：
{ "timeline":{ "headline":"30 Technologies in 30 Days -- By Shekhar Gulati", "type":"default", "text":"Learn 30 Technologies in 30 Days","startDate":"2013,10,29", "date":[ { "id":"528cb57de4b015e760ed06be", "url":"https://www.openshift.com/blogs/day-1-bower-manage-your-client-side-dependencies", "headline":"Day 1: Bower--Manage Your Client Side Dependencies", "text":"<p>...</p>", "startDate":"2013,10,29", "asset":{ "media":"https://www.openshift.com/sites/default/files/bower- logo.png" } }, { "id":"528cb5bee4b015e760ed06bf", "url":"https://www.openshift.com/blogs/day-2-angularjs-getting-my-head-around-angularjs", "headline":"Day 2: AngularJS--Getting My Head Around AngularJS", "text":"...", "startDate":"2013,10,30", "asset": { "media":"https://www.openshift.com/sites/default/files/angularjs-from-30k-feet.png" } } ] } }
id和url不是TimelineJS必需的。
Index.html指定了程序用户界面，文档结构加载好后，我们用jQuery发出GET请求，数据就从GET调用给TimelineJS, 在div中用id timeline加载，createStoryJS方法初始化一个新的时间轴。
<!DOCTYPE html> <html lang="en"> <head> <title>30 Technology in 30 Days Timeline</title> <meta charset="utf-8"> <meta name="description" content="30 Technology in 30 Days Timeline"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-touch-fullscreen" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <!-- Style--> <style> html, body { height:100%; padding: 0px; margin: 0px; } </style> <!-- HTML5 shim, for IE6-8 support of HTML elements--><!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <script type="text/javascript" src="lib/jquery-min.js"></script> <script type="text/javascript" src="js/storyjs-embed.js"></script> <script> $(document).ready(function() { $.get(‘/api/v1/stories‘,function(result){ createStoryJS({ type: ‘timeline‘, width: ‘100%‘, height: ‘600‘, source: result, embed_id: ‘timeline‘, debug: true }); }); }); </script> </head> <body> <div id="timeline"></div> </body> </html>
这就是今天的内容，继续给反馈吧。
[译] 第二十三天：TimelineJS - 创建漂亮的时间轴
原文：http://www.cnblogs.com/endless-on/p/3514005.html