[譯] 第二十三天：TimelineJS - 建立漂亮的時間軸

時間 2019-11-09

標籤第二十三天 3天 timelinejs 建立漂亮時間軸简体版

原文原文鏈接

前言

今天花了我好多時間去尋找想寫的主題，從brain開始，後來看了Twitter Server, 最終鎖定TimelineJS. 因此今天的30天挑戰，咱們來學習怎樣用TimelineJS建立漂亮的時間軸。 javascript

什麼是TimelineJS?

TimelineJS是一個開源庫，有助建立漂亮的交互式時間軸，能夠用Google數據表或者基於REST後端的JSON做爲它的數據源。時間軸能夠處理各類類型的內容，能夠從各類資源放入媒體中，目前支持的一些資源包括：html

Twitter
Google Plus
Flickr
Youtube, Vimeo, DailyMotion
Google Maps

TimelineJS Demo

今天的demo會顯示這個30天挑戰系列做爲時間軸，你能夠從OpenShift上在線查看。前端

當用戶打開到'/' url, 能夠看到時間軸包含了這個系列發佈的全部博客，後臺，咱們調用了REST(/api/v1/stories)獲取全部文章，做爲TimelinsJS預期的格式。 html5

Github 倉庫

今天的demo放在 github: day23-timelinejs-demo. java

快速啓動和運行程序

這步以前假設你已經安裝了OpenShift客戶端工具，請參考OpenShift安裝客戶端工具文檔。 jquery

從建立demo開始，命名day23demo.git

$ 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域名(有時也叫命名空間)。 angularjs

程序部署後能夠用curl新建文章。github

$ 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天的博客。 web

本文要特地指出的是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>