JQuery Timelinr Implement vertical horizontal time axis plug-in (source download) _jquery

Source: Internet
Author: User
Tags date1 prev

Jquery.timelinr.js is a very cool jquery time Axis plug-in. Jquery.timelinr can make horizontal and vertical timeline effects, and can be played automatically. You can use the parameters to control the animation effect of each time axis switch.

Recommended reading: Previously shared a short history of jquery Enterprise Development Timeline Special effects source code, its interface display effect is very good.

Effect Display source Download

How to use

Using this timeline plug-in requires the introduction of jquery and Jquery.timelinr.js files in the page.

<script src= "Js/jquery-1.x.x.min.js" ></script>
<script src= "Js/jquery.timelinr-0.9.x.js" > </script>

HTML structure

The basic HTML structure for this timeline plug-in is as follows:

<div id= "Timeline" >
<ul id= "Dates" >
<li><a href= "#" >date1</a></li>
<li><a href= "#" >date2</a></li>
<ul id= "Issues" >
< Li id= "date1" >
<p>lorem ipsum.</p>
<li id= "Date2" >
<p> Lorem ipsum.</p>
<a href= "#" id= "Next" >+</a> <!-- Optional-->
<a href= "#" id= "prev" >-</a> <!--optional-->

Initializing Plug-ins

After the page DOM element has been loaded, you can initialize the timeline plug-in in the following ways.

$ (function () {
$ (). Timelinr ();

Configuration parameters

The configuration parameters for the Jquery.timelinr.js timeline plug-in are:

Orientation: The direction of the timeline, optional values are: Horizontal | Vertical The default value is ' horizontal '.
Containerdiv: The ID selector for the timeline container Div. The default is: ' #timeline '.
Datesdiv: The ID selector of the container that displays the time. The default is: ' #dates '.
Datesselectedclass: Class for the currently selected time. The default value is: ' Selected '.
Datesspeed: Animation speed for the timeline. Value from 100-1000, or ' slow ', ' normal ', ' fast '. The default value is: ' normal '.
Issuesdiv: The id selector of the div for information description. The default is: ' #issues '.
Issuesselectedclass: The class of the div that the currently selected information describes. The default value is: ' Selected '.
Issuesspeed: The animation speed of the div that the information describes. Value from 100-1000, or ' slow ', ' normal ', ' fast '. The default value is: ' Fast '.
Issuestransparency: The transparency of the div that the information describes. Value 0-1, the default value is 0.2.
Issuestransparencyspeed: The speed of the transparency animation. The value is from 100-1000, and the default is 500.
Prevbutton: The ID selector for the forward button. The default is: ' #prev '.
Nextbutton: The ID selector for the back button. The default is: ' #next '.
Arrowkeys: Whether the keyboard is allowed to be used for control. The default is: false.
StartAt: Index subscript at the beginning, defaults to 1.
AutoPlay: Whether to play automatically. Default is ' false '.
Autoplaydirection: The direction in which to play automatically. Optional values are: Forward | Backward. The default value is: ' Forward '.
Autoplaypause: The interval at which AutoPlay is played. Integer value, 1000 = 1 seconds, default is 2000. The
Jquery.timelinr.js GitHub address for the timeline plug-in is: Https://github.com/juanbrujo/jQuery-Timelinr

The above is about jquery timelinr to achieve vertical horizontal time axis plug-ins related content, I hope to help!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.