Dojo: The Definitive Guide

Menu

Menu models the kind of contextual menu that appears when you right-click on an application icon in a desktop environment. A Menu contains MenuItem widgets, which are bona fide menu items that may be selected, or PopupMenuItem widgets, which can provide another layer of menu items (similar to the Windows Start menu). The child of a PopupMenuItem is just another Menu. Although it would not be wise from a usability standpoint, you could theoretically embed an arbitrary number of PopupMenuItem and MenuItem dijits.

To start out, let's take a look at a simple Menu that contains only MenuItem children, as shown in Example 15-4.

Tip

By issuing a dojo.require("dijit.Menu") you also get MenuItem and PopupMenuItem.

Image Slicing to Minimize Latency

Instead of defining a ton of small images, resulting in a series of synchronous requests back and forth to the server that all incur HTTP overhead, Dijit themes use an approach in which all images are defined side-by-side on a single image. CSS styling is used to slice out the part of the image that should be displayed for any given icon like so:

.tundra .dijitEditorIcon
/* All built-in Editor icons have this class */
{
        background-image: url('images/editor.gif');
        background-repeat: no-repeat;
        width: 18px;
        height: 18px;
        text-align: center;
}

/* Individual icons are sliced out like so... */
.tundra .dijitEditorIconUnderline { background-position: -648px; }

The following list summarizes other Editor icons that are available:

• dijitEditorIconSep

• dijitEditorIconBackColor ...