TabControl.ItemSelected

Syntax

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

Parameters

sender. Event source.

args. Event information.

Description

The ItemSelected event is fired on selecting a tab.

Comments

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.

Example

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({
            //Identifier for the div tag
            ParentNode: document.getElementById("tabcont1"),
            Width: 300,
            Height: 300,
            //Path to the folder with images:
            ImagePath: "img"
        });
    //Create a tab - the 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 a tab for 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:

TabControl