Click here to Skip to main content
Click here to Skip to main content

A Simple TabView for Web Pages

, 17 Dec 2003
Rate this:
Please Sign up or sign in to vote.
A tab view representation of related web pages

Sample screenshot

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.

    Sample screenshot

    <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!

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Priyadharshini Sridharan
Tester / Quality Assurance
United States United States
No Biography provided

Comments and Discussions

 
QuestionTab view dll - (TabView.dll) PinmemberVenkat AK26-May-14 3:13 
QuestionLoad a specific tab? PinmemberTim Phelps19-Apr-07 2:42 
QuestionInvalid class string Pinmemberemmpergul1-Oct-06 4:19 
GeneralFree Spell Check in Asp Pinmembersingh_aash17-Jan-06 0:18 
GeneralTabview in a modal Pinmemberwetstone15-Oct-04 13:42 
GeneralRe: Tabview in a modal PinmemberPriyadharshini Sridharan15-Oct-04 13:48 
GeneralSource Code for DLL PinmemberArkady Geltzer14-Sep-04 8:25 
GeneralBAD .dll PinmemberMobasoft24-Aug-04 11:38 
GeneralASP Pinmembersuman_sunil5-Feb-04 4:27 
GeneralZip file download link broken Pinmemberchaycock18-Dec-03 4:58 
QuestionComparaison with the Internet Web control from asp.net ? PinmemberJonathan de Halleux18-Dec-03 3:22 
GeneralBroken links PinmemberJonathan de Halleux18-Dec-03 3:11 
GeneralRe: Broken links PineditorMarc Clifton18-Dec-03 3:18 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140827.1 | Last Updated 18 Dec 2003
Article Copyright 2003 by Priyadharshini Sridharan
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid