Click here to Skip to main content
15,396,019 members
Articles / Web Development / HTML
Posted 8 Dec 2006


58 bookmarked

Easy Client Side TabStrip

Rate me:
Please Sign up or sign in to vote.
4.72/5 (29 votes)
8 Dec 2006CPOL4 min read
A rich client side TabStrip

Sample Image - CoolTab.jpg


TabMenu is a component which almost all web developers have to work with. On creating a website with Visual Studio and a component tool, it's simple for me to create a fine and convenient TabMenu for design. And what about creating a TabMenu with similar functions using JavaScript, just as we use components on ASP.NET? That is, however, a different story.

This article is aimed at providing users with the best method to have a TabMenu that has the most numerous functions and the least code, especially allowing users to define the functions that TabMenu will provide.

Using the Code

All users need to do is to insert this code line where they want the TabMenu to appear:

<div id="coolTab1" MultiPageID="Pages" SiteMap="tabData.xml" ImageUrl="images/"
ClientSideOnLoadCompleted="onLoadComplete" ClientSideOnClick="onClick"></div>

and a script code as below:

window.onload = function() { arrTab = preInitCoolTab("coolTab1"); }

Now, we will talk about the parameters of a TabMenu

  • id: a unique identifier of TabMenu, this id will be used in the function preInitCoolTab.

    Note that if you want, you can have more than one tab. Suppose you have two div tags as defined above, have in turn id: coolTab1 and coolTab2, you only need to add the id of the tab to the function preInitCoolTab.

  • arrTab is the array which contains every returned CoolTab object.
    arrTab = preInitCoolTab("coolTab1", "coolTab2");
    // arrTab has 2 CoolTab objects. You can access them: arrTab[0] and arrTab[1]
  • MultiPageID: If you want to use Tab to control objects contained in multiPage, each tab item will indicate a page, you only need to add the id of multiPage as an initialized parameter of CoolTab. I use each div tag as a splitter to separate "pages" in multiPage.
  • ImageUrl: Link to Image folder used in CoolTab
  • ClientSideOnLoadCompleted: Event which works in non-synchronous order, it will fire when the process of reading data from the XML file is completed, and CoolTab will be rendered. The users can define functions which will work when load has completed.
  • ClientSideOnClick: Event which appears when a TabItem is clicked. Similarly, users can design functions to control the actions that will take place when a TabItem is clicked.
  • SiteMap: Here, I use an XML file to create TabItems for CoolTab. SiteMap shows the link to the XML file. Information in the XML file is to be used as below:
        <TabItem ID="aspx" Text="ASPX File" LeftIcon="i_aspx.gif"
    Selected="true" Enabled="true" Target="frame1" NavigatorUrl=""/>
        <TabItem ID="xml" Text="XML File" LeftIcon="i_xml.gif"/>
        <TabItem ID="css" Text="CSS File" LeftIcon="i_css.gif"/>
        <TabItem ID="cs" Text="CS File" LeftIcon="i_cs.gif" />
        <TabItem ID="vb" Text="VB File" LeftIcon="i_vb.gif"/>

Let us look at the first TabItem (object). The most important properties are supplied:

  1. Selected = true/false shows which default TabItem is chosen initially
  2. Enabled = true/false shows the state of this TabItem
  3. NavigatorUrl: If this property exists, TabItem will have a link, and be accompanied by a target which the link will be loaded in.
  4. Target: Shows the target of the link. Besides, you can define additional properties and here is the access approach to properties that you define in the XML file. For example:
    <TabItem ID="id" Text="text" LeftIcon="icon.gif" YourAttribute="Value"/>

    Suppose it is the first TabItem of CoolTab (object):

    Var oCoolTab = arrTab[0];

Class Members

CoolTab Class


  • DataSource: virtual path to the URL or XML document
  • items: a collection of TabItem
  • MultiPage: holds ID of invoked multipage
  • ImageBaseUrl: virtual path to the image folder
  • defaultCss: className of CSS that is applied to current TabItem
  • hoverCss: className of CSS that is applied to current TabItem
  • selectedCss: className of CSS that is applied to current TabItem
  • disabledCss: className of CSS that is applied to current TabItem


  • DataBind: binds datasource to the invoked control and all its controlled children
  • AddItem: Add new TabItem into CoolTab

    Besides creating TabItem using data from the XML file, users can create additional items during runtime by using the function AddItem of CoolTab (object).

    Var oCoolTab = arrTab[0];
    Var oTabItem = new TabItem();
    //initialize(id, caption, selected, enabled, url, target, leftIcon, parent)
    oTabItem.initialize("newTabItemID", "Caption", false, true,
    "", "frame1", "nothing.gif", oCoolTab);
  • FindTabItemById: find TabItem by its ID


  • TabItemClickEvent: fired when an item in CoolTab is clicked
  • LoadCompleteEvent: fired when CoolTab has completed loading data

TabItem Class


  • selected: this item is selected or not
  • enabled: this item is enabled or not
  • parent: reference to the CoolTab that contains the TabItem
  • index: index of this item in the list of CoolTab
  • target: target
  • lnk: navigatorUrl of this item
  • label: display text


  • SetEnabled: set an item to enabled or disabled mode

    The following example will illustrate the way to set the first TabItem of CoolTab to a disabled state.

    Var oCoolTab = arrTab[0];
  • ResetCss: reset class name of item to default
  • Actived: TabItem is in activated mode
  • DeActived: TabItem is in deactivated mode


  • TabClickEvent: fired when a TabItem is clicked


This is my first article. If you find it useful, please vote for me.

P.S.: Thanks to Mr Tuan NA for his XML.js to work with XML file in the Mozilla browser.
And thanks to Ms Nhung, I love you very much.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Web Developer
Vietnam Vietnam
No Biography provided

Comments and Discussions

Generalits superb Pin
woodrofe3-Nov-08 18:07
Memberwoodrofe3-Nov-08 18:07 
GeneralSafari & Chrome compatible Pin
somestupidname11-Sep-08 5:13
Membersomestupidname11-Sep-08 5:13 
Generalwonderful Pin
lovek45c16-Jul-07 23:02
Memberlovek45c16-Jul-07 23:02 
GeneralThe .zip file seems to be damaged Pin
Pascualito6-May-07 7:48
professionalPascualito6-May-07 7:48 
GeneralRe: The .zip file seems to be damaged Pin
HoangKC7-May-07 17:37
MemberHoangKC7-May-07 17:37 
GeneralASP.NET wrapper Pin
miah alom12-Dec-06 9:38
Membermiah alom12-Dec-06 9:38 
Thanks for the great article.
I was hoping if there is a ASP.NET wrapper available for this. That would make it very useful.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.