About the TabStrip WebControls Client Behavior
The TabStrip behavior, one of the Windows Internet Explorer WebControls Client Behaviors, creates a collection of Tab and TabSeparator objects. You can author the tabs declaratively through markup or dynamically through script. This element behavior also generates the rich client experience in uplevel browsers (in this case, Microsoft Internet Explorer 5.5 or later) as part of the WebControls Server Controls.
This document includes the following sections.
- Introduction
- Prerequisites
- TabStrip Elements
- Writing a Simple TabStrip
- Getting and Setting Tab and TabSeparator Attributes
- Formatting the TabStrip
- Using TabStrip with the MultiPage Behavior
- Using TabStrip without the MultiPage Behavior
- Generating Tabs Dynamically
- Related Topics
Introduction
The TabStrip behavior is a collection of tabs. It complements the MultiPage behavior by providing easy access to pages.
TabStrip, like the other WebControls Client Behaviors, is an element behavior. It is a viewlink. This behavior is lightweight, and its contents are treated as literal content.
Prerequisites
You must download and install the WebControls Client Behaviors at Internet Explorer WebControls Download. The WebControls Client Behaviors require Internet Explorer 5.5 or later.
To make the best use of this article, you should be familiar with the basics of Dynamic HTML (DHTML) and element behaviors. Code samples are written in Microsoft JScript.
TabStrip Elements
You can use this behavior on a Web page by inserting the TABSTRIP custom element into your HTML markup. Properties and methods are accessible through the ID of the custom element.
The TABSTRIP element can contain two types of child elements—TAB and TABSEPARATOR. The TAB represents the clickable area on a tabstrip. The TABSEPARATOR is the space between the tabs. Each of these child elements can appear inside the TABSTRIP zero or more times. Do not nest these elements.
Writing a Simple TabStrip
This section shows you how to use markup to insert a TabStrip component with five TAB and four TABSEPARATOR elements into an HTML page.
As with any element behavior, start by declaring a namespace and then importing the behavior into the namespace.
<HTML XMLNS:ts>
<HEAD>
<?IMPORT NAMESPACE="ts" IMPLEMENTATION="tabstrip.htc"/>
</HEAD>
Add the custom element into the page markup where you want the tabstrip to appear.
<ts:TABSTRIP></ts:TABSTRIP>
Use the TAB tag to add tabs to the component and the TABSEPARATOR tag to insert space between the tabs.
<ts:TABSTRIP>
<ts:TAB TEXT="Tab 1"/>
<ts:TABSEPARATOR TEXT="|"/>
<ts:TAB TEXT="Tab 2"/>
<ts:TABSEPARATOR TEXT="|"/>
<ts:TAB TEXT="Tab 3"/>
<ts:TABSEPARATOR TEXT="|"/>
<ts:TAB TEXT="Tab 4"/>
<ts:TABSEPARATOR TEXT="|"/>
<ts:TAB TEXT="Tab 5"/>
</ts:TABSTRIP>
Click this button to see the full example.
Code example: https://samples.msdn.microsoft.com/workshop/samples/webcontrols/tabstrip/tsSimpleExample.htm
You can use the TEXT attribute to add a label to a TAB, but it is limited to plain text. The label of a TAB can also be the element's contents. The contents can contain HTML markup. Similarly, you can add text and markup to a TABSEPARATOR.
The following example shows a tab label, which combines text and markup, as the contents of a TAB element.
<ts:TAB><I>Tab 1</I></ts:TAB>
Getting and Setting Tab and TabSeparator Attributes
The TabStrip object has two collections: one for Tab objects and the other for Tab and TabSeparator objects together. The index for each collection starts at 0.
The getItem method reads the collection of Tab and TabSeparator objects and returns the object at a specified index. The getTab method reads a collection different from the getItem method—one consisting of just Tab objects. The method returns the Tab object at a specified index. Both are methods on the TabStrip object.
The following example uses the getTab method to retrieve the first Tab object in a collection of tabs. The ID of the parent TabStrip object is oTabStrip.
oTab = oTabStrip.getTab(0);
Attributes of the TAB and TABSEPARATOR elements are accessible in script with the getAttribute and setAttribute methods. The following code sets the contents of the TAB oTab to the word "Summary".
oTab.setAttribute("innerHTML","Summary");
In the following example, the label style of the selected tab changes from italics to bold when you click the button under the tabstrip. The button's onclick handler passes the index number of the currently selected tab, the value of the selectedIndex property, to the function. The function uses the index to retrieve a Tab object and then to get and set its attributes.
<SCRIPT>
function setTabStyleBold(index)
{
oTab = oTabStrip.getTab(index);
sTabLabel = oTab.getAttribute("innerText");
oTab.setAttribute("innerHTML","<B>" + sTabLabel + "</B>");
}
</SCRIPT>
<ts:TABSTRIP ID="oTabStrip">
<ts:TAB><I>Tab 1</I></ts:TAB>
<ts:TABSEPARATOR>|</ts:TABSEPARATOR>
<ts:TAB><I>Tab 2</I></ts:TAB>
<ts:TABSEPARATOR>|</ts:TABSEPARATOR>
<ts:TAB><I>Tab 3</I></ts:TAB>
</ts:TABSTRIP>
<BUTTON onclick="setTabStyleBold(oTabStrip.selectedIndex)">Bold the selected tab</BUTTON>
Code example: https://samples.msdn.microsoft.com/workshop/samples/webcontrols/tabstrip/tsGetTabExample.htm
Formatting the TabStrip
Two factors determine the rendered formatting of tabs and separators: where the style for the element is defined, and the state of the element.
There is a hierarchy for defining styles for a TAB or TABSEPARATOR.
- Built-in—The TabStrip behavior defines styles that apply to the tab and separator.
- Tab Group—These styles are defined on the TABSTRIP element.
- Tab Element—These styles are defined on the TAB or TABSEPARATOR element.
If you set no style attributes, the behavior renders the built-in style. A style attribute on the custom element overrides a built-in style. And a style set on the child element overrides both a built-in style and one set on the custom element.
A TAB element has three states.
- Default—The TAB is neither hovered over nor selected.
- Hovered—The mouse pointer is over the TAB and it is not selected.
- Selected—The TAB is the selected tab on the tabstrip.
You can define styles for each state. Changing the look of a tab to reflect its state is a good UI practice. For example, if the mouse pointer is over an unselected TAB, the HOVERSTYLE applies to the TAB rather than the DEFAULTSTYLE. Or, if the mouse pointer is over the selected TAB, the style remains the SELECTEDSTYLE.
A TABSEPARATOR element has the same three states. The TABSEPARATOR elements on either side of a TAB share the state of the TAB. For example, if the second tab in a tabstrip is selected, then both the separators to the left and right are also in the selected state.
The following example shows a style scheme. In it, the TAB and TABSEPARATOR styles and TABSEPARATOR images are set on the TABSTRIP. Tab images cannot be set on the TABSTRIP.
<ts:TABSTRIP
TABDEFAULTSTYLE= "background-color:blue;
color:yellow;
font-weight:bold;
text-align:center;
width:70px;"
TABHOVERSTYLE= "background-color:black;
color:#ivory;
font-weight:bold;"
TABSELECTEDSTYLE="background-color:white;
color:blue;
font-weight:bold;
border:solid blue 1px;"
SEPDEFAULTSTYLE= "background-color:gray;
width:7px;
text-align:center;"
SEPDEFAULTIMAGEURL="images/bar.gif"
SEPHOVERSTYLE="background-color:lightgrey;"
SEPHOVERIMAGEURL="images/barhover.gif"
SEPSELECTEDSTYLE="background-color:yellow;"
SEPSELECTEDIMAGEURL="images/baropen.gif">
<ts:TABSEPARATOR/>
<ts:TAB TEXT=" Tab 1"
DEFAULTIMAGEURL="images/folder.gif"
SELECTEDIMAGEURL="images/folderopen.gif" />
<ts:TABSEPARATOR/>
<ts:TAB TEXT=" Tab 2"
DEFAULTIMAGEURL="images/folder.gif"
SELECTEDIMAGEURL="images/folderopen.gif" />
<ts:TABSEPARATOR/>
<ts:TAB TEXT=" Tab 3"
DEFAULTIMAGEURL="images/folder.gif"
SELECTEDIMAGEURL="images/folderopen.gif" />
<ts:TABSEPARATOR/>
<ts:TAB TEXT=" Tab 4"
DEFAULTIMAGEURL="images/folder.gif"
SELECTEDIMAGEURL="images/folderopen.gif" />
<ts:TABSEPARATOR/>
<ts:TAB TEXT=" Tab 5"
DEFAULTIMAGEURL="images/folder.gif"
SELECTEDIMAGEURL="images/folderopen.gif" />
<ts:TABSEPARATOR/>
</ts:TABSTRIP>
Code example: https://samples.msdn.microsoft.com/workshop/samples/webcontrols/tabstrip/tsStyleExample.htm
Using TabStrip with the MultiPage Behavior
The TabStrip behavior complements the MultiPage behavior well. Tabs provide a unifying UI for switching between one PageView and another.
To use these behaviors together, first assign the ID of the MULTIPAGE to the TARGETID attribute on the TABSTRIP. This associates the two behaviors together. Next, insert one TAB element into the TABSTRIP for each PAGEVIEW element in the MULTIPAGE.
There is a 1:1 correspondence between TAB and PAGEVIEW elements. The first TAB displays the first PAGEVIEW, the second TAB the second PAGEVIEW, and so on. Extra TAB elements render but do nothing. A PAGEVIEW without a corresponding TAB cannot be accessed by the TabStrip behavior.
See About the MultiPage WebControls Client Behavior to find out more about the MultiPage behavior.
<HTML XMLNS:mp XMLNS:ts>
<HEAD>
<?IMPORT NAMESPACE="mp" IMPLEMENTATION="multipage.htc"/>
<?IMPORT NAMESPACE="ts" IMPLEMENTATION="tabstrip.htc"/>
</HEAD>
<BODY>
<ts:TABSTRIP ID="oTS" TARGETID="oMP">
<ts:TAB TEXT="Page 1" />
<ts:TAB TEXT="Page 2" />
<ts:TAB TEXT="Page 3" />
</ts:TABSTRIP>
<mp:MULTIPAGE ID="oMP">
<mp:PAGEVIEW ID="page0">
This is the first page in the multipage.
</mp:PAGEVIEW>
<mp:PAGEVIEW ID="page1">
This is the second page in the multipage.
</mp:PAGEVIEW>
<mp:PAGEVIEW ID="page2">
This <B>page</B> contains <I>HTML markup</I>.
</mp:PAGEVIEW>
</mp:MULTIPAGE>
</BODY>
</HTML>
Code example: https://samples.msdn.microsoft.com/workshop/samples/webcontrols/multipage/mpTabExample.htm
Now try changing the UI by moving the TABSTRIP around in relation to the MULTIPAGE. To display the TABSTRIP beneath the MULTIPAGE, switch the order of the two custom elements in the markup.
To display the tabs to the side of the multipage, set the ORIENTATION attribute on the TABSTRIP to vertical and wrap the components in a table to position them.
<TABLE CELLPADDING="0" CELLSPACING="0">
<TR VALIGN="top" HEIGHT="150px">
<TD>
<ts:TABSTRIP ID="oTS" TARGETID="oMP" STYLE="height:100%;"
TABDEFAULTSTYLE="width:60;border:solid 1px black;padding:5px;"
TABHOVERSTYLE="color:blue;"
TABSELECTEDSTYLE="border:solid 1px black;border-right:none"
SEPDEFAULTSTYLE="border-right:solid 1px #000000;" ORIENTATION="vertical">
<ts:TAB TEXT="Page 1"/>
<ts:TABSEPARATOR/>
<ts:TAB TEXT="Page 2"/>
<ts:TABSEPARATOR/>
<ts:TAB TEXT="Page 3"/>
<ts:TABSEPARATOR DefaultStyle="height:100%"/>
</ts:TABSTRIP>
</TD>
<TD WIDTH="100%">
<mp:MULTIPAGE ID="oMP" STYLE="border:solid 1px
#000000;border-left:none;padding:10px;height:100%;width:100%;">
<mp:PAGEVIEW ID="page0">
This is the first page in the multipage.
</mp:PAGEVIEW>
<mp:PAGEVIEW ID="page1">
This is the second page in the multipage.
</mp:PAGEVIEW>
<mp:PAGEVIEW ID="page2">
This <B>page</B> contains <I>HTML markup</I>.
</mp:PAGEVIEW>
</mp:MULTIPAGE>
</TD>
</TR>
</TABLE>
Code example: https://samples.msdn.microsoft.com/workshop/samples/webcontrols/multipage/mpTabVertExample.htm
Using TabStrip without the MultiPage Behavior
A MultiPage behavior, associated with a TabStrip, switches between multiple pages depending on which tab is clicked. You can achieve the same effect with a static DIV element by passing different text into it when a tab is clicked.
The onselectedindexchange event fires whenever a different tab is selected. In this example, the TABSTRIP handles the event and passes the index of the selected tab to the loadData function. Based on the index, the function changes the contents of a DIV element.
For clarity, the style attributes have been removed from the markup in following example.
<SCRIPT>
function loadData(index)
{
var sData = "";
switch(index)
{
case 0:
sData = "This is the first page.";
oDataArea.innerHTML = sData;
break;
.
.
.
}
}
</SCRIPT>
<ts:TABSTRIP ID="oTS" onselectedindexchange="loadData(this.selectedIndex)">
<ts:TABSEPARATOR/>
<ts:TAB TEXT=" Tab 1"/>
<ts:TABSEPARATOR/>
<ts:TAB TEXT=" Tab 2"/>
<ts:TABSEPARATOR/>
<ts:TAB TEXT=" Tab 3"/>
<ts:TABSEPARATOR/>
<ts:TAB TEXT=" Tab 4"/>
<ts:TABSEPARATOR/>
<ts:TAB TEXT=" Tab 5"/>
<ts:TABSEPARATOR/>
</ts:TABSTRIP>
<DIV ID="oDataArea"></DIV>
Code example: https://samples.msdn.microsoft.com/workshop/samples/webcontrols/tabstrip/tsMPLessExample.htm
Generating Tabs Dynamically
You can create a tabstrip entirely through script. The examples in this section come from a single example that generates both a multipage and a tabstrip dynamically. The discussion in this section focuses on the TabStrip behavior. See Generating Pages Dynamically for a discussion of the MultiPage behavior that uses the same example code.
The following example creates a new namespace and imports the TabStrip behavior into it. It then dynamically creates the TABSTRIP element, sets the TARGETID to the ID of the MULTIPAGE, and appends TABSTRIP to a tag in the markup whose ID is oReport.
function importBehaviors()
{
tsNS = document.namespaces.add("ts","tabstrip.htc");
tsNS.doImport("tabstrip.htc");
var oTabStrip = document.createElement("ts:TABSTRIP");
oTabStrip.id = "dynaTab";
oTabStrip.targetID = "dynaPage";
oReport.appendChild(oTabStrip);
}
The next example shows you how to dynamically create a new TAB element at the end of the TabStrip item collection. The object represented by dynaTab is the TABSTRIP custom element. The value of pageID is the name of the page, and thus the name of the tab, for this instance of the TAB element.
The variable tabElements receives the integer value of the total number of items in the collection from the numItems property of the TabStrip object. The createTabAt method creates a new TAB element within the item collection at the specified index. In this case, it always adds the new tab to the end of the collection.
The TabStrip behavior requires that you use the createTabAt method to dynamically create new TAB elements. This contrasts with how the TABSTRIP custom element itself was created in this example.
Next, the function passes the value of pageID to the TEXT attribute of TAB. Finally, it calls another function to add a TABSEPARATOR element immediately after the TAB. In that function, the createSeparatorAt creates a new TABSEPARATOR element at the end of the TabStrip item collection.
function addTab(pageID)
{
var tabElements = dynaTab.numItems;
var oNewTab = dynaTab.createTabAt(dynaTab.numItems);
oNewTab.setAttribute("text", pageID);
addTabSeparator();
}
function addTabSeparator()
{
var tabElements = dynaTab.numItems;
var oNewSep = dynaTab.createSeparatorAt(tabElements);
}
Click this button to see the full example. This code sample dynamically creates TABSTRIP and MULTIPAGE custom elements, reads data from an XML source file, and populates the tab labels and pages.
Code example: https://samples.msdn.microsoft.com/workshop/samples/webcontrols/multipage/DynaPage.htm