Menu bar (DHTMLSuite.menuBar)

DHTML Suite - article index

Specifications

• Widget/Class name: DHTMLSuite.menuBar
• Demos:
  • demo-menu-bar.html.
  • demo-pane-splitter.html.
• Css:
  • [THEMES_FOLDER]/css/menu-bar.css and
  • [THEMES_FOLDER]/css/menu-item.css
• Other classes used by this widget:
  • DHTMLSuite.menuItem - Main class for the widget.
  • DHTMLSuite.menuModel - Main class for a pane/frame.
  • DHTMLSuite.menuModelItem - Data source - for the widget.

Configuration

DHTMLSuite.menuBar class is the main class for a menuBar. It contains a collection of DHTMLSuite.menuItem objects. A menu bar can be created by adding items by pure javascript, but it can also be created from an unordered list(<UL><LI>) on your page.

Add menu items with JS code

This is an example of a menu bar created by plain Javascript code:

// First menu
var menuModel = new DHTMLSuite.menuModel();
menuModel.addItem(1,'New','../images/calendar.gif','',false,'','');
menuModel.addItem(2,'Edit','','',false);
menuModel.addSeparator();
menuModel.addItem(3,'Save','../images/disk.gif','',false,'Save your work','saveWork()');
menuModel.addItem(10,'','../images/print.gif','',false,'Print page');
menuModel.addItem(11,'Open','../images/open.gif','',false,'Open document','');
menuModel.setSubMenuWidth(11,120);
menuModel.addItem(111,'RTF','','',11,'Open document','');
menuModel.addItem(112,'PDF','','',11,'Open document','');
menuModel.addItem(114,'Spreadsheet','','',11,'Open document','');
menuModel.addItem(4,'Tools','','',false);
menuModel.setSubMenuWidth(4,155);
menuModel.addItem(5,'Settings','','',4);
menuModel.addItem(6,'Internet Options','','',4);
menuModel.init();

var menuBar = new DHTMLSuite.menuBar();
menuBar.addMenuItems(menuModel);
menuBar.setTarget('menuBarContainer');
menuBar.init();

First, we create an object of the DHTMLSuite.menuModel class. It's the datasource for our menu bar. We use the addItem method to create new menu items. This method takes these arguments:

• id - Unique id of this menu item
• itemText - Text of menu item
• itemIcon - Icon
• url - url of menu item
• parentId - id of parent menu item, 0 if no parent
• helpText - tooltip for this menu item
• jsFunction - js function to call when someone clicks on the item. This is an alternative to the url attribute. example of value: "saveWork()"
• type - optional - usually left empty - possible values: "top" or "sub". It describes the look of the menu item.
• submenuWidth - Width of sub menu group directly below this item

We also have the addSeparator method which creates a separator line after the last created menu with the specific parent id. addSeparator() creates a separator after our last added top menu item, while addSeparator(1), creates a separator after our last created menu item where parentId = 1.

When the menu model has been created, we create the menu bar. This is very simple: Create the menu bar(var menuBar = new DHTMLSuite.menuBar()), connect it to the menu model(menuBar.addMenuItems(menuModel)), describe where to insert in on the page(menuBar.setTarget('menuBarContainer')) and finally call the init method.

Create menu item from HTML markup

With this method, you use an unordered list on your page when you create your menuModel. Instead of calling the addItem method a number of times, you create a ul,li list and point the menuModel to that list.

Here's an example of a list:

<ul id="menuModel" style="display:none">
  <li id="50000"jsFunction="saveWork()"
    itemIcon="../images/disk.gif"><a href="#" title="Open the file menu">File</a>
    <ul width="150">
      <li id="500001" jsFunction="saveWork()"
        itemIcon="../images/disk.gif"><a href="#" title="Save your work">Save</a></li>
      <li id="500002"><a href="#">Save As</a></li>
      <li id="500004" itemType="separator"></li>
      <li id="500003"><a href="#">Open</a>
        <ul width="130">
          <li id="5000031"><a href="#">Project</a>  
          <li id="5000032"><a href="#">Template</a>  
          <li id="5000033"><a href="#">File</a>  
        </ul>
      </li>
    </ul>
  </li>
  <li id="50001"><a href="#">View</a>
    <ul width="130">
      <li id="500011"><a href="#">Source</a></li>
      <li id="500012"><a href="#">Debug info</a></li>
      <li id="500013"><a href="#">Layout</a></li>
    </ul>
  </li>
  <li id="50003" itemType="separator"></li>
  <li id="50002"><a href="#">Tools</a></li>
</ul>

The script will parse this unordered list and create menu items based on it. These are the properties you can use:

• id = Unique numeric id for a menu item. (the "id" of the <li> tag)
• parentId = Id of parent element. The script fetches this dynamically from the ul list.
• itemText = Text of menu item. The content of the <A> tag in the list
• itemIcon = A custom attribute which you can add to the <LI> tag
• itemType = Attibute for the <LI> tag. Example: "separator"
• jsFunction = Attribute for the <LI> tag. This js code will be executed when someone clicks on the menu item.
• url = The href attribute of the <A> tag.

The Javascript code for this menu looks like this:

var menuModel = new DHTMLSuite.menuModel();
menuModel.addItemsFromMarkup('menuModel');
menuModel.init();

var menuBar = new DHTMLSuite.menuBar();
menuBar.addMenuItems(menuModel);
menuBar.setTarget('menuDiv');
menuBar.init();

As you can see, we use the addItemsFromMarkup instead of the addItem method. The argument to this method is the ID of the parent <UL>. The code for the menuBar is just like in the example above.

For more info on other methods, look at the descriptions in the demos.