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

  • 源码大小:271.74KB
  • 所需积分:1积分
  • 源码编号:19JP-3579
  • 浏览次数:493次
  • 最后更新:2023年06月28日
  • 所属栏目:时间和时钟
本站默认解压密码:19jp.com 或 19jp_com

简介

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更新

 

预览截图