Day 23：使用 TimelineJS 构建精美的时间轴

发布于 2025-01-31 20:47:31 字数 5381 浏览 0 评论 0 收藏 0

确定今天的主题费了我不少工夫，我开始打算学习 brain ，后来又去看了看 Twitter Server ，但是我最后决定学习 TimelineJS。本文将介绍如何使用 TimelineJS 为一系列文章创建一个精美的时间轴。

TimelineJS 是什么？

TimelineJS 是一个开源库，可以帮助你创建精美、可交互的时间轴。它可以使用 Google 试算表或基于 JSON 的 REST 后端作为数据来源。它可以处理不同种类的内容，从多个来源获取媒体文件，包括：

Twitter
Google Plus
Flickr
Youtube , Vimeo , DailyMotion
Google Maps

TimelineJS Demo

我今天构建的示例程序以时间轴的形式展示我的《30 天学习 30 种新技术》系列文章。它部署在 OpenShift 上，你可以在此访问。

用户访问应用的 / 时，将看到包括所有已发表文章的时间轴。这背后通过 REST(/api/v1/stories) 获取文章信息。

GitHub 仓库

今天的示例应用代码可以从 GitHub 获取。

两分钟内运行

这里假设你已经安装了 OpenShift 客户端工具。请参阅 OpenShift 文档获取安装信息。

我们将开始创建名为 day23demo 的示例应用。

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} （域名有时也被称为命名空间）。

应用部署完成后，你可以使用 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 框架构建的后端和用 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>

这是今天的内容。要继续反馈哦～

分享到QQ

分享到微博