Menu element (used with Interface module)
Description:
This element adds cascading menus to an interface. These can be multicoloured, have hilights on items and different font sizes for each drop-down. As with other parts of Gamelib, this works with all dynamic browsers.
To use:
The code for this element is included in the interface module, linked as follows:
<script language="Javascript" src="gamelib_interface.js"></script>
You then build your menu(s) from menuItems before adding them to an interface. Menus can consist of other menus too (which could themselves consist of other menus etc etc) which creates cascading menu trees. Here's an example of a menu with another menu under one of the items which will cascade:
mySubMenu=new In_Menu(0,0,70,'Options...',80,2,'#884444','#aa8888','#ffaaaa','#ff0000');
mySubMenu.add(new In_MenuItem('Colours','alert(\'colours\')',true));
mySubMenu.add(new In_MenuItem('Workflow','alert(\'workflow\')',true));
mySubMenu.add(new In_MenuItem('File types','alert(\'file types\')',true));
mySubMenu.add(new In_MenuItem('Backups','alert(\'backups\')',true));
mySpecialMenuItem=new In_MenuItem('Open','alert(\'open\')',true);
myMenu=new In_Menu(2,2,70,'File',90,2,'#000088','#aaaaee','#ccccff','#ff0000');
myMenu.add(new In_MenuItem('New','alert(\'new\')',true));
myMenu.add(mySpecialMenuItem);
myMenu.add(mySubMenu);
myMenu.add(new In_MenuItem('Save','alert(\'Save\')',true));
myMenu.add(new In_MenuItem('Save as...','alert(\'Save as...\')',true));
myInterface.add(myMenu);
As you can see, the first thing to do is create a new instance of an In_Menu object. The first 2 parameters are x,y (position relative to the interface the menu will be inside). *Note, the x,y position is only used for a top-level menu, so any that cascade out of it do not need the x,y set! The interface object positions the cascading menus as it builds the tree. This is why in the example above, I've set the x,y position of the sub menu to 0,0.
The third parameter is the width of items in this menu, the forth is the heading for the menu (like the 'File' heading you see in the top left corner of your web browser.) The last 5 are parameters that alter the look of this dropdown. First is the opacity (IE only), then the font size for the text (1-7), then the font colour, background colour, background colour when the mouse is over it (hilighted) and finally background color when the item is disabled
Then all you need to do is start adding new menuItems to the menu! The parameters are the heading, then a javascript statement to be executed when item is clicked. So in the example above, all the items just pop up alert boxes, but you would normally call a function there. The third parameter is reserved for future use, but should currently always be true. MenuItems can have their properties changed after they've been added to the menu. See the menuItem docs for more information.
Finally, just add the menu to an interface. See the interface docs for help creating an interface object.
If you wish to see an example of a more complex structure, just take a look at the example included with this library.
List of methods for Menu
Descriptions of methods for Menu
Method | Parameters | Description |
---|---|---|
add | menuItem/menu object | Adds a menuItem or a menu to this menu object. If you add a menuItem it will become a clickable item in this menu. If you add another menu, it will become a cascaded menu item in this menu. |