jqtimeline.js 基于 jQuery 轻量级时间轴插件 - 资源分享

jqtimeline.js 基于 jQuery 轻量级时间轴插件

发布于 2018-03-17 字数 4508 浏览 2542 评论 0

jquery.jqtimeline.js 是一个简单、轻量级、优雅的用于记录重大事件的时间轴插件。它使用 JSON 数组来记录数据。这个插件能够很容易的集成到其他 jQuery 插件中,可用于创建社交应用、博客时间轴、公司事务时间表等。

jqtimeline.js 基于 jQuery 轻量级时间轴插件

使用方法

在页面中引入 jquery.timeline.js 和 jquery.timeline.css 文件

<!-- Include necessary files -->
<link rel="stylesheet" type="text/css" href="css/jquery.timeline.css" />
<script type="text/javascript" src="js/jquery.timeline.js"></script>

创建一个div用于放置时间轴

<!-- Create a div to be used as container for our timeline. -->
<div id="myTimeline"></div>

调用时间轴

// Create an array of event object. Events can be added and deleted dynamically
var ev = [{id:1, name:'I used jqtimeline plugin.', on : new Date() }];

//Call the plugin constructor
$('#myTimeline').jqtimeline({events:ev});

可选参数

  • startYear int : The stating year of the timeline. default: current_year – 1
  • numYears int : Number of years to be shown on the timeline default: 3
  • gap int : This is the distance between the lines on the timeline (in px). If you increase this value length of timeline is increased. default: 25
  • showToolTip boolean : To showtooltip when user hovers on an event on timeline. default: true
  • groupEventWithinPx int : If the events are very close to each other on the timeline its hard for a user to click on an specific event. This attribute is use to group events within specific px range to show a common tooltip. Check the demo to know more default: 6
  • events Arrar[] : Array of events to be shown on the timeline. Dont confuse this with javascript/jquery event object. The format of event object is given in next section. default: null
  • click function : The function to be called when a user clicked on a specific event. This function is passed with jQuery Event object and the Timeline event object. default: null

参数使用举例

$('#myTimeline').jqtimeline({
 numYears:4,
 startYear:2011,
 click:function(e,event){
 alert(event.name);
 }
});

时间轴事件对象

var eventObj = {
 id:*unique_id*,
 name:*name_of_the_event*,
 on:*date_on_which_event_occured*
};

方法事件

After initializing the plugin the plugin object is stored in the html element as jquery data so that you can get it to invoke any method.

$('#someDiv').jqtimeline(options);

To get the plugin object simple do the following :

var timelineObj = $('#someDiv').data('jqtimeline');
timelineObj.method();

Where method can be any of the following :

  • addEvent([event_obj]) Use to dynamically add timeline event to timeline. Argument can be an Event Object or array of Event Object
    var eventObj = {id=1, name="Dummy Event",on : new Date()};
     timelineObj.addEvent(eventObj);
  • deleteEvent Delete a timeline Event from the timeline. Pass the event id or arrayof id to delete event from timeline
    timelineObj.deleteEvent(1);
     timelineObj.deleteEvent([2,3,4]); // Will delete event with id 2,3 and 4
  • getAllEvents Get all the event as an array present on the timeline.
    timelineObj.getAllEvents();
  • getAllEventsElements Get all the Html elements shown as events on the timeline. Use to attach an event handler or what ever you want to do with them
    timelineObj.getAllEventsElements();

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0