<HTML>
<HEAD>
<TITLE>Background Labels</TITLE>
<STYLE>
.clsLogin { position: absolute; top: 15px; left:5px; width: 100px;
height: 22px;}
INPUT.clsLogin { background-color: transparent; }
SPAN.clsLogin { text-align: right; font: bolder 7pt Arial;
background-color: white; color: "#B3B3B3";
letter-spacing: 1px; padding-right: 4px; }
.clsFirstName { position: absolute; top: 15px; left: 110px; width: 150px;
height: 22px;}
INPUT.clsFirstName { background-color: transparent; }
SPAN.clsFirstName { text-align: right; font: bolder 7pt Arial;
background-color: white; color: "#B3B3B3";
letter-spacing: 1px; padding-right: 4px; }
.clsLastName { position: absolute; top: 15px; left: 265px; width: 150px;
height: 22px; }
INPUT.clsLastName { background-color: transparent; }
SPAN.clsLastName { text-align: right; font: bolder 7pt Arial;
background-color: white; color: "#B3B3B3";
letter-spacing: 1px; padding-right: 4px; }
</STYLE>
</HEAD>
<BODY bgcolor="silver">
<FORM>
<SPAN class=clsLogin>Login</SPAN>
<INPUT type=text class=clsLogin name=txtLogin>
<SPAN class=clsFirstName>First Name</SPAN>
<INPUT type=text class=clsFirstName name=txtFirstName>
<SPAN class=clsLastName>Last Name</SPAN>
<INPUT type=text class=clsLastName name=txtLastName>
</FORM>
</BODY>
</HTML>
Figure 3 Creating the Input Form
<HTML>
<HEAD>
<TITLE>Hidden Frame Example</TITLE>
<STYLE>
INPUT { position: absolute; background-color: transparent; }
SPAN { position: absolute; text-align: right; font: bolder 7pt Arial;
background-color: white; color: "#B3B3B3";
letter-spacing: 1px; padding-right: 4px; height: 22px}
BODY { background-color: BUTTONFACE }
DIV { position: absolute }
BUTTON { position: absolute }
#divInfo { top: 5px; left: 5px; width: 440px; height: 100px }
#fdsInfo { top: 0px; left: 0px; width: 440px; height: 100px }
.clsLogin { top: 20px; left: 7px; width: 138px }
.clsFirstName { top: 20px; left: 146px; width: 142px }
.clsLastName { top: 20px; left: 289px; width: 142px }
.clsComment { top: 44px; left: 7px; width: 424px }
.clsPassword { top: 68px; left: 7px; width: 213px }
.clsRePassword { top: 68px; left: 221px; width: 210px }
#divUserType { top: 105px;left: 5px; width: 441px; height: 60px }
#fdsUserType { top: 0px; left: 0px; width: 441px; height: 60px }
#optDeveloper { top: 25px; left: 10px; }
#optSupport { top: 25px; left: 155px; }
#optAdministrator { top: 25px; left: 300px; }
#divDeveloper { top: 26px; left: 32px }
#divSupport { top: 26px; left: 177px }
#divAdministrator { top: 26px; left: 322px }
#btnSubmit { top: 180px; left: 155px }
#btnReset { top: 180px; left: 225px }
#ifrmDestFrame { position: absolute; visibility: hidden }
</STYLE>
<SCRIPT language="VBSCRIPT">
Sub SubmitComplete()
alert("Submit completed")
document.all.frmUser.reset()
End Sub
</SCRIPT>
</HEAD>
<BODY>
<FORM id=frmUser action="UserSubmit.asp" method=POST target=ifrmDestFrame>
<DIV id=divInfo>
<FIELDSET id=fdsInfo>
<LEGEND>User Info</LEGEND>
<SPAN id=spanLogin class=clsLogin>Login</SPAN>
<INPUT type=text id=txtLogin class=clsLogin name=txtLogin>
<SPAN id=spanFirstName class=clsFirstName>First Name</SPAN>
<INPUT type=text id=txtFirstName class=clsFirstName name=txtFirstName>
<SPAN id=spanLastName class=clsLastName>Last Name</SPAN>
<INPUT type=text id=txtLastName class=clsLastName name=txtLastName>
<SPAN id=spanComment class=clsComment>Comment</SPAN>
<INPUT type=text id=txtComment class=clsComment name=txtComment>
<SPAN id=spanPassword class=clsPassword>Password</SPAN>
<INPUT type=password id=txtPassword class=clsPassword name=txtPassword>
<SPAN id=spanRePassword class=clsRePassword>Re-enter Password</SPAN>
<INPUT type=password id=txtRePassword class=clsRePassword
name=txtRePassword>
</FIELDSET>
</DIV>
<DIV id=divUserType>
<FIELDSET id=fdsUserType>
<LEGEND>User Type</LEGEND>
<DIV id=divDeveloper>
<LABEL id=lblDeveloper for=optDeveloper>Developer</LABEL>
</DIV>
<INPUT id=optDeveloper name=optType type=radio checked>
<DIV id=divSupport>
<LABEL id=lblSupport for=optSupport>Support</LABEL>
</DIV>
<INPUT id=optSupport name=optType type=radio>
<DIV id=divAdministrator>
<LABEL id=lblAdministrator for=optAdministrator>Administrator</LABEL>
</DIV>
<INPUT id=optAdministrator name=optType type=radio>
</FIELDSET>
</DIV>
<BUTTON id=btnSubmit onClick="frmUser.submit()">Submit</BUTTON>
<BUTTON id=btnReset onClick="frmUser.reset()">Reset</BUTTON>
</FORM>
<IFRAME id=ifrmDestFrame name=ifrmDestFrame src=""></IFRAME>
</BODY>
</HTML>
Figure 4 Form Server Code
<%@ LANGUAGE="VBSCRIPT" %>
<HTML>
<HEAD>
<%
' Your validation and database access goes here
%>
<SCRIPT language="VBSCRIPT">
Sub Window_onload()
<%
If Request("txtLogin") <> "cmorin" Then
%>
window.parent.SubmitComplete()
<%
Else
%>
alert("Login exists, please select different login")
<%
End If
%>
End Sub
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Figure 8 Tab Control
<HTML>
<HEAD>
<TITLE>Tab Control Example</TITLE>
<STYLE>
#trTabList { cursor: hand; text-align: center; font: 10pt Arial; height:20px; }
#tdLeftSide { border-left:1px THREEDHIGHLIGHT solid; }
#tdRightSide { border-right: 1px THREEDDARKSHADOW solid;}
.clsTab { border-top: 1px solid THREEDHIGHLIGHT;
border-right: 1px THREEDDARKSHADOW solid;
border-left: 1px THREEDHIGHLIGHT solid;}
.clsTabSel { border-top: 2px THREEDHIGHLIGHT solid;
border-right: 1px THREEDDARKSHADOW solid;
border-left: 1px THREEDHIGHLIGHT solid; }
.clsTabSelLeft { border-top: 1px THREEDHIGHLIGHT solid;
border-left: 1px THREEDHIGHLIGHT solid;
border-right: 1px THREEDHIGHLIGHT solid;}
.clsTabSelRight { border-top: 1px THREEDHIGHLIGHT solid;
border-right: 1px THREEDDARKSHADOW solid;
border-left: 1px THREEDDARKSHADOW solid; }
.clsTabContent { border-top: 1px THREEDHIGHLIGHT solid; padding:1px;}
.clsTabContentSel { border-top: none; padding:1px; }
#tblTabControl { position : absolute; top: 5px; left: 5px; width: 460px;
height: 270px; background: BUTTONFACE ;
border-bottom: 1px THREEDDARKSHADOW solid; }
#divInfo { position : absolute; top: 40px; left: 10px; width: 430px;
height: 250px; text-align: center; color: blue; }
#divMore { position : absolute; top: 40px; left: 25px; width: 430px;
height: 250px; text-align: center; color: brown; visibility: hidden; }
</STYLE>
<SCRIPT language="JAVASCRIPT">
// intNumTabs : number of tabs in the control
// intCurrentTab : currently selected tab
var intNumTabs = 2, intCurrentTab = 0
function onClickTab()
{
// check if it's the TD element event (the TR will buddble down to TD)
if ("TD"==event.srcElement.tagName)
{
// check if it's not the same tab that was already selected
if (event.srcElement.cellIndex != intCurrentTab)
{
setTab(event.srcElement.cellIndex)
}
}
}
function setTab(newTab)
{
// call the onLeave event of the currently selected tab
switch (intCurrentTab)
{
case (0):
onLeaveInfo();
break;
case (1):
onLeaveMore();
break;
}
var tblTabControl = document.all.tblTabControl
// assign the new tab to the current tab variable
intCurrentTab = newTab;
// Loop through each tab to change the appearance (class)
for (var i = 0; i <= intNumTabs; i++)
{
switch (i)
{
// tab to the left
case (newTab - 1):
tblTabControl.rows(0).cells(i).className = "clsTabSelLeft"
tblTabControl.rows(1).cells(i).className = "clsTabContent"
break;
// tab to the right
case (newTab + 1):
if (i != intNumTabs)
{
tblTabControl.rows(0).cells(i).className =
"clsTabSelRight";
tblTabControl.rows(1).cells(i).className = "clsTabContent"
}
break;
// tab itself
case (newTab):
tblTabControl.rows(0).cells(i).className = "clsTabSel";
tblTabControl.rows(1).cells(i).className = "clsTabContentSel";
break;
// all other tabs
default:
if (i != intNumTabs)
{
tblTabControl.rows(0).cells(i).className = "clsTab";
tblTabControl.rows(1).cells(i).className = "clsTabContent";
}
break;
}
}
// call the onEnter of the newly selected tab
switch (newTab)
{
case (0):
onEnterInfo();
break;
case (1):
onEnterMore();
break;
}
}
function onEnterInfo()
{
document.all.divInfo.style.visibility = "visible"
}
function onEnterMore()
{
document.all.divMore.style.visibility = "visible"
}
function onLeaveInfo()
{
document.all.divInfo.style.visibility = "hidden"
}
function onLeaveMore()
{
document.all.divMore.style.visibility = "hidden"
}
</SCRIPT>
</HEAD>
<BODY bgcolor="silver">
<TABLE id=tblTabControl cellspacing=0>
<TR id=trTabList onclick="onClickTab()" onSelectStart="onClickTab();
return false;">
<TD class=clsTabSel style="width:70">Info</TD>
<TD class=clsTabSelRight style="width:70">More</TD>
<TD onclick="event.cancelBubble=true"
onselectstart="event.cancelBubble=true" style="cursor:default"></TD>
</TR>
<TR>
<TD id=tdLeftSide class=clsTabContentSel></TD>
<TD class=clsTabContent></TD>
<TD id=tdRightSide class=clsTabContent></TD>
</TR>
</TABLE>
<DIV id=divInfo>
Tab Info's content goes here.
</DIV>
<DIV id=divMore>
Tab More's content goes here.
</DIV>
</BODY>
</HTML>
Figure 9 Tab State Classes
|
clsTabSel |
Default selected tab
|
|
clsTabSelLeft
|
To the left of the default selected tab
|
|
clsTabSelRight
|
To the right of the default selected tab
|
|
clsTab
|
Not adjacent to the default selected tab
|
Figure 10 Generating ASP Tabs
<%@ LANGUAGE="VBSCRIPT" %>
<HTML>
<HEAD>
<TITLE>Tab Control Component</TITLE>
<SCRIPT language="JAVASCRIPT">
function onEnterTabInfo()
{
<!-- insert instructions here -->
}
function onEnterTabMore()
{
<!-- insert instructions here -->
}
function onLeaveTabInfo()
{
<!-- insert instructions here -->
}
function onLeaveTabMore()
{
<!-- insert instructions here -->
}
</SCRIPT>
</HEAD>
<BODY>
<%
' Call the conponent that generates the code for tab control
Set objTabControl = Server.CreateObject("HTMLTools.TabControl")
objTabControl.AddTab "Info", "onEnterTabInfo()", "onLeaveTabInfo()"
objTabControl.AddTab "More", "onEnterTabMore()", "onLeaveTabMore()"
objTabControl.Execute
Set objTabControl = nothing
%>
<!-- insert content of tabs here -->
</BODY>
</HTML>