Timeglider JS is a scaled, data-driven timeline component that is supported by JavaScript. Ideal for displaying project history, project plans, and other projects that need to show history.
The timeline can scale the interface by dragging the vertical slider to the right: Zoom up, zoom down. It also supports the use of rollers to control scaling. Drag the mouse through the East space can drag the timeline left and right, click events can pop up a small window to describe the time content and its data.
The JS component has the following goals:
Supports ipads and other touch-enabled devices
Very easy to integrate into HTML/JS applications and interfaces
Supports complex layouts, and can add events to any specified custom HTML element
Installation
First step: 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 two: Pour into jquery class library
<script src= "/your_js_folder/jquery.js" type= ' Text/javascript ' >
Step three: JQuery UI JS
You need to download the latest jquery UI. The smallest configuration is as follows:
All of the core modules
Interactions:draggable & Droppable
Widgets:button, Dialogue, Slider & DatePicker
No effects are necessary
Fourth Step: Timeglider
Pour into the Timeglider class library:
<script src= "your_js_folder/timeglider.min.js" type= ' Text/javascript ' >
The plug-in code is as follows:
Copy Code code 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 the JSON file that contains the timeline data. Because using JSON, not JSONP, you must use data from the same domain. Must
New timezone: Specify timezone offset (default: "00:00" (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 timeline, you need to, otherwise do not need
Icon_folder: Point to a directory containing icons (default: "js/timeglider/icons/")
Show_footer: Bottom of page (list, settings, and filter buttons) can be hidden (default: TRUE)
Display_zoom_level: Whether to show the zoom slider
Event_modal: Point to an HTML file to replace the default pop-up message box, sample: {type: ' Full ', href: '/js/timeglider/templates/full_modal.html '}
