|
This document will go through the javascript
involved in the design of the dhtml menus.
All the javascript that is used to create and
run the menu system can be found in the file
menuapi.js - which as mentioned before is a
page design element in the notes database.
Inside the 'onload' event of the web form is
the call 'buildmenus()' - this is what triggers
off the creation of the dynamic menu.
Ok - two things i'm keen on when writing javascript:
1) var D=document.all - i'm always looking
to make my code as small as possible - when
you have a lot of references to objects etc
on your html page firstly typing document.all.whatever
(or whatever method you use to reference things)
can get tedious plus it takes up more space
than needed - so I always have a var D=document.all
then I can reference things in my code as D.id.
2) Object Orientated code - Yes really! - you
can create objects in javascript etc - I will
do an article on it very soon.
At the top of menuapi.js you will see:
var D=document.all
var readmenu=new Array()
var menucount=0
These are the global declarations which can
be accessed from any part of your code (as they
are outside of any of the functions) - declarations
inside the functions are known as local variables
- and they can only be used within those functions.
When writing this article I have also noticed
a mistake by myself - there should also be a
global declaration var out="" - the
code works without it - but not very good practice
- I can assure you my original code was correct
and it was a cut and paste error - honest guv.
The first line I have explained the second
line is declaring readmenu as an Array and the
third line is setting up the variable menucount
with value 0.
The starting function buildmenus() (which was
called from the onload event in our web form)
basically reads the menu data from the form
and creates a menu object.
At the top of the function you will see the
local variable declarations then the reading
of the data (tmparray1=D.menu_r_title.innerText.split(";
")). The database has been setup to have
multiple values seperated by a ";"
- this is why we have the split("; ")
call - this basically splits out all the individual
menu lines into an array (tmparray0).
Once all five columns have been split out,
these values are passed to the createmenu function.
At the end of the function variable "out"
is written to the page using the position marker
"mitems" - this variable is built
up within the createmenu call. Finally if there
are any menu items in our 'readmenu' object
then the menu is displayed using the swapmenu
function (named as such as we can have a different
menu depending on the document status - ie if
we go into edit mode we can have a swapmenu(editmenu)
- more on this in another article.
function buildmenus(){
out=""
var tmparray0=new Array()
var tmparray1=new Array()
var tmparray2=new Array()
var tmparray5=new Array()
tmparray1=D.menu_r_title.innerText.split(";
")
if(tmparray1!=""){
tmparray0=D.menu_r_code.innerText.split(";
")
tmparray2=D.menu_r_items.innerText.split(";
")
tmparray5=D.menu_r_itemcode.innerText.split(";
")
createmenu(tmparray1.length,tmparray0,tmparray1,tmparray2,tmparray5,readmenu,"R")}
D.mitems.innerHTML=out
if(readmenu.length>=1){swapmenu(readmenu)}
}
The "createmenu" function is the
html builder part - it receives the menu variables
from buildmenus() and creates the html required
on the fly. This is also another good method
for bandwidth conservation - if you have a very
complex menu system - only the setup variables
need to be passed - then the function builds
the html on the client side - its almost an
unpacking process.
function createmenu(length,tmparray0,tmparray1,tmparray2,tmparray5,thismenu,type){
var tmp=""
var functioncall=""
var tmparray3=new Array()
var tmparray6=new Array()
for(x=0;x<length;x++){
if(tmparray2[x]!=null && tmparray2[x]!="Empty"){out+="<table
class='menutable' ID=\"M"+menucount+"\"
style=\""+"border:outset 2px;visibility:hidden;z-index:9;position:absolute;left:1;top:1"+"\">"
tmp=tmparray2[x]
tmparray3=tmp.split(",")
tmp=tmparray5[x]
if(tmp!=null){tmparray6=tmp.split(",")}else{tmparray6="None"}
for(xx=0;xx<tmparray3.length;xx++){
if((tmparray6[xx]!=null) & (tmparray6[xx]!="None")){functioncall=tmparray6[xx]}else{functioncall=""}
out+="<tr id='"+type+"M"+x+"M"+xx+"'
class='menubar_row' onclick=\"hidemenus();"+functioncall+"\"
onmouseover=\"className='menubar_rowover'\"
onmouseout=\"className='menubar_row'\">"
if(tmparray3[xx]=="Make 'Secondary'"){out+="<td> <span
id='pslabel'>"+tmparray3[xx]+"</span> </td></tr>"}
else{out+="<td> "+tmparray3[xx]+" </td></tr>"}
}out+="</table>"
thismenu[x]= new barmenu(tmparray1[x],menucount,tmparray3.length,tmparray0[x])
menucount++
}else{thismenu[x]= new barmenu(tmparray1[x],"x",0,tmparray0[x])}thismenu.type=type
}}
The swapmenu function is called to display
a particular menu - in this example we only
have one - the readmenu. You will note the use
of D.MENUBAR.style.visibility='visible' to make
the menu visible.
function swapmenu(themenu){
out=""
var showmenu=""
var thecode=""
for(x=0;x<themenu.length;x++){
if(themenu[x].noitems==0){showmenu=""}else{showmenu="showmenu('M"+themenu[x].id+"',this)"}
if(themenu[x].code=="None"){thecode=""}else{thecode=themenu[x].code}
out+="<input tabindex=-1 type='button'
class='textgraphic' id=z"+x+" name='"+themenu.type+"m"+x+"'
value='"+themenu[x].title+"' style='width:"+(14+(themenu[x].title.length*6))+";'
onmouseover=\"className='textgraphicover';hidemenus();"+showmenu+"\"
onmouseout=\"className='textgraphic'\"
onclick=\""+thecode+"\">"
}D.mbar.innerHTML=out;D.MENUBAR.style.visibility='visible'
}
The showmenu function is for displaying the
drop down menus for each of the main menu buttons
- each button will have an onmouseover event
which calls this function.
function showmenu(themenu,b){var
obj=eval("D."+themenu);obj.style.top=parseInt(b.offsetParent.offsetParent.offsetTop)+25;obj.style.left=parseInt(b.offsetLeft)+3;obj.style.visibility='visible'}
The hidemenus function is used to hide all
drop down menus whenever the mouse pointer moves
out of the range of the menus.
function hidemenus(){for(x=0;x<menucount;x++){eval("D.M"+x).style.visibility='hidden'}}
Should some of the javascript be unclear to
you there are a lot of good javascript resources
on the web - otherwise feel free to mail me
about anything that doesnt make sense.
Questions? -
steve.castledine@projectdx.org
|
