Albe Timeline是一个简单但高度可定制的jQuery插件，它可以帮助您从JSON数据中呈现响应的水平（或垂直）时间线。数据将自动按年份分组，事件将按日期排序。此外，该插件能够处理几乎任何类型的内容，如图像、视频、音频等。

如何使用它:

1.加载支持CSS3的动画的Animate.css（可选）。

<link rel="stylesheet" href="/path/to/animate.min.css">

2.在结束body标记之前加载jQuery库和jQuery Albe Timeline插件的脚本。

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-albe-timeline.js"></script>

3.创建一个DIV容器来容纳时间线。

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

4.准备好您的数据，以便在此时间线中呈现。

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.'
    }],
  }
  ...
];

5.调用函数以在网页上呈现时间线。

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

6.您可以将以下选项对象作为第二个参数传递给反照率时间线方法

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


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

  // date format
  formatDate: 'dd MMM',

  // shows navigation menu
  showMenu: true,

  // shows group
  showGroup: true,

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

  // sorts events by date
  sortDesc: true

});

更新日志：

2022-05-09

• v4.0.2：在datetime标记处将文本更改为html。

2020-09-08

• v4.0.1:更新jquery-albe-timeline.js

2018-05-22

• v4.0.0:带日期时间。

2017-07-25

• v3.0.0:JS更新

2017-07-20

• v2.1.1:JS更新

2017-07-07

• v2.1.0:JS更新

2017-06-29

• v2.0.2:JS更新

2017-03-29

• v2.0.1:JS更新

2017-03-28

• v2.0.0:JS更新

2017-03-18

• v1.12:数组排序

2017-03-07

• JS更新

 

预览截图

可定制 基于JSON jQuery Timeline插件 Albe Timeline