mr_unreliable
Wed Dec 06 20:41:47 CST 2006
This is a multi-part message in MIME format.
--------------070201080904040109050503
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
Content-Transfer-Encoding: 7bit
The attached (somewhat rough) code demonstrates how to make
"tabs" out of html buttons.
(Note: there is a more "polished" version, but that contains
a lot of other distractions, such that the tab generating
code is somewhat obscured).
cheers, jw
____________________________________________________________
You got questions? WE GOT ANSWERS!!! ..(but,
no guarantee the answers will be applicable to the questions)
abcd wrote:
> I have 3 ASP pages. I want to create a simple Tabbed layout in DHTML or some
> FREE ware code which will host these 3 pages in 3 different tabs...Do you
> know if such free code to create tab available...any samples will help
>
> Thanks
>
>
--------------070201080904040109050503
Content-Type: text/plain;
name="testHTMLTabs.htm.txt"
Content-Transfer-Encoding: 7bit
Content-Disposition: inline;
filename="testHTMLTabs.htm.txt"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus 1.2">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="vbScript">
<!--
' --- execute NOW (gloal variables) --------------
Const tabAlign = "Left"
Dim saURLs : saURLs = Array("MSDN|
http://msdn.microsoft.com", _
"CNN|
http://www.cnn.com", _
"NASA|
http://www.nasa.gov", _
"Google|
http://www.google.com|*", _
"Forbes|
http://www.forbes.com")
Dim cTabs : cTabs = UBound(saURLs)
' --- end of global variables --------------------
Sub tabLoad()
Dim sHTML : sHTML = "<P ALIGN=" & tabAlign & ">"
Dim i ' as integer
Dim saTAB ' as string array
' add onMouseOver, onMouseOut...
For i = 0 to cTabs ' create button control(s)
saTAB = Split(saURLs(i),"|")
' msgBox(saTAB(0) & saTAB(1))
sHTML = sHTML & "<BUTTON ID=tab" & CStr(i) _
& " CLASS='tabOff' VALUE=" & saTAB(1) _
& " onClick='tabOnClick(" & CStr(i) & ")'>" _
& saTab(0) & "</BUTTON>"
' if (i = 0) then msgbox(sHTML)
Next ' i
divTabButtons.innerHTML = sHTML ' insert tab buttons into first div
Call tabOnClick(3) ' set the 4th tab as default...
End Sub ' tabLoad
Sub tabOnClick(iTab)
Dim oElement ' as object
Dim i ' as integer
For i = 0 to cTabs ' set ALL tabs to "taboff" style...
' msgbox(i)
Set oElement = document.getElementById("tab" & CStr(i))
oElement.className = "tabOff"
Next ' i
' then, highlight the selected tab...
Set oElement = document.getElementById("tab" & CStr(iTab))
oElement.className = "tabOn"
' and setup the appropriate contents of the "tab" (i.e., iframe it)...
' var tab = tabs[ID].split("|");
' divTabFrame.innerHTML = "<IFRAME SRC="+tab[1]+
' " CLASS='tabFrame'></IFRAME>";
End Sub ' tabOnClick
//-->
</SCRIPT>
<STYLE TYPE="text/css" TITLE="">
.tabOff {
FONT-FAMILY: Verdana;
FONT-SIZE: 10;
FONT-WEIGHT: 700;
TEXT-ALIGN: CENTER;
COLOR: #003399;
BACKGROUND-COLOR: #c4e0f0;
BORDER-BOTTOM: #c4e0f0 1PX SOLID;
HEIGHT: 20;
WIDTH: 90;
CURSOR: HAND;
}
.tabOn {
FONT-FAMILY: Verdana;
FONT-SIZE: 10;
FONT-WEIGHT: 700;
TEXT-ALIGN: CENTER;
COLOR: #003399;
BACKGROUND-COLOR: #93BEE2;
BORDER-BOTTOM: #93BEE2 1PX SOLID;
BORDER-TOP: ORANGE 3px SOLID;
HEIGHT: 25;
WIDTH: 90;
CURSOR: HAND;
}
.tabFrame {
ORDER: 0;
HEIGHT: 90%;
WIDTH: 100%;
BORDER-TOP: #93BEE2 9PX SOLID;
BORDER-BOTTOM: #93BEE2 9PX SOLID;
BORDER-LEFT: #93BEE2 9PX SOLID;
BORDER-RIGHT: #93BEE2 9PX SOLID;
SCROLLBAR-FACE-COLOR:#6699CC;
SCROLLBAR-HIGHLIGHT-COLOR:#FFFFFF;
SCROLLBAR-SHADOW-COLOR:#6699CC;
SCROLLBAR-ARROW-COLOR:#FFFFFF;
SCROLLBAR-DARKSHADOW-COLOR:#6699CC;
}
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" onLoad="tabLoad()">
<DIV ID="divTabButtons"></DIV>
<DIV ID="divTabFrame"></DIV></PRE>
</BODY>
</HTML>
--------------070201080904040109050503--