 |
Toolbar Menu
NlsMenu Professional - Advanced Javascript Drop Down Menu Control
|
||||
|
NlsMenu can be used as application (web) toolbar. NlsMenu supports basic toolbar functions such as toggle button, grouped toggle buttons, drop down button and selection.
1. Includes the required scripts nlsmenuext_sel.js.
Include the requird script in your page <head> section.
<head>
<script language="javascript" src="lib/nlsmenu.js" ></script>
<script language="javascript" src="lib/nlsmenuext_sel.js" ></script>
</head>
2. Creates the toolbar
Toolbar is actually the same as menu except mostly toolbar button doesn't have text, only the icon. Creating toolbar is the same as creating menu.
- Use regular addItem() function to create standard button.
- Use addToggleItem() function to create toggle button button.
var toolbar = menuMgr.createMenubar("tool");
//enable the drop on click feature.
toolbar.dropOnClick=true;
//set the toolbar orientation.
toolbar.orient = "H";
//add regular button
toolbar.addItem("1", "", "", ["btnopen.gif", "btnopen.gif", "btnopendis.gif"]);
toolbar.addItem("2", "", "", ["btnsave.gif", "btnsave.gif", "btnsavedis.gif"]);
//add separator
toolbar.addSeparator();
toolbar.addItem("3", "", "", ["btncut.gif", "btncut.gif", "btncutdis.gif"]);
toolbar.addItem("4", "", "", ["btncopy.gif", "btncopy.gif", "btncopydis.gif"]);
toolbar.addItem("5", "", "", ["btnpaste.gif", "btnpaste.gif", "btnpaste.gif"]);
toolbar.addSeparator();
//add drop down button.
toolbar.addItem("6", "Font", "", ["btnfont.gif"]);
toolbar.addSubmenu("6", "font");
toolbar.addSeparator();
//add toggle item
toolbar.addToggleItem("7", null, "", "", ["btnbold.gif"]);
toolbar.addToggleItem("8", null, "", "", ["btnitalic.gif"]);
toolbar.addToggleItem("9", null, "", "", ["btnunderline.gif"]);
toolbar.addSeparator();
//add grouped toggle item. The following lines create grouped toggle buttons with group='align'
toolbar.addToggleItem("10", "align", "", "", ["btnalignleft.gif"]);
toolbar.addToggleItem("11", "align", "", "", ["btnaligncenter.gif"]);
toolbar.addToggleItem("12", "align", "", "", ["btnalignright.gif"]);
toolbar.addToggleItem("13", "align", "", "", ["btnjustify.gif"]);
//create drop down for drop down button.
var font=menuMgr.createMenu("font");
font.selection=true;
font.addItem("1", "Arial", "");
font.addItem("2", "Arial Black", "");
font.addItem("3", "Arial Narrow", "");
font.addItem("4", "Book Antiqua", "");
font.addItem("5", "Comic Sans MS", "");
font.addItem("6", "Courier New", "");
font.addItem("7", "Times New Roman", "");
font.addItem("8", "Tahoma", "");
font.addItem("9", "Verdana", "");
The example above show you how to add standard item and toggle item. With addToggleItem() function you can create grouped toggle item. Grouped toggle item is a group of toggle items, only one of the item in the same group can be selected at a time. To create grouped toggle button you only need to specify the group parameter (second parameter) as shown in the example.
Another toolbar related feature is selection. In the example above, selection is enable in 'font' menu. If the selection is enabled, the selected (clicked) item will be highlighted. The style is configured in stylesheet.
Useful function when working with toolbar menu
- enableItem()
With this function you can enable/disable menu item. For example:
//disable item with id=1 toolbar.enableItem("1", false); - setItemVisible()
With this function you can show/hide menu item. For example:
//hide item with id=1 toolbar.setItemVisible("1", false);Note that the setItemVisible() function is defined in nlsmenuext_dyn.js, you need to include this script in your page when you use this function.
For complete working context menu example, please see the toolbar menu example in the menu package.