Day 23：使用 TimelineJS 構建精美的時間軸

時間 2019-12-09

標籤 day 使用 timelinejs 構建精美時間軸简体版

原文原文鏈接

編者注：咱們發現了有趣的系列文章《30天學習30種新技術》，正在翻譯，一天一篇更新，年終禮包。下面是第23天的內容。javascript

肯定今天的主題費了我很多工夫，我開始打算學習brain，後來又去看了看Twitter Server，可是我最後決定學習TimelineJS。本文將介紹如何使用TimelineJS爲一系列文章建立一個精美的時間軸。html

TimelineJS是什麼？

TimelineJS 是一個開源庫，能夠幫助你建立精美、可交互的時間軸。它能夠使用Google試算表或基於JSON的REST後端做爲數據來源。它能夠處理不一樣種類的內容，從多個來源獲取媒體文件，包括：前端

Twitter
Google Plus
Flickr
Youtube , Vimeo , DailyMotion
Google Maps

TimelineJS Demo

我今天構建的示例程序以時間軸的形式展現個人《30天學習30種新技術》系列文章。它部署在OpenShift上，你能夠在此訪問。html5

用戶訪問應用的/時，將看到包括全部已發表文章的時間軸。這背後經過REST(/api/v1/stories)獲取文章信息。java

GitHub倉庫

今天的示例應用代碼能夠從GitHub獲取。jquery

兩分鐘內運行

這裏假設你已經安裝了OpenShift客戶端工具。請參閱OpenShift文檔獲取安裝信息。git

咱們將開始建立名爲day23demo的示例應用。angularjs

rhc create-app day23demo tomcat-7 mongodb-2 --from-code=https://github.com/shekhargulati/day23-timelinejs-demo.git

這會爲咱們建立一個應用容器——gear，而後設置公開的DNS，建立私有git倉庫，最後利用你的Github倉庫中的代碼來部署應用。應用能夠經過http://day23demo-{domain-name}.rhcloud.com/訪問。用你本身的OpenShift域名替換{domain-name} （域名有時也被稱爲命名空間）。github

應用部署完成後，你能夠使用curl來建立新文章：web

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框架構建的後端和用TimelineJS、jQuery構建的前端。在我昨天的文章中，我詳細介紹瞭如何使用Spring框架和MongoDB來構建一個REST後端。更多信息請參考day 22

TimelineJS使用的JSON格式以下：

{
    "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是可選的。

index.html指明應用的用戶接口。咱們使用jQuery發起GET請求。GET請求獲取的信息交給TimelineJS在id爲timeline的div中渲染。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>

這是今天的內容。要繼續反饋哦～

原文 Day 23: TimelineJS--Build Beautiful Timelines
翻譯 SegmentFault