Click here to Skip to main content
12,447,625 members (64,369 online)
Click here to Skip to main content
Add your own
alternative version

Stats

83.2K views
1.3K downloads
29 bookmarked
Posted

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

You may also be interested in...

Pro
Pro

Comments and Discussions

 
QuestionTab view dll - (TabView.dll) Pin
Venkat AK26-May-14 3:13
memberVenkat AK26-May-14 3:13 
QuestionLoad a specific tab? Pin
Tim Phelps19-Apr-07 2:42
memberTim Phelps19-Apr-07 2:42 
QuestionInvalid class string Pin
emmpergul1-Oct-06 4:19
memberemmpergul1-Oct-06 4:19 
GeneralFree Spell Check in Asp Pin
singh_aash17-Jan-06 0:18
membersingh_aash17-Jan-06 0:18 
GeneralTabview in a modal Pin
wetstone15-Oct-04 13:42
memberwetstone15-Oct-04 13:42 
GeneralRe: Tabview in a modal Pin
Priyadharshini Sridharan15-Oct-04 13:48
memberPriyadharshini Sridharan15-Oct-04 13:48 
GeneralSource Code for DLL Pin
Arkady Geltzer14-Sep-04 8:25
memberArkady Geltzer14-Sep-04 8:25 
GeneralBAD .dll Pin
Mobasoft24-Aug-04 11:38
memberMobasoft24-Aug-04 11:38 
GeneralASP Pin
suman_sunil5-Feb-04 4:27
membersuman_sunil5-Feb-04 4:27 
GeneralZip file download link broken Pin
chaycock18-Dec-03 4:58
memberchaycock18-Dec-03 4:58 
QuestionComparaison with the Internet Web control from asp.net ? Pin
Jonathan de Halleux18-Dec-03 3:22
memberJonathan de Halleux18-Dec-03 3:22 
GeneralBroken links Pin
Jonathan de Halleux18-Dec-03 3:11
memberJonathan de Halleux18-Dec-03 3:11 
GeneralRe: Broken links Pin
Marc Clifton18-Dec-03 3:18
editorMarc Clifton18-Dec-03 3:18 

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.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160811.3 | Last Updated 18 Dec 2003
Article Copyright 2003 by Priyadharshini Sridharan
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid