Menu
I have this bit of code (example1)for tabs that I would to run on an external sheet so that I can replace the forms with some rather long forms I have made in html so that I can keep the html code intact. I have seen it done
as in (example2) but I need it to loof and function exactly as example1.
I do have the external js & css sheets for example2.
Thanks in advance
[code]
<html>
<head>
<title></title>
<script type=”text/javascript”><!–
function stopErrors() {
return true;
}
window.onerror = stopErrors;
//–></script>
<script language=”Javascript” type=”text/javascript”><!–
function selectAll(theField) {
var tempval=eval(“document.”+theField)
tempval.focus()
tempval.select()
}
//–></script>
<style type=”text/css”><!–
.pane {
display : none;
}
td.tabs {
border-top : medium outset #00ced1;
border-left : medium outset #00ced1;
border-bottom : medium outset #00ced1;
border-right : medium outset #00ced1;
}
div.tabs {
background-color : #00ffff;
cursor : hand;
}
//–></style>
<style type=”text/css”><!–
input.txt {
position : absolute;
left : 120px;
}
input.chk {
position : relative;
}
//–></style>
<script type=”text/javascript”><!–
var currentPaneStyle = 0;
var currentTab = 0;
function tabstrip()
{
this.tabs = new Array();
this.add = addTab;
this.write = writeTabstrip;
}
function tab(caption,content)
{
this.setId = setId;
this.caption = caption;
this.content = content;
this.write = writeTab;
this.writeContent = writePane;
}
function addTab(tab)
{
tab.setId(“tab” + this.tabs.length);
this.tabs[this.tabs.length] = tab;
}
function setId(id)
{
this.id = id;
}
function initiate()
{
var div = document.getElementById(“tab0”);
showPane(div);
}
function showPane(div)
{
if(currentTab != 0)
{
currentTab.style.backgroundColor = “#e0ffff”;
}
div.style.backgroundColor = “#00ced1”;
currentTab = div;
if(currentPaneStyle != 0)
currentPaneStyle.display = “none”;
var paneId = “pn_” + div.id;
var objPaneStyle = document.getElementById(paneId).style;
objPaneStyle.display = “block”;
currentPaneStyle = objPaneStyle;
}
function SubmitForm()
{
window.alert(“Form submitted. This would normally take you to another page”);
// normally, you would here check the form and submit it.
// if the form has the name ‘tabform’, then it is submitted
// with tabform.submit();
}
function writePane()
{
document.write(“<div class=’pane’ id=’pn_” + this.id + “‘>” + this.content + “</div>”);
}
function writeTab()
{
document.write(“<td class=’tabs’><div class=’tabs’ id='” + this.id + “‘ onclick=’showPane(this)’>” + this.caption + “</div></td>”);
}
function writeTabstrip()
{
document.write(“<table class=’tabs’><tr>”);
for(var i = 0; i < this.tabs.length; i++)
{
this.tabs[i].write();
}
document.write(“</tr></table>”);
for(var k = 0; k < this.tabs.length; k++)
{
this.tabs[k].writeContent();
}
initiate();
}
//–></script>
</head>
<body>
<form name=”tabform” method=”post” action=”mailto:[email protected]”>
<script type=”text/javascript”>
<!–
var pane1 = “<table border=1 bordercolor=8b0000><tr><td>Operating system:<br><input type=’radio’ name=’rComp’ checked>Windows</input><br><input type=’radio’ name=’rComp’>Mac</input><br><input type=’radio’ name=’rComp’>Unix</input></td><td rowspan=2>Preferred download location:<br><input type=’radio’ name=’rSrv’ checked>USA (Florida)</input><br><input type=’radio’ name=’rSrv’>Europe (UK)</input><br><input type=’radio’ name=’rSrv’>Europe (Sweden)</input><br><input type=’radio’ name=’rSrv’>Asia (Japan)</input><br><input type=’radio’ name=’rSrv’>Asia (Taiwan)</input></td></tr><tr><td>Preferred format:<br><select name=’selFormat’><option>HTML</option><option>PDF</option><option>Word</option><option>ASCII text</option><option>XML</option></select></td></tr></table>”;
var pane2 = “First name: <input type=’text’ class=’txt’ name=’inpFirst’ size=20></input><br>Last name: <input type=’text’ class=’txt’ name=’inpLast’ size=20></input><br>Address 1: <input type=’text’ class=’txt’ name=’inpAdr1′ size=20></input><br>Address 2: <input type=’text’ class=’txt’ name=’inpAdr2′ size=20></input><br>City : <input type=’text’ class=’txt’ name=’inpCity’ size=20></input><br>Postcode/ZIP: <input type=’text’ class=’txt’ name=’inpPC’ size=20></input><br>E-Mail: <input type=’text’ class=’txt’ name=’inpEmail’ size=20></input>”;
var pane3 = “Enter message here:<br><textarea cols=50 rows=6></textarea>”;
var pane4 = “<table border=1 bordercolor=8b0000><tr><td width=100><input name=’cSport’ type=’checkbox’ class=’chk’>Sport</input><br><input type=’checkbox’ class=’chk’ name=’cGifts’>Gifts</input><br><input type=’checkbox’ class=’chk’ name=’cHealth’>Health</input><br></td><td width=100><input name=’cInet’ type=’checkbox’ class=’chk’>Internet</input><br><input type=’checkbox’ class=’chk’ name=’cGames’>Games</input><br><input type=’checkbox’ class=’chk’ name=’cTech’>Technology</input></td><td width=100><input name=’cBooks’ type=’checkbox’ class=’chk’>Books</input><br><input type=’checkbox’ name=’cFash’>Fashion</input><br><input type=’checkbox’ class=’chk’ name=’cCars’>Cars</input><br></td></tr></table>”;
var pane5 = “<hr><p>This is a test of a javascript simulating a tab control<hr>”;
var ts = new tabstrip();
var t1 = new tab(“System”,pane1);
var t2 = new tab(“Personal”,pane2);
var t3 = new tab(“Message”,pane3);
var t4 = new tab(“Interests”,pane4);
var t5 = new tab(“About”,pane5);
ts.add(t1);
ts.add(t2);
ts.add(t3);
ts.add(t4);
ts.add(t5);
ts.write();
//–></script>
</form>
<button onclick=”SubmitForm()”>Submit</button><br><br>
</BODY></HTML>
EXAMPLE2
[code]
<html>
<head>
<title>OOP Tabbed UI</title>
<link rel=”stylesheet” type=”text/css”
href=”horiz.css”></link>
<script language=”JavaScript”
src=”oopTabbedUI.js”>
</script>
</head>
<body>
<script language=”JavaScript”>
//explicit declaration of tab and panel
var tabOne = new tab(“tab1”,
“XML HomePage”,10,10,150);
var panelOne = new panel
(“panel1″,”file:///c:\xml\index.htm”);
var tabPanelOne = new tabPanel(tabOne,panelOne);
tabPanelOne.writeTabPanel();
//anonymous declaration of tab and panel
var tabPanelTwo = new tabPanel(
new tab(“tab2″,”XML Overview”,10,160,150),
new panel(“panel2”,
“file:///c:\xml\overview.xml”));
tabPanelTwo.writeTabPanel();
//show first panel
showPanel(“tab1″,”panel1”);
</script>
</body>
</html>