Menu

Adds a menu bar to a page.

A menu bar consists of at least one menu and may contain submenus. For each item in a menu, if the item has a child menu associate with it, when the user mouses/clicks on that item, a corresponding submenu is displayed. If an item does not have a child menu associated with it, when a user clicks on the item an action is taken.

The top-level menu can be displayed horizontally or vertically. Child submenus can be activated by mouse-over or by click. The submenus can equally be displayed horizontally or vertically and can be activated by mouse-over or click. For example, the standard Windows® menu bar displays the top-level menu as "horizontal and click" while the child submenus are displayed as "vertical and mouse-over". Additional styling options support displaying submenus as "popups" (the normal case) or as "inline" (to make a "tree-style" menu). Submenus can be "sticky" (always on display once selected) or "popup" (disappear after a selection is made).

A menu is populated with JSFMenuItems (the menu itself has nothing in it until it is populated). Different menu items can be styled differently providing alternating item styles, separators, first-item-is-different, and so on. Each item contains an inline HTML tag which can contain other inline HTML. For example, an item can be simple text, or an <a> tag that contains multiple things such as images or check marks.

The JSFMenu component is used to display a tree of menus. Each item in a menu can either be an action that is performed (for example, a link to be followed) or it can lead to another menu. It is possible to make something both an action and lead to another node, but this is a rare case.

The top-level menu of the tree is always displayed. As you mouse or click over a menu item in the top-level, the appropriate submenu is displayed. As you mouse or click over a menu item in the submenu, a third-level menu is displayed. Submenus can go to a maximum depth of five menus. In the simplest case, the menu bar can contain a single item (for example, a down arrow button) with an associated submenu thus becoming a drop-down menu.

A menu bar is built out of a JSFMenu component which is attached to a <div> tag positioned appropriately in the page. The top-level menu is drawn in the div.

The JSFMenu component only defines the structure of the menu bar, it does not define any of the content (the menu items) in the menu bar. The structure (the tree of menu items) is defined by adding JSFMenuItem subcomponents to the JSFMenu component.

JSFMenuItem components are added to the menu bar using the hX_5.addSubcomponent call. Each subcomponent is added to a parent component which can be either a JSFMenu or a JSFMenuItem component. A menu is comprised of all the JSFMenuItem components that share the same parent component. Thus, if form1:menu1-1 is the ID of a menu item:
hX_5.addSubComponent("form1:menu1-1", "form1:menu1-1-1", new hX_5.JSFMenuItem('item:form1:linkA'));
hX_5.addSubComponent("form1:menu1-1", "form1:menu1-2-2", new hX_5.JSFMenuItem('item:form1:linkB'));
hX_5.addSubComponent("form1:menu1-1", "form1:menu1-3-3", new hX_5.JSFMenuItem('item:form1:linkC'));

Creates a menu with three items with the menu parented to the menu item named form1:menu1-1.

There are several kinds of menu items. A menu item can be:
  1. Simple text, a run of inline HTML such as a link, an HTML button tag, or an HTML table that is specified as an attribute to the JSFMenuItem constructor.
  2. Simple text, a run of inline HTML such as a link, an HTML button tag, or an HTML table that exists on the page and is assigned into the menu bar (moved into it) by the JSFMenuItem constructor.
  3. A separator (which can be graphical, textual or both).

As a general rule, if a menu item is a parent of a menu, you should be not be able to click it. Conversely if a menu item is a not a parent of a menu, you should be able to click it. A menu item is click-able if you supply an action/function when it is constructed or if you supply an existing piece of HTML and that HTML is inherently click-able (a link). See the JSFMenuItem documentation for details (including a description of how to make something both a parent of a menu and a click-able item).

Menu bars support several styling options which control how the main menu and the submenus are displayed and managed.
  • Vertical/Horizontal orientation. The main menu can be vertical or horizontal. The submenus can be independently defined as vertical or horizontal. The Windows Menu Bar is an example of a menu bar that uses a horizontal orientation for the main menu and a vertical orientation for the submenus
  • Mouse/Click action. A submenu can be displayed when you mouse over its parent menu item or when you click on its parent menu item. The action of the main menu and the submenus are specified independently, thus as with the Windows Menu Bar, you can have the main menu have a click action while the submenus have mouse actions. To execute an action you must click on the menu item.
  • Stickiness. The main menu is always sticky, that is, it is always on display. The submenus can be sticky or not. If they are not sticky, they behave like popup menus and they are removed from display after the user clicks on an menu item that does something (or if a user clicks outside them). If they are sticky, the last displayed menu is always left on display (and its parent menus). It is removed from display only when a different menu is displayed.
  • Inline. Normally submenus are displayed as layers on top of the underlying page. As an alternative, they can be displayed inline in the menu bar itself, when the submenu is displayed, space is opened up in the menu bar and the submenu is displayed inline in the menu bar. This is normally only used with vertical menus, for example, to show the navigation hierarchy of a site. Note that inline vertical menus behave much like the tree control EXCEPT only one submenu per level is displayed (you can only display one branch of the tree, not several).

Selection handling

The menu bar supports selection. When a menu-item is selected, it is displayed using the selected classes so that it can be visually distinguished from the other items in the menu. An item is selected when it is clicked and can remain visible after the click occurs. Normally this only happens if the item is in a sticky menu (the top-level menu is always sticky).

Selection is most useful as a way of highlighting the current page in the menu bar. For example, suppose the menu bar consists of five menu items (in one level) that let you move between pages 1, 2, 3, 4 and 5. The menu bar is displayed at the top of these five pages. Using selection, when page 1 is displayed, the Page 1 menu item can be highlighted. When Page 2 is displayed, the Page 2 menu item can be highlighted.

Since selection is only displayed when you click on something, it is normally only displayed very briefly (if at all) between the time a user clicks and the next page is displayed. To carry selection from one page to another, you can either:
  • Use the initial-selection attribute of the menu bar to set the selection in a newly displayed menu bar.
  • Put a hidden field in the page.

When you add the hidden field to the page, when the menu bar is displayed, the value of the hidden field is used to set the initial selection. The hidden field should contain the ID of the menu item that is to be selected. Whenever a user takes an action that sets the selection to a different menu item, the hidden field is automatically updated to contain the ID of that menu item. If the page is submitted, the hidden field transmits the last selection to the server. The value can then be copied into a similar hidden field in the next page that will be displayed to set the initial selection in that page.

JSF tags that emit the component

<hx:panelMenu>

Base HTML

<div class="classname" id="id"> (optional additional tag) <input type="hidden" id="id_selection">

The value of the (selection in the) menu bar is passed as the value of the input field if is supplied. The value is ID of the menu item that has selection.

All attributes associated with an div are supported.

No event handlers associated with the div are supported.

JavaScript constructor

hX_5.addComponent("id", new hX_5.JSFMenu(attributes)); where

id

The ID of the HTML tag to which the component is attached.

attributes

Comma separated list of attributes where each attribute is a quoted string consisting of the attribute name and value separated by a colon, for example "label:MyLabel".

Attributes

Table 1. Menu attributes

Attribute name

Description

vertical

Specifies if the top-level menu is displayed horizontally (false) or vertically (true). The Windows menu bar is an example of a horizontal top-level menu. The navigation bar on the left side of many Web pages is an example of a vertical top-level menu.

vertical-body

Specifies if the submenus (all menus other than the top menu) are displayed horizontally (false) or vertically (true). In the Windows menu bar, the submenus are displayed vertically.

fly-open

For the top-level menu, specifies if submenus are displayed when you mouse over a menu item (true) or if they are displayed when you click on the menu item (false). The Windows menu bar requires you click on an item in the top-level menu. Many Web pages display submenus as you mouse over the parent menu item.
Note: If a menu item does not have a submenu associated with it, a user must click on it to select it (make it do something) regardless of how fly-open is specified.

fly-open-body

For the submenus (menus below the top-level), determines if submenus below them are displayed when you mouse over a menu item (true) or when you click on a menu item (false).
Note: If a menu item does not have a submenu associated with it, a user must click on it to select it (make it do something) regardless of how fly-open is specified.

open-sticky

By default, submenus are displayed as pop-ups that are only on display when they are active (they parent menu item has been moused-over or clicked on). If open-sticky is set to true, for each level below the main menu, the last submenu that is moused/clicked at that level is left on display.
Note: The main menu is always sticky. This property applies to the submenus only.

open-in-place

By default, submenus are displayed in a separate window. If open-in-place is set to true, the submenus open up in the menu bar after the parent menu item and the submenu is displayed in that space (in place). This allows a menu to be tree-style. Only one submenu at each level of the menu tree is displayed in place. If you pick a different submenu to display, any other menu that is displayed in place is closed (hidden) before the new submenu is displayed.
Note: If a menu is open-in-place, it is also sticky. Note too, that it is rare for this to be used with horizontal menus (the resulting display may well be unusable if the menus are horizontal).

relative

If one of the values is specified, the top-level menu is positioned relative to either the position of the mouse or to the tag specified with the relative-to attribute. If not specified, the top-level menu is positioned wherever the div representing the menu is normally positioned.
Note: This attribute is usually used to make a context menu that is displayed when the user clicks somewhere within a container tag or performs a keyboard action in a field. The menu will be treated as absolutely positioned if relative is set. As a result, if relative is set the menu should usually be initially hidden by setting the CSS property display to none. It can be hidden/shown using the showMenu and hideMenu calls (or by hiding and showing it via a JWL Action).

relative-to

If position is set to left-bottom, right-bottom, left-top or left-bottom, the ID of the tag used to determine the position.

initial-selection

The ID of a menu-item that is to be initially displayed as selected (selected is a different CSS defined visual state). For example, you may want to indicate which menu-item in the menu bar identifies the current page on display under the bar. In this case you set the initial-selection to the ID of the menu item that represents the current page.
Note: If the menu is not sticky, the top-level menu item associated with the initial selection is shown selected. If the menu is sticky, The specified item is shown as selected and the parent menus are displayed. The select-all attribute determines if the parent menus are highlighted as selected as well.

select-all

If a selection is used, specifies if only the top item is shown selected (false) or if all items from the containing parent menu down to the top item are shown as selected.

tab-index

Not all browsers let you assign a tab-index to a <bdiv> tag (the base tag of the menu bar). Use this attribute to specify the tab-index of the menu-bar such that it works in all browsers.

target

If supplied, the ID of an input type='text' field in the page. Whenever something is selected in the menu, the text of the menu item is set as the value of the specified field. This is normally only used when making a popup menu which is emulating a combo-box (that is you have an input field with an adjacent menu where the top-level of the menu is a single button, clicking the button displays the menu, choosing an item from the menu sets the value of the input field.)

onchange

If provided, the function is called whenever a leaf is clicked (an action is taken). The function is called after the menu item is clicked (for example, if the menu item is a link, the link will be clicked and then this function called). The function should have the usual signature function(thisObj, thisEvt). thisObj will always refer to the div that represents the menu bar. The menu-item ID of the item which was selected (last clicked) can be found in the event object as thisEvt.objSelected or if the selection hidden field is on the page, it can equally be retrieved from the value of this field.

CSS classes

The CSS for a menu bar is complex. CSS classes can be provided for each level of a menu bar. Level 1 is the main menu. Level 2 defines all submenus that are displayed as result of clicking/mousing on an item in the main menu. Level 3 defines all submenus that open up off those submenus, and so on. Up to five levels of CSS classes can be specified. If classes for a level are not specified, then the classes of the previous level are used for it (for example, if you do not specify level 5 classes, then level 4 classes will be used).

Levels are specified as "_n" appended to the base class name. For example if the class is "foo", then foo_2_div specifies the style of all divs used in the second level submenus.

Table 2. Menu CSS classes

CSS class name

Description

user-supplied

Supplied as the class of the <input> or <img> tag. Styles the image/button proper (for example, sets the height, width, background color) when it is in normal (up) mode.
Note: For any kind image/button or button state, the background-image style property can be used to specify the image used as the button. If specified, the height and width properties must be set as well (to the size of the background image).

<base_n>_div

Each menu is contained in a div. Specifies the style of the div.

<base_n>_table

Each menu is organized into rows/columns in a div using a table. This style applies to the entire table used at this level.

<base_n>_separator

If this level of menus uses separator menu items, this class styles the separator. The separator is a table cell (i.e., this styles a TD tag).

<base_n>_separator_first

If this level of menus uses separator menu items, the first separator can be treated distinctly. For example, you can use this to add a thick black line or leading graphic at the top of a menu.

<base_n>_separator_last

If this level of menus uses separator menu items, the last separator can be treated distinctly.

<base_n>_cell_normal

Each menu item is contained in a table cell. This style aplies to all cells at this level of the menu (unless one of the following applies).

<base_n>_cell_moused

Same as above, but used when the mouse is over the cell. If not supplied, the selected class is used. If not provided, the normal class is used.

<base_n>_cell_selected

Same as above, but used when the menu item is selected (see below). If not supplied, the moused class is used. If not provided, the normal class is used.

<base_n>_cell_selected_moused

Same as above, but used when the menu item is selected and the mouse is over it. If not supplied, the moused class is used. If not provided, the selected class is used.

<base_n>_cell_disabled

Same as above, but used when the menu item is disabled. If not supplied, the normal class is used. If not provided, the normal class is used.

<base_n>_cell_first_normal

The first cell in a menu can be treated distinctly. If this class is supplied it is applied to the first cell instead of the _cell class.

<base_n>_cell_first_moused

The first cell in a menu can be treated distinctly. If this class is supplied it is applied to the first cell instead of the _cell class. Moused state.

<base_n>_cell_first_selected

The first cell in a menu can be treated distinctly. If this class is supplied it is applied to the first cell instead of the _cell class. Selected state.

<base_n>_cell_first_selected_moused

The first cell in a menu can be treated distinctly. If this class is supplied it is applied to the first cell instead of the _cell class. Selected and moused state.

<base_n>_cell_first_disabled

The first cell in a menu can be treated distinctly. If this class is supplied it is applied to the first cell instead of the _cell class. Disabled state.

<base_n>_cell_last_normal

The last cell in a menu can be treated distinctly. If this class is supplied it is applied to the last cell instead of the _cell class.

<base_n>_cell_last_moused

The last cell in a menu can be treated distinctly. If this class is supplied it is applied to the last cell instead of the _cell class. Mouse state.

<base_n>_cell_last_selected

The last cell in a menu can be treated distinctly. If this class is supplied it is applied to the last cell instead of the _cell class. Selected state.

<base_n>_cell_last_selected_moused

The last cell in a menu can be treated distinctly. If this class is supplied it is applied to the last cell instead of the _cell class. Moused state and selected state.

<base_n>_cell_last_disabled

The last cell in a menu can be treated distinctly. If this class is supplied it is applied to the last cell instead of the _cell class. Disabled state.

<base_n>_cell_alt_normal

A menu item can be flagged as an alternate cell. If a menu item is an alternate item, this class is applied to the containing cell instead off the _cell class.

<base_n>_cell_alt_moused

A menu item can be flagged as an alternate cell. If a menu item is an alternate item, this class is applied to the containing cell instead off the _cell class. Moused state.

<base_n>_cell_alt_selected

A menu item can be flagged as an alternate cell. If a menu item is an alternate item, this class is applied to the containing cell instead off the _cell class. Selected state.

<base_n>_cell_alt_selected

A menu item can be flagged as an alternate cell. If a menu item is an alternate item, this class is applied to the containing cell instead off the _cell class. Selected state.

<base_n>_cell_alt_selected_moused

A menu item can be flagged as an alternate cell. If a menu item is an alternate item, this class is applied to the containing cell instead off the _cell class. Selected and moused state.

<base_n>_cell_alt_disabled

A menu item can be flagged as an alternate cell. If a menu item is an alternate item, this class is applied to the containing cell instead off the _cell class. Disabled state.

<base_n>_item_normal

The class is applied to all menu items at this level. If the item already has a class (or classes) assigned to it, the class is appended to the end of the list.

<base_n>_item_moused

The class is applied to all menu items at this level. If the item already has a class (or classes) assigned to it, the class is appended to the end of the list. Moused state.

<base_n>_item_selected

The class is applied to all menu items at this level. If the item already has a class (or classes) assigned to it, the class is appended to the end of the list. Selected state.

<base_n>_item_selected_moused

The class is applied to all menu items at this level. If the item already has a class (or classes) assigned to it, the class is appended to the end of the list. Selected and moused state.

<base_n>_item_disabled

The class is applied to all menu items at this level. If the item already has a class (or classes) assigned to it, the class is appended to the end of the list. Disabled state.

<base_n>_item_alt_normal

A menu item can be flagged as an alternate cell. If a menu item is an alternate item, this class is applied to the item instead off the _item class.

<base_n>_item_alt_moused

A menu item can be flagged as an alternate cell. If a menu item is an alternate item, this class is applied to the item instead off the _item class. Moused state.

<base_n>_item_alt_selected

A menu item can be flagged as an alternate cell. If a menu item is an alternate item, this class is applied to the item instead off the _item class. Selected state.

<base_n>_item_alt_selected_moused

A menu item can be flagged as an alternate cell. If a menu item is an alternate item, this class is applied to the item instead off the _item class. Selected moused state.

<base_n>_item_alt_disabled

A menu item can be flagged as an alternate cell. If a menu item is an alternate item, this class is applied to the item instead off the _item class. Disabled state.

<base_n>_arrow_normal

For submenus (not level 1), if a menu item opens a child submenu, an arrow is displayed at the right edge of the cell that contains the item. This style is applied to the arrow. If the style does not specify a background image, it styles the text arrow that is displayed by default. If the style includes a background image, the text arrow is not displayed and the background image is used as the arrow.

<base_n>_arrow_moused

For submenus (not level 1), if a menu item opens a child submenu, an arrow is displayed at the right edge of the cell that contains the item. This style is applied to the arrow. If the style does not specify a background image, it styles the text arrow that is displayed by default. If the style includes a background image, the text arrow is not displayed and the background image is used as the arrow. Moused state.

<base_n>_arrow_selected

For submenus (not level 1), if a menu item opens a child submenu, an arrow is displayed at the right edge of the cell that contains the item. This style is applied to the arrow. If the style does not specify a background image, it styles the text arrow that is displayed by default. If the style includes a background image, the text arrow is not displayed and the background image is used as the arrow. Selected state.

<base_n>_arrow_selected_moused

For submenus (not level 1), if a menu item opens a child submenu, an arrow is displayed at the right edge of the cell that contains the item. This style is applied to the arrow. If the style does not specify a background image, it styles the text arrow that is displayed by default. If the style includes a background image, the text arrow is not displayed and the background image is used as the arrow. Selected and moused state.

<base_n>_arrow_disabled

For submenus (not level 1), if a menu item opens a child submenu, an arrow is displayed at the right edge of the cell that contains the item. This style is applied to the arrow. If the style does not specify a background image, it styles the text arrow that is displayed by default. If the style includes a background image, the text arrow is not displayed and the background image is used as the arrow. Disabled state.

Note:
  • The _div classes are used to exactly position the submenus relative to their parent items. Use margin-top and margin-left to position how far down/left of the parent item the menu is positioned. Negative values can be used.
  • The _div classes support three kinds of effects that are applied to the divs that contain the menus in SOME browsers. Not all browsers support these effects (in which case they are simply not drawn).
    To make the background of the menu transparent (only the background, not the text in the foreground), use:
    -moz-opacity: .9;
    opacity: .9;

    Both properties must be supplied (one is for Mozilla, the other IE). The value of the opacity must be between 0 and 1. Note the difference for the value for IE -- it is a percentage such as .9 not the usual 90.

    To give the menu a shadow, use:
    outline-color: #E4E4E5;
    outline-width: 1px;
    -moz-outlineColor: #E4E4E5;
    -moz-outline-width: 1px;

    Again, both sets of properties must be supplied (one is for Mozilla, the other IE). The color specifies the color of the darkest part of the shadow. The width specifies the width of the drop-shadow (minimum 1). The shadow is drawn on the right and bottom of the menu.

    In IE (only), a transition effect can be applied to the menu (for example, it can slide into place). This is specified via an IE filter effect. For example:filter:progid:DXImageTransform.Microsoft.Inset(duration=.4);

    If a filter is detected, it is held (not played) until the menu is displayed, the filter is applied before the style of the menu is changed to visible and is played afterwards.

  • The item classes are applied to the menu-items in the menu. The classes are appended to any classes that are already applied to the item. As the state of the item changes, the class is changed. For example, suppose the menu item is:<a class="foo"></a>

    When the normal class is applied, the tag will read: <a class="foo menu_1_item_normal"></a>

    When moused it will read: <a class="foo menu_1_item_normal"></a>

    Using CSS selection rules, you can apply mouse-over effects (or selected effects) to individual parts of the menu item by tying classes together. For example,<a class="foo"><img class="moo></a>

    To have the image changes classes when the mouse is over the menu-item, use:
    <style>
    .menu_1_item_moused .moo { background-image: url('img/mouse-over-img.gif'); }
    </style>
  • The arrow classes have some special behaviors. The classes are applied to the slide-right arrows that are displayed along the right edge of a menu to indicate that this menu item has children.

    To suppress the arrows, set the height to 0px.

    By default, the arrow is a text arrow (> in the normal state and >> in the moused state). To use a graphic instead of the text arrow, specify the graphic using the background-image property.

    To position the arrow relative to the right edge of the menu, use the right property. This essentially sets the width of the margin between the right edge of the arrow and the right edge of the menu. To position the arrow vertically use the margin-top property.

  • If you do not want the menu to show selection (which is only normally visible if you use the initial-selection attribute or if the menu is sticky), set the selection classes to have the same properties as the normal classes.

API calls

Table 3. Menu API calls

API call

Description

redraw()

Redraw the component taking into account any changes made to the attributes/properties of the base tag.

uirelease()

Releases any active UI associated with the component.

setValue(string)

Sets the value of the component and ensures that the value provided is valid.

object = getValue(boolean)

Retrieves the value of the component. If the boolean is false, this is equivalent to getting the value of the base tag. If the boolean is true, the value is returned as a JavaScript™ date/time object instead of as a string.

object = setAttribute(attribute)

Sets an attribute or changes its value (if it was set previously).

string = getAttribute(attribute-name)

Retrieves the current value of an attribute.

string = getMenuItemById

Given the ID of an item added to a menu bar, return the ID of the menu item that contains it.

setFocus

Sets focus in the menu bar to the specified menu item (an item must be supplied not an item ID). If the boolean is set, both mouse focus and keyboard focus are set to the item. If the boolean is not set, only keyboard focus is set. Normally, focus is only set to an item in the top-level menu or an item in a sticky menu.

showMenu

Shows the menu tree. Normally only used for menus used as a popup where the menu bar is hidden until a user action (for example, keypress) occurs. event is the event object associated with the event (for example, click or keydown) that is causing the menu to be shown. boolean should be set to true if focus should be moved to the first thing in the menu after it has been shown.
Note: If you use the JWL SHOW action in a behavior and give it the menu as a target, the showMenu call will be used to show the menu.

hideMenu ()

Hides the menu tree. Normally only used for menus used as a "popup" where the menu bar is hidden after a user action occurs. This call is the same as setting the display property of the top-level menu's divto "none".

*addSubComponent

Adds menuitem object (usually newly constructed) to the menu identified by menu_id. The menu item is given the ID specified by ID. If position is specified, the item is added at the specified (zero-based) position (and all other items slide down one position), otherwise it is appended to the menu.

*removeSubComponent

Removes the menu item identified by ID (note that the menu item ID assigned when the item is added) if it is a child of the specified menu-id.

Note: API calls on the hx_5 object that are used to add or remove menu items from a JSFMenu object are denoted by an asterisk (*). Note that the root object is added via hX_5.addComponent. All children of the root (whether additional JSFMenu objects or JSFMenuItems) are added/removed with the calls.

Accessibility

The menu bar is fully keyboard accessible. The top-level menu items are added to the tab-order of the page at the position of the div tag OR at the position specified using the tab-order attribute. Within the top-level menu, the left/right arrow keys (up/down for a vertical menu) behave like the tab key except they wrap to the beginning/end of the menu bar if you are on the last item. To open a submenu, use either spacebar (click) or the down arrow key (horizontal menu) or the right arrow key (vertical menu). Within a submenu the up/down arrow key (left/right if horizontal) moves between menu items. Submenus auto-open in fly-open mode when you keyboard through the item. The down/right arrow keys move into submenus. For any action, "lick (space bar, newline) executes the action.

The menu bar visualization is completely defined by CSS. The usability of the menu bar in low-vision cases depends on whether the developer took this into account in the CSS used to style the menu.

The menu bar currently does not report XML roles/states (it is however XHTML compliant). This will be added as soon as possible.

Limitations

Example code

Windows-style menu (for example, JWL-TEST-Menu-3-notes.jsp):

<div id="form1:menu1" class="MenuBar"></div>
<div style="display:hidden;position:absolute">
   <h:commandLink styleClass="commandLink" id="linkA" action="#{pc_JWLTESTMenu3notes1.doLink1Action}" >
        <h:outputText id="textA" styleClass="MB_Link_Medium_Hinky" value="Samples"></h:outputText>
    </h:commandLink>
...
</div>
<script>
hX.addComponent("form1:menu1", new hX.JSFMenu("fly-open:false", "fly-open-body:true"));
hX.addSubComponent("form1:menu1", "form1:menu1-1", new hX.JSFMenuItem('item:form1:linkA'));
...
hX.onPageLoad();
</script>

