|
Description
| |
The top frame of my web site contains a relational select menu. With this menu structure a client selects a category form the first menu. This action loads the second menu with items from that category. A choice made from the second menu results in a jump to a URL that corresponds to that selection.
The Dual Menu Package supports the easy creation and maintenance of relational select menus. A web page developer uses two functions, one that assist in managing the data that appears in the dual menu, and a second function that constructs the dual menu. The function that assists in the construction of an array makes it easy for a user to construct and manage dual menu information. A second function uses the array of data to construct the menu.
|
|
The Gory Details
|
For those who wish to look at the code, here are te gory details. A variable, MaxLength keeps track of the maximum size of the secondary menus.
var MaxLength = 0;
This is used to make sure the secondary menu is made big enough to hold the largest secondary menu. The functions secondaryObject() and makePrimaryEntry(),
function secondaryObject() {
return (this);
}
function makePrimaryEntry(){
this.category=null;
this.secondary=new Array();
return (this);
}
are used by makeMenuArray() in the creation of the array structure that holds the dual menu information. The makeMenuArray() function constructs the object that holds the menu information. Each object in the array has two entries, a primary menu entry and its corresponding secondary array. Each secondary array entry is composed of for items, a secondary menu entry, its corresponding URL, and the target frame, if any. The structure of the function,
function makeMenuArray() {
var i;
var out = false;
var thisindex = 0; // main menu index
var argindex = 0; // indexes thru parameters
while ((makeMenuArray.arguments.length - 1) > argindex) {
this[thisindex]= new makePrimaryEntry();
this[thisindex].category= makeMenuArray.arguments[argindex];
argindex++;
i = 0; // secondary menu index
out = false;
while ((makeMenuArray.arguments[argindex]!="/")&&
(argindex<(makeMenuArray.arguments.length - 1))) {
this[thisindex].secondary[i]=new secondaryObject();
this[thisindex].secondary[i].inName=makeMenuArray.arguments[argindex++];
this[thisindex].secondary[i].inUrl=makeMenuArray.arguments[argindex++];
this[thisindex].secondary[i].inTarget=makeMenuArray.arguments[argindex++];
i++;
if (i>MaxLength) MaxLength=i;
}
thisindex++; argindex++;
}
return (this);
}
is a pair of nested loops. One primary menu entry is processed each time through the outer loop. For each primary entry, the inner loop is traversed once per corresponding secondary menu entry.The writeForm() function,
function writeForm(ArrayName) {
document.write('.lt;FORM NAME = "',curName(),'".gt;');
// write categories menu
document.write('.lt;SELECT NAME="Categories"
onChange="changeMenu(\'',curName(),'\', \'',ArrayName,'\')".gt;');
for (var i in this[ArrayName]){
document.write('.lt;OPTION.gt;', this[ArrayName][i].category, '.lt;/OPTION.gt;');
}
document.write('.lt;/SELECT.gt;');
//write selections menu
document.write ('.lt;SELECT NAME="Selections"
onChange="confirmChange(\'',curName(),'\', \'' ,ArrayName ,'\')".gt;');
// Just write enough options to set up the options array
for (var i=0; i.lt; MaxLength; i++)
document.write('.lt;OPTION.gt;' +
this[ArrayName][0].secondary[0].inName+'.lt;/OPTION.gt;');
document.write('.lt;/SELECT.gt;.lt;/FORM.gt;');
// document.DoubleMenu.Categories.options[0].selected=true;
preLoad("changeMenu (\""+curName()+"\", \""+ArrayName+"\");");
newName()
}
generates the HTML for the dual menu. There can be more than one dual menu per web page, each menu is given a unique name through calls to the curName() and newName() functions in the uniquenames.js package. The menus are managed with the changeMenu() and confirmChange() function. The changeMenu() function is activated by the onChange event of the primary menu,
<SELECT NAME="Categories" onChange="changeMenu(. . .)">. . .
Similarly, an onChange event handler associated with the secondary menu calls confirmChange() to carry out the branch to the selected items URL.
function changeMenu(MenuName, ArrayName){
var selectedCategory=document[MenuName].Categories.selectedIndex;
document[MenuName].Selections.options.length=
this[ArrayName][selectedCategory].secondary.length;
for (var i in (this[ArrayName][selectedCategory].secondary))
document[MenuName].Selections.options[i].text =
this[ArrayName][selectedCategory].secondary[i].inName;
document[MenuName].Selections.options[0].selected = true;
} // end changeMenu
function confirmChange(MenuName, ArrayName) {
var PIdx=document[MenuName].Categories.selectedIndex;
var SIdx=document[MenuName].Selections.selectedIndex;
document[MenuName].Selections.options[0].selected = true;
if (this[ArrayName][PIdx].secondary[SIdx].inUrl != null) {
if (this[ArrayName][PIdx].secondary[SIdx].inTarget == "_parent") {
parent.location.href=this[ArrayName][PIdx].secondary[SIdx].inUrl;
} else {
parent.body.location.href=this[ArrayName][PIdx].secondary[SIdx].inUrl;
}
}
}
| |
|
Access
|
You need not copy the package to your account. Include the following <script> tags in the header of your html file (between the </title> and the </head> tags). NOTE: Dual Menu uses one other package, which must also be included.
<script language=Javascript src ="http://www.cs.uofs.edu/~beidler/jslib/uniquenames.js">
</script>
<script language=Javascript src ="http://www.cs.uofs.edu/~beidler/jslib/dualmenu.js">
</script>
| |
Making The Data Array
|
The function makeMenuArray() assist the page developer in managing the menu selections and URLs. Calls to makeMenuArray() are of the form,
Var MenuArray = new makeMenuArray(
"Primary Entry1",
"Secondary Entry 1,1", "URL 1,1", "Target 1,1",
"Secondary Entry 1,2", "URL 1,2", "Target 1,2",
"Secondary Entry 1,3", "URL 1,3", "Target 1,3",
. . .
"Secondary Entry 1,k", "URL 1,k", "Target 1,k",
"/",
"Primary Entry 2",
"Secondary Entry 2,1", "URL 2,1", "Target 2,1",
"Secondary Entry 2,2", "URL 2,2", "Target 2,2",
"Secondary Entry 2,3", "URL 2,3", "Target 2,3",
. . .
"Secondary Entry 2,m", "URL 2,m", "Target 2,m",
"/",
. . .
"Primary Entry r",
"Secondary Entry r,1", "URL r,1", "Target r,1",
"Secondary Entry r,2", "URL r,2", "Target r,2",
"Secondary Entry r,3", "URL r,3", "Target r,3",
. . .
"Secondary Entry r,t", "URL r,t", "Target r,t",
"/"
)
Each primary menu entry is immediately followed by its secondary menu selections, corresponding URLs, and frame targets. Note that the format of the secondary menu selections is identical to the format of the selection menu entries. The last secondary menu entry is followed by a "/". There are no limits to the number of primary entries, or to the sizes of the corresponding secondary menu entries. The sizes of the sets of secondary menu entries may be different. For example, the array definition for the dual select menu on my web page is,
var MenuArray = new makeMenuArray (
"Select a category, . . . ",
"then select a page", null, null,
"/",
"FALL \'98 COURSES",
"<==Reselect from 1st menu", null, null,
"/",
". . Cmps 144 (CS 2)",
"Select item", null, null,
"Fall '98 Page", "cmps144/fall98.html", "body",
"Lab.01(Sep.05'98)", "cmps144/lab_1_f_98.html", "body",
"/",
". . INTD 110 Fr. Seminar",
"Select item", null, null,
"Course Page", "FrSem/index.htm", "body",
"/",
". . SE 515",
"Select item", null, null,
"Fall \'98 Course Page", "se515/fall_98.html", "body",
"/",
. . .
"University Web Servers",
"Choose a web server", null, null,
"'Official' Web Server", "http://www.uofs.edu", "_parent",
"Academic Web Server", "http://academic.uofs.edu", "_parent",
"Computer Science", "http://www.cs.uofs.edu", "_parent",
"/"
);
| |
Constructing the Dual Menu
|
Select menus are constructed with calls to the writeForm() function within script tags,
<script language=javascript>
WriteForm("MenuArrayName");
</script>
| |
| |