[译] 第二十三天：TimelineJS - 创建漂亮的时间轴

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

前言

今天花了我好多时间去寻找想写的主题，从brain开始，后来看了Twitter Server, 最终锁定TimelineJS. 所以今天的30天挑战，我们来学习怎样用TimelineJS创建漂亮的时间轴。

什么是TimelineJS?

TimelineJS是一个开源库，有助创建漂亮的交互式时间轴，可以用Google数据表或者基于REST后端的JSON作为它的数据源。时间轴可以处理各种类型的内容，可以从各种资源放入媒体中，目前支持的一些资源包括：

Twitter
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

View Code

这会创建一个叫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

View Code

后台

这个程序包含两部分-用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"

                    }

                }

            ]

    }

}

View Code

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>