A Simple TabView for Web Pages

• Download source files & demo project - 69.5 Kb

Introduction

We come across some situations where in we need to show say some 'n' number of related pages. Instead of displaying them as simple links, a tab view representation as discussed in this article would provide a more clear picture. This component delivers the tab control in pure DHTML, using cascading stylesheets and JavaScript to do the job. The demo project shows how to use the component in your .asp pages.

Using the code

Listed below are the steps to create the Tabview in your ASP page. The CSS styling part can be changed as per your requirement.

Create an object for the Tabview component.

'Create the Object for the TabView Component

set TabView = Server.CreateObject("TabView.Tabs")

Give the CSS class for Active Tab & In-Active Tab. If you want fixed length tabs, then specify the width, else give it as zero.

'Styles - width of each tab (give 0 to provide self width)

'Active tab style from CSS

'In active tab style from CSS

TabView.Styles 0, "ActiveTab", "InActiveTab"

Give the path of the Images folder.

'Path of the images folder

TabView.ImagePath "images"

Now simply go about adding the tabs as per the following syntax.

TabView.add "Info","Info Page","openfold.gif",
         "clsdfold.gif","Info_Page.asp"

Some points on the usage:

• The tabs will be displayed in the order in which they are added as above.
• Different images can be used for Active & In-Active tabs.
• Any query string value can be added to the page to be redirected to, E.g. as follows:

  TabView.add "Info","Info Page","openfold.gif","clsdfold.gif",
    "Info_Page.asp?Query=New_Page"

• The <FORM> tag in all the tabbed pages should follow POST method.
• A hidden field hdnQS is needed inside the <FORM> tag of all the tabbed pages, however the name of this hidden field can be changed.
• Redirecting to a specific tab page can also be done by calling the JavaScript function PostForm(arg1,arg2). arg1 is the tab page to redirect to and arg2 is the TABID.

  

  <A href=javascript:PostForm('Info_Page.asp','Info')>
      Take me to Information Page</A>

How to use:

• Unzip the files to the local system.
• Create a virtual directory pointing to the folder Tabview.
• Run the batch file registerDLL.bat
• Browse the directory, for e.g.: http://localhost/...<your local path>/Tabview/Info_Page.asp
• Now you have the TabView ready for your use.

Have fun!