ItemSelected: function (sender, args: PP.TabControlArgs);
sender. Event source.
args. Event information.
The ItemSelected event is fired on selecting a tab.
Only one tab can be selected (opened) in the component at the same time. The tab opens on clicking the heading. The tab closes when another tab is selected.
To execute the example, connect the PP.js components library and the PP.css visual styles table. Create the TabControl component. Add the ItemSelected event handler:
<script type="text/javascript">
//Create the TabControl component:
var tabcontrol = new PP.Ui.TabControl({
//ID for the tag div
ParentNode: document.getElementById("tabcont1"),
Width: 300,
Height: 300,
//Path to the folder that stores images:
ImagePath: "img"
});
//Create a tab: that is, a TabItem component
var tab = new PP.Ui.TabItem({ Caption: "Tab", Content: "<div><div style='text-align:center; padding-top:70px'>Content Left</div></div>", Position: PP.LTRB.Left });
//Add this tab to the TabControl component
tabcontrol.addItem(tab);
//Add a handler for the ItemSelected event
tabcontrol.ItemSelected.add(function(sender, args) {
tab.getParent().addItem(new PP.Ui.TabItem({ Position: PP.LTRB.Right, Caption: "Tab1" }));
});
</script>
After executing the example the TabControl component is created on the HTML page. The component consists of a single tab positioned at the left. On selecting the tab, that is, on clicking the title, a tab named Tab1 is added at the right.
See also: