Albe Timeline- 透過 JSON 就能快速建立時間軸的 jQuery Plugin

Albe Timeline 是一個透過 JSON 就能快速建立時間軸的 jQuery Plugin，想要使用的話可以透過以下設置：

Step 1:

因為有使用到 animate.css 的動畫效果，所以要讀入  animate.css

Step 2:

下載 plugin 後讀入 jQuery 和 plugin:

jquery-albe-timeline.js

Step 3:

設置 html

<div id="myTimeline"></div>

Step 4:

JSON 的資料格式

var data = [{
    time: '2015-03-29',
    header: 'Sample of header',
    body: [{
        tag: 'h1',
        content: "Lorem ipsum"
    },
    {
        tag: 'p',
        content: 'Lorem ipsum dolor sit amet, nisl lorem, wisi egestas orci tempus class massa, suscipit eu elit urna in urna, gravida wisi aenean eros massa, cursus quisque leo quisque dui.'
    }],
    footer: 'Sample of footer'
  },
  {
    time: '2015-04-15',
    body: [{
        tag: 'h1',
        content: "Basic content"
    },
    {
        tag: 'p',
        content: 'Lorem ipsum dolor sit amet, nisl lorem, wisi egestas orci tempus class massa, suscipit eu elit urna in urna, gravida wisi aenean eros massa, cursus quisque leo quisque dui.'
    }],
  }
  ...
];

Step 5:

使用 plugin

$("#myTimeline").albeTimeline(data);

plugin 的一些設定

$("#myTimeline").albeTimeline(data,{


  // animation type
  // requires Animate.css
  effect: "fadeInUp",

  // date format
  formatDate: 'dd MMM',

  // shows navigation menu
  show: true,

  // shows group
  showGroup: true,

  // for i18n
  language: "en-us",

  // sorts events by date
  sortDesc: true

});