All menus needs to be created during the load phase of the page. A menu is created
by creating a
WebFXMenu and then adding
WebFXMenuSeparators to it. Once all objects have been created the menus needs to
be generated. This is done using
document.write. This will write the entire
menu tree so if you have more than one menu tree you will need to do more than one write.
var myMenu = new WebFXMenu; myMenu.add(new WebFXMenuItem("Menu Item 1", "http://www.domain.com", "Tool tip to show")); myMenu.add(new WebFXMenuSeparator()); myMenu.add(new WebFXMenuItem("Menu Item 2", "http://www.domain.com", "Tool tip to show")); document.write(myMenu);
To create a sub menu you just create another menu and then in the creation of the menu item you should pass along that menu as the fourth argument.
var mySubMenu = new WebFXMenu; mySubMenu.add(new WebFXMenuItem("Menu Item 3", "http://www.domain.com", "Tool tip to show")); myMenu.add(new WebFXMenuItem("Menu Item 4 with sub menu", null, "Tool tip to show"), mySubMenu);
Due to the limitations of one of the targeted browsers we cannot get the size of an element and therefore all sizes and positions must be reflected in the JS code. This is probably one of the worst limitation of the menu system but it is just something that we have to live with in its current state.
The default position of a root menu is 0,0 but by setting the
top property on the menu object you can change this. The position of sub
menus will however be calculated from the position and size of the parent menu and the
height of a menu item so you only needs to set the position for the root menu. The width
of a menu is by default set to 100 but it can be changed using the
myMenu.left = 30; myMenu.top = 10; myMenu.width = 200;
To show a menu you call
show() on a menu object. This shows the menu as well
as all of its parent menus.
The menu bar is basically just a menu with a slightly different layout. The
WebFXMenuBar extends the menu and it overrides the toString method. Menu buttons
are extending menu items and are called
var myBar = new WebFXMenuBar; myBar.add(new WebFXMenuButton("Menu Button 1", "http://www.domain.com", "Tool tip to show")); myBar.add(new WebFXMenuButton("Menu Button 2", null, "Tool tip to show", myMenu));
The menu buttons can have a drop down menu by passing a long a menu as the fourth argument (just like for the menu items). Drop down menus are shown when the anchor becomes focused and hidden when the anchor is blurred. This makes the menu disapear as soon as the user clicks anywhere else.
The menu system consists of a few object types,
WebFXMenuSeparator. All of these
return the string needed to generate the
HTML when one calls
toString(). This method is the one JS uses whenever
a string is needed for an object. This means that the following will create the needed