The first div marks where the menu bar is displayed. The second div contains tags that will be moved into the menu (here a JSF link). The menu is constructed by the hX.JSFMenu call and it's added as a component to the page. The menu is defined as not-fly-open (it is a click style menu) for the top level menu (the menu bar) and as a fly-open style for all the submenus (they fly-open when you mouse over the parent item). For each menu item, an hX.JSFMenuItem component is constructed and added to the appropriate place (here to the top menu) with an hX.addSubComponent call.

A tab-style menu with a submenu (for example, JWL-TEST-Menu-2-apple.jsp):

<div id="map2" style="padding:0px;padding-top:4px" class="AppleBar"></DIV>
<script>
hX.addComponent("map2", new hX.JSFMenu("fly-open:false", "fly-open-body:false", "select-all:true", "vertical-body:false", "open-sticky:true"));
hX.addSubComponent("map2", "map2-0s", new hX.JSFMenuItem("separator"));
hX.addSubComponent("map2", "map2-1", new hX.JSFMenuItem("label:More Samples"));
...
hX.onPageLoad();
</script>

The div marks where the menu bar is displayed. The menu is constructed by the hX.JSFMenu call and it is added as a component to the page. The menu is defined as not-fly-open (as a click style menu) at all levels and as horizontal at all levels. The submenus stay open. Selection is passed to/from the page via the hidden field. When the menu is displayed selection is shown at all levels. For each menu item, an hX.JSFMenuItem component is constructed and added to the appropriate place. Here one separator is added to the top (main) menu along with one menu item (which is a label).

A tree-style menu:

<div id="menu1" class="menubar"></div> <input id="menu1_selection" type="hidden" value="">
<script>
hX.addComponent("menu1", new hX.JSFMenu("vertical:true","vertical-body:true", "fly-open:false", "fly-open-body:false", "open-in-place:true"));
hX.addSubComponent("menu1", "menu1-1", new hX.JSFMenuItem("lab:Home <span class='MBA'> »</span>", "action-click:true","action:goto", "target:url('/JWL2_Menu/home.jsp')"));
...
hX.onPageLoad();
</script>

The div marks where the menu bar is displayed. The menu is constructed by the hX.JSFMenu call and it is added as a component to the page. The menu is defined as not-fly-open (as a click style menu) at all levels and as vertical at all levels. The submenus are open-in-place, that is, they will open within the menu (not as popups) thus forming a tree. Selection is passed to/from the page via the hidden field. When the menu is displayed selection is shown at only the top level. For each menu item, an hX.JSFMenuItem component is constructed and added to the appropriate place. Here a click-able item is created (a URL is supplied) using a span of text containing a sub-span (that allows for independent styling of the sub-span).

A drop-down menu attached to a button:

<h:inputText tabindex="10" style="width:140px" styleClass="inputTextB" value='Letter (8.5 x 11in)' id="text1" readonly="true"></h:inputText>
<div id="form1:menu2" class="menubar2"></div>
<input id="form1:menu2_selection" type="hidden" value=""">

<script>
hX.addComponent("form1:menu2", new hX.J_M("tab-index:12", "fly-open:false", "onchange:return action5();"));
hX.addSubComponent("form1:menu2","form1:menu2-1", new hX.JSFMenuItem('label:<IMG
border="0" src="img/1x1.gif" width="11" height="10">'));
hX.addSubComponent("form1:menu2-1", "form1:menu2-1-1", new hX.JSFMenuItem('lab:<table name="inner" class="MI2_T" border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle"><IMG class="MI2_C1 MI2_C1S" border="0" src="img/iconC.gif" width="11" height="15" ><td class="MI2_C2">Letter (8.5 x 11in)</td></tr></table>'));
...
hX.onPageLoad();
</script>

The div marks where the menu bar is displayed. The menu is constructed by the hX.JSFMenu call and it is added as a component to the page. The menu is defined as not-fly-open (as a click style menu) at all levels and as vertical at all levels. An onchange function is set on the menu so that when a user clicks an element, the function is called. The selected item is returned as the value of the hidden field. For each menu item, an hX.JSFMenuItem component is constructed and added to the appropriate place. Here only one top level item is provided (and it is styled as a button). The sub-items are specified as tables which include check marks next to the label. When a user clicks an item, the onchange function toggles on/off the check marks in the tables.


Feedback