removeTick(name_index: String | Number);
name_index. Name or index of the element to be removed.
The removeTick method removes tick mark from timeline by name or index.
To execute the example, the HTML page must contain links to the PP.js and PP.GraphicsBase.js script files and PP.css styles file in the <body> tag of HTML page of the <div> element with the "timeline" identifier. It is required to add calling of the createTimeline() function to the "onload" event of the <body> tag. Add a timeline to the page and implement the TicksChanged and TicksChanging event handlers:
var timeline;
function createTimeline() {
// Create a timeline
timeline = new PP.Ui.Timeline({
// Set parent element
ParentNode: "timeline",
// Set size
Width: 250,
// Set handlers for timeline tick mark change events
TicksChanged: function (sender, args) {
if (args.AddedTick) {
console.log("The " + args.AddedTick + " element is added to the position: " + args.AddedIndex);
} else if (args.RemovedTick) {
console.log("The " + args.RemovedTick + " element is removed from the position: " + args.RemovedIndex);
}
},
TicksChanging: function (sender, args) {
if (args.AddedTick) {
console.log("The " + args.AddedTick + " element is added to the position: " + args.AddedIndex);
} else if (args.RemovedTick) {
console.log("The " + args.RemovedTick + " element is removed from the position: " + args.RemovedIndex);
}
},
});// Add several tick marks to timeline
timeline.beginUpdate();
for (var i = 0; i < 4; i++) {
timeline.addTick(""+(2010+i), i);
}
timeline.endUpdate();
}
As a result, a timeline with four tick marks is added to the HTML page:
The console displays information about changing of timeline tick marks:
The 2010 element is being added to the position: 0
The 2010 element is added to the position: 0
The 2011 element is being added to the position: 1
The 2011 element is added to the position: 1
The 2012 element is being added to the position: 2
The 2012 element is added to the position: 2
The 2013 element is being added to the position: 3
The 2013 element is added to the position: 3
Invert timeline:
// Invert timeline timeline.setInverse(True);
As a result, timeline tick marks are inverted:
Remove the first timeline tick mark:
// Remove the first timeline tick mark timeline.removeTick(0);
As a result, the first timeline tick mark is removed:
The console displays information about changing of timeline tick marks:
The 2010 element is being removed from the position: 0
The 2010 element is removed from the position: 0
See also: