eMenuTree: Scripting tree menus

Introduction

Beginning with eMenuTree 3.0, various of the functions which control the tree menu are exposed, and may be used to script tree menus .  You can write script to open a tree menu to a certain point, change the style of any one line of the tree, close branches, etc.  Doing this requires a knowledge of both javascript and of the eMenuTree functions.

Basic tree menu functions

The basic tree menu functions:

To learn more about the various options for each of the functions, examine the script in one of your tree menu pages.  The second parameter of the eLK() command may have "i" for internal, "e" for external, "r" for content (right) frame, "j" for javascript, "w" to indicate a URL, "nl" for a non-link, "nm" for no image.  The second element of eMF(), eSF() and eLK() may contain "dd" to indicate a drop down tree menu.

The tree menu HTML

The relevant HTML which the tree menu functions writes in IE 4-6, Netscape 6.2:

The folder and subfolder anchors open and close folders.  The link anchor links to a page.  The crucial thing to note is the id numbers.  To script eMenutree, you will get ahold of the divisions, anchors or images via these.  Notice that eMenuTree adds a "b" to the id of links.

If the user is using an old browser, the html that eMenuTree commands writes is much simpler:

The exposed variables

eMenuTree defines the following browser related variables, which you may use in your script:

eAGT=navigator.userAgent.toLowerCase()
ePI=parseInt(navigator.appVersion)
eIE=((eAGT.indexOf('msie')!=-1)&&(eAGT.indexOf('opera')==-1))   // IE but not opera
eNN=(navigator.appName=='Netscape')
eW3C=((eIE&&ePI>=4)||(eNN&&ePI>=5))   // IE 4-6 or NN 6
eMW3C=((eIE&&ePI>=4)||(eNN&&ePI>=5&&eAGT.indexOf('6/6.0')==-1))   // IE 4-6 or NN 6.2
eGB=!eMW3C   // generic browser

What is the difference between eW3C and eMW3C?  A minor difference is NN 6.0 is not included in eMW3C.  A more important difference is that the definition of eW3C never changes.  If you choose to make either IE 4-6 or NN 6 as a generic browser, than this will be reflected in the definition of eMW3C -- eMW3C will become false for that browser.

Finally, there is one other crucial exposed array:

eGI=new Array()

eGI maps a folder name or a link name to the id of that folder or link.  If your tree has the main folder command:

eMF("c1d5","","Intro","");

then

eGI["Intro"]= "c1d5"

eGI maps strings to strings.  It is case sensitive, so you must get the folder or link name exactly right.  Notice that since it is an array it uses square brackets.

The exposed functions

Besides the functions eMF, eSF, eLK, and eDE, you may also use:

All of these elements will cause an error if there is no folder or link line with the given id.  eGO(id) will cause an error for older browsers.  (Examples given below explain how to avoid this.)

Using the exposed variables and functions

EXAMPLE ONE

The following script changes the background color of the folder or link line named "Intro":

if(eMW3C){eGO(eGI["Intro"]+"a").style.backgroundColor = "teal"}

The same strategy can be used to script the anchor or folder image.  To change the image to folder.gif use:

if(eMW3C){eGO(eGI["Intro"]+"i").src = "folder.gif"}

When you are treating IE 4-6 or NN 6 as a generic browser, you can chance eMW3C to eW3C and use this strategy, with one exception.  The generic browser code doesn't have any hidden elements, and so you can only script the things that are actually showing on the page.  If a folder is closed, you can't script anything that is in it.

If you intend to use these often, then it makes sense to write functions:

function imageOf(name){return eGO(eGI[name]+'i')}

function anchorOf(name){return eGO(eGI[name]+'a')}

This will make your javascript much more readable:

if(eMW3C){anchorOf("Intro").style.backgroundColor = "teal"}

if(eMW3C){imageOf("Intro").src = "folder.gif"}

EXAMPLE TWO

If you are using a frame project, the following script can be executed in the content frame to open the folder that contains the link line named "Start":

if(parent.emtmtf){parent.emtmtf.eOS(parent.emtmtf.eGF(parent.emtmtf.eGI['Start']))}

eOS,eGF,eGI will work in generic browsers as well as W3C browsers, and so this strategy will work for all browsers.

You can shorten the code by using a variable for parent.emtemf:

var t; t=parent.emtmtf; if(t){t.eOS(t.eGF(t.eGI['Start']))}

To open the folder containing "Start" and load start.htm into the content frame use:

<a onclick="{var t; t=parent.emtmtf; if(t){t.eOS(t.eGF(t.eGI['Start']))}}" href="start.htm">Go to Start.</a>

Or if you intend to use this often, use the function:

function openTree(line) {var t;t=parent.emtmtf;if(t){t.eOS(t.eGF(t.eGI[line]))}}

and then use the anchor:

<a "onclick=openTree('Start')" href="start.htm">Go to Start.</a>

If you understand these two examples, you can script the tree menu in 1000's of ways.  (However, there is no sense in using script to do what eMenuTree already does.)