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
2020-09-08
2018-05-22
2017-07-25
2017-07-20
2017-07-07
2017-06-29
2017-03-29
2017-03-28
2017-03-18
2017-03-07
Â