WebTabSet supports the ability to navigate jagged hierarchies where the depth of each tab path can be different.
The children items for a symmetric, non-jagged hierarchy can be described as follows:
{ Items: ["ItemA", "ItemB", "ItemC"], Children: true }
This creates a tab row with three items.
When any of these items are expanded, a new tab row is made available for selecting their children items.
This occurs because of the inclusion of the optional "Children" property.
If this property was not present or set to
false, all these items would be terminal tabs.
The children items for a jagged hierarchy can be described as follows:
{ Items: ["ItemA", { Item: "ItemB", Children: true }, "ItemC"] }
This also creates a tab row with three items.
However, they are different because only the middle item can have children items!
This occurs because the string array element is replaced with a new object that contains the required properties.
The "Item" property specifies the name of the item, and the "Children" property set to
true indicates that it has children.
The first and last items are terminal tabs.
If children options exist for an item, a custom arrow image is displayed to the user to indicate these sub-options are available.
In this sample the WebTabSet is allowing you to select a custom beer, organized by its type.
Clicking the "Submit" button will display the full path for your selection below:
Click the "Reset" link to clear your selection.