BeforeAddItem: function (sender, args: PP.TabControlArgs);
sender. Event source.
args. Event information.
The BeforeAddItem event is fired before adding a new tab.
The event is not fired when tabs are added using the addItem method, only when they are added with a special tab that contains the plus sign +.
To execute the example, connect the PP.js components library and the PP.css visual styles table. Create the TabControl component that includes a tab for adding new tabs. Add an event handler for BeforeAddItem:
//Create the TabControl component:
var tabcontrol = new PP.Ui.TabControl({
//ID for the div tag
ParentNode: document.getElementById("tabcont1"),
Width: 300,
Height: 200,
//Path to the images folder:
ImagePath: "img"
});
//Add an invisible tab to the TabControl component:
tabcontrol.addItem(new PP.Ui.TabItem({
Position: PP.LTRB.Top,
IsVisible: false
}));
//Add a handler for the BeforeAddItem event:
tabcontrol.BeforeAddItem.add(onBeforeAddItem);
var ItemsInc = 0;
//BeforeAddItem event handler:
function onBeforeAddItem(sender, args) {
if (ItemsInc > 5) {
args.Cancel = true;
alert("Tab is not added. Only six new tabs can be added.");
}
else {
args.Item.setCaption("Tab" + ItemsInc);
args.Item.setContent("<div><div style='text-align:center; padding-top:70px'>Tab contents " + ItemsInc + "</div></div>");
ItemsInc++;
}
};
After executing the example, the HTML page will contain the TabControl component that consists of an invisible tab and the tab used to add new tabs. Clicking the tab with the sign + adds a new tab with the following heading: Tab + tab sequence number, and its contents with the text: Tab content + tab sequence number. After six new tabs are added (0-5) clicking the + displays the following message: The tab is no added. Only 6 new tabs can be added. The new tab is not added.
Seebsp;also: