<HTML>
<HEAD>
<TITLE>All In One 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:cyan }
DIV { position: absolute }
BUTTON { position: absolute }
#divInfoUser { 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 }
#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: 240px;
background: BUTTONFACE ;
border-bottom: 1px THREEDDARKSHADOW solid; }
#divInfo { position : absolute; top: 30px; left: 10px; width: 430px; height: 250px;
}
#divMore { position : absolute; top: 30px; left: 10px; 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>
<SCRIPT language="VBSCRIPT">
Sub SubmitComplete()
alert("Submit completed")
document.all.frmUser.reset()
End Sub
</SCRIPT>
</HEAD>
<BODY bgcolor="cyan">
<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>
<FORM id=frmUser action="UserSubmit.asp" method=POST target=ifrmDestFrame>
<DIV id=divInfoUser>
<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>
</DIV>
<DIV id=divMore>
Tab More's content goes here.
<H1>Dudi Gunawan</H1>
</DIV>
<IFRAME id=ifrmDestFrame name=ifrmDestFrame src=""></IFRAME>
</BODY>
</HTML>
Tidak ada komentar:
Posting Komentar