Share a jQuery timeline plug-in: TimergliderJS

Document directory

• Install

 

Online Demo 1 Online Demo 2

Timeglider JS is a data-driven timeline component that supports scaling by javascript. It is ideal for displaying project history, project plans, and other projects that require historical display.

You can drag and drop the vertical slide on the right side of the timeline to zoom in and zoom in. You can also use the scroll wheel to control scaling. You can drag the timeline between the left and right by dragging the left blank space. Click an event to display a small window to describe the time content and data.

JS components have the following goals:

• Support for iPads and other Touch devices
• It is very easy to integrate into HTML/JS-based applications and interfaces.
• Supports complex la S and allows you to add events to any specified custom HTML element.

Install

Step 1: jQuery UI and Its Timeglider CSS file

<link rel="stylesheet" href="css-folder/aristo/jquery-ui-1.8.5.custom.css"     type="text/css" media="screen" title="no title" charset="utf-8"> 
<link rel="stylesheet" href="css-folder/Timeglider.css" type="text/css"     media="screen" title="no title" charset="utf-8">

Step 2: import the jQuery class library

<script src="/your_js_folder/jquery.js" type='text/javascript'>

Step 3: jQuery UI JS

You need to download the latest jQuery UI. The minimum configuration is as follows:

• All of the core modules
• Interactions: draggable & droppable
• Widgets: button, dialogue, slider & datepicker
• No effects are necessary

Step 4: Timeglider

Import the timeglider Class Library:

<script src="your_js_folder/timeglider.min.js" type='text/javascript'>

The plug-in code is as follows:

<!-- html: -->    
<div id='placement'></div>      
<!-- js: -->    
$(document).ready(function () {        
var tg1 = $("#placement").timeline({              
  "data_source":"json_tests/js_history.json",            
  "min_zoom":15,          
  "max_zoom":60,       
});    
}); 

Related options:

• Data_source: Specifies a JSON file that contains timeline data. Because JSON is used and not JSONP, data under the same domain name must be used. (Required)
• New timezone: Specifies the timezone offset (default: "" (GMT ))
• Min_zoom: Minimum zoom (default: 1)
• Max_zoom: maximum zoom (default: 50)
• Initial_timeline_id: used to specify the timeline ID. If there are more than two timelines, it is required; otherwise, it is not required.
• Icon_folder: point to a directory containing icons (default: "js/timeglider/icons /")
• Show_footer: The Bottom page (list, setting, and Filter button) can be hidden (default: true)
• Display_zoom_level: whether to display the zoom slider
• Event_modal: point to an HTML file to replace the default pop-up information box, example: {type: "full", href: "/js/timeglider/templates/full_modal.html "}