Menu
I have a simple “Tabulature” type display that works great
with help from some forum members in a different thread.
(If interested see: [url]http://www.webdeveloper.com/forum/showthread.php?t=182815
I thought I should be able to use it in different places on the same page,
and created a dual display with different information.
That too was not too problematic but I can forsee difficulties if I use it too many more times.
Could someone point me in the right direction to change the following example to a prototype syntax?
I’m just not clear on what should be methods and which should be functions.
I’m not too clear where to start in trying to prototype the functions and arrays.
The main HTML script looks like:
[code=php]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html lang=”en”>
<head>
<title>Basic TAB display</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<script type=”text/javascript” src=”Tabs.js”></script>
<script type=”text/javascript” src=”Tabs1.js”></script>
<script type=”text/javascript”>
function ClrTabs(ArrayName,BtnName) {
var ids;
for (i=0; i<ArrayName.length; i++) {
ids = BtnName+i;
document.getElementById(ids).style.backgroundColor = “#FFFFFF”;
}
}
function Show(ArrayName,BtnName,N,Display) {
ClrTabs(ArrayName,BtnName);
document.getElementById(BtnName+N).style.backgroundColor = “#FFFF00″;
document.getElementById(Display).innerHTML = ArrayName[N];
}
</script>
<style type=”text/css”>
#TabInfo, #TabInfo1 {
border: 1px solid blue;
height:200px;
overflow:auto;
margins: 0px;
padding: 0px;
}
</style>
</head>
<body onload=”Show(Info,’btnTab’,0,’TabInfo’);Show(Info1,’btn1Tab’,0,’TabInfo1′)”>
<div style=”width:300px;float:left;margin:10px;”>
<div>
<button id=”btnTab0″ onclick=”Show(Info,’btnTab’,0,’TabInfo’)”> </button>
<button id=”btnTab1″ onclick=”Show(Info,’btnTab’,1,’TabInfo’)”>Tab 1</button>
<button id=”btnTab2″ onclick=”Show(Info,’btnTab’,2,’TabInfo’)”>Tab 2</button>
<button id=”btnTab3″ onclick=”Show(Info,’btnTab’,3,’TabInfo’)”>Tab 3</button>
<button id=”btnTab4″ onclick=”Show(Info,’btnTab’,4,’TabInfo’)”>Tab 4</button>
</div>
<div id=”TabInfo”></div>
</div>
<div style=”width:350px;float:left;margin:10px”>
<div>
<button id=”btn1Tab0″ onclick=”Show(Info1,’btn1Tab’,0,’TabInfo1′)”> </button>
<button id=”btn1Tab1″ onclick=”Show(Info1,’btn1Tab’,1,’TabInfo1′)”>Introduction</button>
<button id=”btn1Tab2″ onclick=”Show(Info1,’btn1Tab’,2,’TabInfo1′)”>Background</button>
<button id=”btn1Tab3″ onclick=”Show(Info1,’btn1Tab’,3,’TabInfo1′)”>Design</button>
<button id=”btn1Tab4″ onclick=”Show(Info1,’btn1Tab’,4,’TabInfo1′)”>Data collection</button>
<button id=”btn1Tab5″ onclick=”Show(Info1,’btn1Tab’,5,’TabInfo1′)”>Analysis</button>
<button id=”btn1Tab6″ onclick=”Show(Info1,’btn1Tab’,6,’TabInfo1′)”>Conclusions</button>
</div>
<div id=”TabInfo1″></div>
</div>
<div style=”clear:both”></div>
</body>
</html>
And the two JAVASCRIPT example extension files called look like this:
[code=php]
// Tabs.js
var Info = new Array();
var str = ”;
str = “Tab Info #0”; Info[0] = str;
str = “Tab Info #1”; Info[1] = str;
str = “Tab Info #2”; Info[2] = str;
str = “Tab Info #3”; Info[3] = str;
str = “Tab Info #4”; Info[4] = str;
[code=php]
// Tabs1.js
var Info1 = new Array();
var str = ”;
// for testing purposes
str = ‘<h1 align=”center”>Abstract <br>Information</h1>’; Info1[0] = str;
str = ‘<h2 align=”center”>Introduction <br>Information</h2>’;
for (i=0; i<20; i++) { str += ‘Info #’+i+'<br>’; } Info1[1] = str;
str = ‘<h3 align=”center”>Background <br>Information</h3>’;
for (i=0; i<10; i++) {
str += ‘<em>Now is the time for all good men to come to the aid of their country.</em> ‘;
} Info1[2] = str;
//
str = “<h3 align=’center’>Design</h3>”; Info1[3] = str;
str = “<h3 align=’center’>Data collection</h3>”; Info1[4] = str;
str = “<h3 align=’center’>Analysis</h3>”; Info1[5] = str;
str = “<h3 align=’center’>Conclusions</h3>”; Info1[6] = str;