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.
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.
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).
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.
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.
<hx:panelMenu>
<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.
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". |
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. |
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.
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. |
-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.
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.
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>
<style> .menu_1_item_moused .moo { background-image: url('img/mouse-over-img.gif'); } </style>
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.
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. |
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.
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.