当前位置:JS特效 » 日期选择插件 » 基于Bootstrap的响应式垂直时间轴jQuery插件
 基于Bootstrap的响应式垂直时间轴jQuery插件
如果您觉得内容不错,请分享:

插件介绍

eeyellow.Timeline是一款基于Bootstrap的响应式垂直时间轴jQuery插件。该垂直时间轴基于Bootstrap的网格系统,它使用简单,每个时间节点还可以制作轮播图效果。

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:56
简要教程

eeyellow.Timeline是一款基于Bootstrap的响应式垂直时间轴jQuery插件。该垂直时间轴基于Bootstrap的网格系统,它使用简单,每个时间节点还可以制作轮播图效果。它的特点还有:

  • 基于Bootstrap网格系统,响应式设计。
  • 点击每一个时间节点的头部可以展开或收缩面板。
  • 每一个面板都可以制作多事件轮播图效果。

使用方法

使用该时间轴插件需要在页面中引入Bootstrap的相关文件,以及jquery.eeyellow.Timeline.css和jquery,jquery.eeyellow.Timeline.js文件。





                
                
HTML结构

该时间轴插件的基本HTML结构如下,每一个

元素是一个时间节点。

2016 3月
Feb 03
Event Heading
......
......
Jan 2016
Dec 2015
Oct 2015
Sep 2015
Aug 2015
初始化插件

在页面DOM元素加载完毕之后,可以通过vivaTimeline()方法来初始化该时间轴插件。

$('.VivaTimeline').vivaTimeline();
                

配置参数

该时间轴插件有2个可用的配置参数:

  • carousel:启用或禁用面板的轮播图功能。默认值为true。
    $('.VivaTimeline').vivaTimeline({
        carousel: true
    });
    
  • carouselTime:轮播图的播放速度。默认值为10000毫秒。
    $('.VivaTimeline').vivaTimeline({
        carousel: true,
        carouselTime: 3000
    });
    

eeyellow.Timeline垂直时间轴插件的github地址为:https://github.com/eeyellow/eeyellow.Timeline

Top