TabControl.BeforeAddItem

Syntax

BeforeAddItem: function (sender, args: PP.TabControlArgs);

Parameters

sender. Event source.

args. Event information.

Description

The BeforeAddItem event occurs before adding a new tab.

Comments

The event does not occur when tabs are added using the TabControl.addItem method, only when they are added with a special tab that contains the plus sign +.

Example

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({
  //Identifier for the div tag             
   ParentNode: document.getElementById("tabcont1"),
               Width: 300,
               Height: 200,
                //Path to the folder with images:
               ImagePath: "img"          
});
//Add an invisible tab to the TabControl component:  
tabcontrol.addItem(new PP.Ui.TabItem({
   Position: PP.LTRB.Top,
   IsVisible: false
}));
//Add BeforeAddItem event handler:  
tabcontrol.BeforeAddItem.add(onBeforeAddItem);  
var ItemsInc = 0;
//BeforeAddItem event handler:  
function onBeforeAddItem(sender, args) {          
   if (ItemsInc > 5) {                  
      args.Cancel = true;                 
      alert("The 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 that is used to add new tabs. Clicking the tab with the + sign adds a new tab with the following header: Tab + tab sequence number, and its contents with the text: Tab contents + tab sequence number. After six new tabs are added (0-5) clicking the + displays the following message: The tab is not added. Only six new tabs can be added. The new tab will not be added.

See also:

TabControl