jQuery Timeline Setup

Home >Shield UI Documentation >Timeline >JavaScript >jQuery Timeline Setup

In order to render the Shield UI Timeline widget for JavaScript on a webpage, you need to:

1. Include references to all required scripts. Make sure you include the CSS file for your preferred theme.
2. Add an empty DIV element to render the contents to.
3. Initialize the widget.

<!DOCTYPE html>
<html>
<head>
<title>ShieldUI Tabs</title>
<meta charset="utf-8" />

<link rel="stylesheet" type="text/css" href="css/light/all.min.css" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>

</head>
<body>

<div id="timeline"></div>

<script type="text/javascript">
    $(function () {
        $("#timeline").shieltTimeline({
            dataSource: {
                data: [
                    {
                        title: "David F.",
                        text: "Hey! Sure, I will message ...",
                        iconCls: "fa fa-facebook",
                        collapsed: true
                    },
                    {
                        title: "Followed",
                        text: "By J.R. Simpson",
                        iconCls: "fa fa-twitter"
                    }
                ]
            },
            layout: "centered"
        });
    });
</script>

</body>
</html>

To see an example of the control in action, along with all the required code, please refer to the following example.