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

发布于 2018-03-17 21:50:13 字数 4365 浏览 2877 评论 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();

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。