Getting Started

Dependencies

JQuery.Timeline works normal operation with jQuery version 1.9.0 or later. We recommend that you use the latest version 3.x.

Usage

Use resources in the dist directory in the repository package.

<link rel="stylesheet" href="./dist/jquery.timeline.min.css">
<script src="./dist/jquery.timeline.min.js"></script>

Note: Before loading the jquery.timeline script, you need to read the jquery body’s script. Also we recommend that you use the defer attribute when loading each script to improve performance.

Markup on HTML

Events that will are placed on the timeline object displayed by this plugin will mark up as listing elements within an element to be rendered as the timeline.

<!-- Timeline Block -->
<div id="myTimeline">
  <ul class="timeline-events">
    <li data-timeline-node="{ start:'2019-02-26 10:00',end:'2019-02-26 13:00',content:'<p>Event Body...</p>' }">Event Label</li>
    <li data-timeline-node="{ start:'2019-03-01 23:10',end:'2019-03-02 1:30' }">
      <span class="event-label">Event Label</span>
      <span class="event-content"><p>Event Body...</p></span>
    </li>
  </ul>
</div>

Note: The tag of the event list wrapped in the timeline block is not “ul” fixed. If the class name is a “timeline-events“, it can be a “div” tag or the like.

Note: Since plugin version 2, it is now possible to mark up .event-label and .event-content classes to child elements of event node elements. Therefore you can define event label and content without considering character string escaption for attribute values.

When you mark up an element with the timeline-event-view class, you can display detailed event content as a child element of the above element when the event placed on the timeline object becomes active by clicking etc. .

<!-- Timeline Event Detail View Area (optional) -->
<div class="timeline-event-view"></div>

Into scope of jQuery

In order to apply the jquery.timeline plugin to the DOM element, initialize the instance in the jQuery scope on the script tag.

$(function () {
    $("#myTimeline").Timeline()
})

Note: Since jquery.timeline plugin version 2, the class name of plugin object has been changed from “timeline” to “Timeline”.