[译] 第二十三天：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>

View Code

这就是今天的内容，继续给反馈吧。

原文：https://www.openshift.com/blogs/day-23-timelinejs-build-beautiful-timelines