To execute the example, create an HTML page and perform the following operations:
1. Add links to the PP.css styles file and the PP.js, jquery.js, PP.GraphicsBase.js, PP.Charts.js script files.
2. Next in the <head> tag add a script that creates a timeline:
<script type="text/javascript">
var timeline;
$().ready(function () {
// Create a timeline
timeline = new PP.Ui.Timeline({
// Current step should have index 1
CurrentStep: 1,
ImagePath: "build/img/", // Path to icons folder
// Timeline step names
StepsNames: ["2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010"],
// Visible animation steps
StepsVisibility: [true, true, true, true, true, true, true, true, false, false, false],
// Timeline step duration
StepDuration: 500,
// Delay duration
DelayDuration: 100,
// Deny timeline return to initial state
ReturnToInitialState: false,
// Current step of timeline should change with time
ValueChangedWithTimeout: true,
// Margin values
Margin: "0,8,10,8",
Width: 600, // Timeline width
Height: 200 // Height
});
// Display timeline
timeline.show();
// Refresh timeline
timeline.refresh();
// Add timeline into block with the "timeline" identifier
timeline.addToNode(document.getElementById("timeline"));
});
</script>
To execute custom scripts for the timeline, including the examples given in the properties description pages, place the code after the script specified above or in the browser console.
3. In the <body> tag place a block with the "timeline" identifier to store the created timeline:
<div id="timeline" style="border: #CCCCCC 1px solid; width: 600px; height: 40px;"> </div>
After executing the example the PP.Ui.Timeline component is placed on the HTML page:
If component width is exceeded, navigation arrows are added:
See also: