Easy Client Side TabStrip
A rich client side TabStrip
Introduction
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 ofTabMenu
, thisid
will be used in the functionpreInitCoolTab
.Note that if you want, you can have more than one tab. Suppose you have two
div
tags as defined above, have in turnid: coolTab1
andcoolTab2
, you only need to add theid
of the tab to the functionpreInitCoolTab.
arrTab
is the array which contains every returnedCoolTab
object.arrTab = preInitCoolTab("coolTab1", "coolTab2"); // arrTab has 2 CoolTab objects. You can access them: arrTab[0] and arrTab[1]
MultiPageID
: If you want to useTab
to control objects contained inmultiPage
, each tab item will indicate a page, you only need to add the id ofmultiPage
as an initialized parameter ofCoolTab
. I use each div tag as a splitter to separate "pages" inmultiPage
.ImageUrl
: Link to Image folder used inCoolTab
ClientSideOnLoadCompleted
: Event which works in non-synchronous order, it will fire when the process of reading data from the XML file is completed, andCoolTab
will be rendered. The users can define functions which will work when load has completed.ClientSideOnClick
: Event which appears when aTabItem
is clicked. Similarly, users can design functions to control the actions that will take place when aTabItem
is clicked.SiteMap
: Here, I use an XML file to createTabItem
s forCoolTab
. SiteMap shows the link to the XML file. Information in the XML file is to be used as below:<Tabs> <TabItem ID="aspx" Text="ASPX File" LeftIcon="i_aspx.gif" Selected="true" Enabled="true" Target="frame1" NavigatorUrl="google.com"/> <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"/> </Tabs>
Let us look at the first TabItem
(object). The most important properties are supplied:
Selected = true/false
shows which defaultTabItem
is chosen initiallyEnabled = true/false
shows the state of thisTabItem
NavigatorUrl
: If this property exists,TabItem
will have a link, and be accompanied by a target which the link will be loaded in.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
ofCoolTab
(object):Var oCoolTab = arrTab[0]; alert(oCoolTab.items[0].Keys["YourAttribute"]);
Class Members
CoolTab Class
Properties
DataSource
: virtual path to the URL or XML documentitems
: a collection ofTabItem
MultiPage
: holds ID of invoked multipageImageBaseUrl
: virtual path to the image folderdefaultCss
:className
of CSS that is applied to currentTabItem
hoverCss
:className
of CSS that is applied to currentTabItem
selectedCss
:className
of CSS that is applied to currentTabItem
disabledCss
:className
of CSS that is applied to currentTabItem
Methods
DataBind
: binds datasource to the invoked control and all its controlled childrenAddItem
: Add newTabItem
intoCoolTab
Besides creating
TabItem
using data from the XML file, users can create additional items during runtime by using the functionAddItem
ofCoolTab
(object).Var oCoolTab = arrTab[0]; Var oTabItem = new TabItem(); //initialize(id, caption, selected, enabled, url, target, leftIcon, parent) oTabItem.initialize("newTabItemID", "Caption", false, true, "http://microsoft.com", "frame1", "nothing.gif", oCoolTab); oCoolTab.AddItem(oTabItem);
FindTabItemById
: findTabItem
by itsID
Events
TabItemClickEvent
: fired when an item inCoolTab
is clickedLoadCompleteEvent
: fired whenCoolTab
has completed loading data
TabItem Class
Properties
selected
: this item is selected or notenabled
: this item is enabled or notparent
: reference to theCoolTab
that contains theTabItem
index
: index of this item in the list ofCoolTab
target
: targetlnk
:navigatorUrl
of this itemlabel
: display text
Methods
SetEnabled
: set an item to enabled or disabled modeThe following example will illustrate the way to set the first
TabItem
ofCoolTab
to a disabled state.Var oCoolTab = arrTab[0]; oCoolTab.items[0].SetEnabled(false);
ResetCss
: reset class name of item to defaultActived
:TabItem
is in activated modeDeActived
:TabItem
is in deactivated mode
Event
TabClickEvent
: fired when aTabItem
is clicked
History
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.