Documentation

jQuery Timeline Getting Started

jqxTimeline represents a widget which displays a series of events vertically or horizontally.

Every UI widget from jQWidgets toolkit needs its JavaScript files to be included in order to work properly.

The first step is to create html page and add links to the JavaScript files and CSS dependencies to your project. The jqxTimeline widget requires the following files:

<head>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css"/>
<script src="../../jqwidgets/jqxcore.js"></script>
<script src="../../jqwidgets/jqxtimeline.js"></script>
</head>

The next step is to create html element within the body of the html document.

<div id='jqxTimeline'>
</div>

The last step is to initialize the widget by adding the following script to the html document:

<script>
    window.onload = () => {
        const timeline = new jqxTimeline("#jqxTimeline", {
                horizontal: true
            });
    }
</script>

To call a function (method), you need to pass the method name and parameters (if any) in the jqxTimeline's constructor.

$("#jqxTimeline").jqxTimeline('render');

To set a property (option), you need to pass the property name and value(s) in the jqxTimeline's constructor.

$("#jqxTimeline").jqxTimeline({ horizontal: true });

To get a property (option), you need to pass the property name to the jqxTimeline's constructor.

const isHorizontal = $("#jqxTimeline").jqxTimeline('horizontal');

Basic jqxTimeline Sample #

<!DOCTYPE html>
<html lang="en">

<head>
    <title id="Description">Timeline basic demo.</title>
    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />

    <script src="../../../jqwidgets/jqxcore.js"></script>
    <script src="../../../jqwidgets/jqxtimeline.js"></script>
    <script src="../../../jqwidgets/jqxbuttons.js"></script>
    <script src="../../../scripts/demos.js"></script>
    <script>
        window.onload = function () {
            // create barcode.
            const timeline = new jqxTimeline("#timeline");
        }
    </script>
</head>
<body>
    <div id="barcode"></div>
    <div style="position: absolute; bottom: 5px; right: 5px;">
        <a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/"
                title="https://www.jqwidgets.com/"
                src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png" /></a>
    </div>
</body>

</html>