WebFXMenu

This object type is used for menu containers. The menu containers can be populated with menu items.

Constructor

new WebFXMenu()
Name Description
No arguments

Properties

Name Description
id Read only property that can be used to find the related HTMLElement. It can also be used the other way around. If you know the id of the HTMLElement you can get the JS object by looking in the webFXMenuHandler.all collection.
parentMenu The parent menu of the current menu. If this menu has not been added as a sub menu then parent menu is null.
parentMenuItem The parent menu item of the current menu. If this menu has not been added as a sub menu then parentMenuItem is null.
emptyText The text to show if no menu items have been added to the menu. To change the default text change webfxMenuDefaultEmptyText.
useAutoPosition If this is set to true the left and top properties will be ignored and the menu will be positioned relative to the item that opened it. To change the default value change webfxMenuDefaultUseAutoPosition.
width The width of the menu. If the width is too small the text will be clipped to fit. The default value is 100 and to change the default value change webfxMenuDefaultWidth.
left The left position of the menu. To update the actual position of a shown menu call show again. Notice that this value is ignored if the menu is automatically positoned.
top The top position of the menu. To update the actual position of a shown menu call show again. Notice that this value is ignored if the menu is automatically positoned.
shown Read only. Boolean property that tells if the menu is shown or not.
borderLeft The width of the left border. This is used to position sub menus correctly. To update this value for all menus either redefine webfxMenuDefaultBorderLeft or override the value on the prototype.
borderRight The width of the right border. This is used to position sub menus correctly. To update this value for all menus either redefine webfxMenuDefaultBorderRight or override the value on the prototype.
borderTop The height of the top border. This is used to position sub menus correctly. To update this value for all menus either redefine webfxMenuDefaultBorderTop or override the value on the prototype.
borderBottom The height of the bottom border. This is used to position sub menus correctly. To update this value for all menus either redefine webfxMenuDefaultBorderBottom or override the value on the prototype.
paddingLeft The width of the left padding. This is used to position sub menus correctly. To update this value for all menus either redefine webfxMenuDefaultPaddingLeft or override the value on the prototype.
paddingRight The width of the right padding. This is used to position sub menus correctly. To update this value for all menus either redefine webfxMenuDefaultPaddingRight or override the value on the prototype.
paddingTop The height of the top padding. This is used to position sub menus correctly. To update this value for all menus either redefine webfxMenuDefaultPaddingTop or override the value on the prototype.
paddingBottom The height of the bottom padding. This is used to position sub menus correctly. To update this value for all menus either redefine webfxMenuDefaultPaddingBottom or override the value on the prototype.
shadowLeft The width of the shadow on the left edge of the menu. This is used to position sub menus correctly. To update this value for all menus either redefine webfxMenuDefaultShadowLeft or override the value on the prototype.
shadowRight The width of the shadow on the right edge of the menu. This is used to position sub menus correctly. To update this value for all menus either redefine webfxMenuDefaultShadowRight or override the value on the prototype.
shadowTop The width of the shadow on the upper edge of the menu. This is used to position sub menus correctly. To update this value for all menus either redefine webfxMenuDefaultShadowTop or override the value on the prototype.
shadowBottom The width of the shadow on the left edge of the menu. This is used to position sub menus correctly. To update this value for all menus either redefine webfxMenuDefaultShadowBottom or override the value on the prototype.

Methods

Name Description
add(oMenuItem) Adds a menu item to the menu. This method takes one argument and that is the menu item or menu separator to add.
show([relObj [, sDir]]) Shows the menu and all of its parent menus. If the menu should be automatically positined the first argument is an object with left, top, width and height fields or an HTMLElement. The second argument can either be "horizontal" or "vertical" and describes which side of the relObj the menu should be shown.
hide() Hides the menu and all of its sub menus
hideAllSubs() Hides all sub menus of the current menu
position([relObj [, sDir]]) Positions the menu relative to the relObj or if left out the menu item that opened the menu. The relObj is an object with a left, top, width and height field or an HTMLElement. The second argument can either be "horizontal" or "vertical" and describes which side of the relObj the menu should be shown.
toString() Genereates the HTML string needed to render the menu.

WebFXMenuItem

This object type is used for menu items. The menu item can have a sub menu that will be opened when the item is highlighted.

Constructor

new WebFXMenuItem(sText, sHref, sToolTip, oSubMenu)
Name Description
sText Optional. The HTML string to show on the menu item. If null or left out the default text is used.
sHref Optional. The uri to load when the item is clicked. If null or left out the default uri is used.
sToolTip Optional. The text to show as a tool tip when the user holds the mouse pointer over it. No tool tip is used if this argument is left out or null.
oSubMenu Optional. The sub menu to show when the menu item is selected.

Properties

Name Description
id Read only property that can be used to find the related HTMLElement. It can also be used the other way around. If you know the id of the HTMLElement you can get the JS object by looking in the webFXMenuHandler.all collection.
height The height of the menu item. This is used to position sub menus correctly.
text The HTML string to show on the menu item. If null or left out the default text is used.
href Optional. The uri to load when the item is clicked. If null or left out the default uri is used.
target The name of the window to open the uri in. Default is to open in the same window.
toolTip The text to show as a tool tip when the user holds the mouse pointer over it. No tool tip is used if this argument is left out or null.
subMenu The sub menu to show when the menu item is selected.
parentMenu The menu that the menu item was added to.

Methods

Name Description
toString() Genereates the HTML string needed to render the menu item.

WebFXMenuSeparator

This object type is used for menu separators. Separators are usually used to separate different groups of items in a menu.

Constructor

new WebFXMenuSeparator()
Name Description
No arguments

Properties

Name Description
id Read only property that can be used to find the related HTMLElement. It can also be used the other way around. If you know the id of the HTMLElement you can get the JS object by looking in the webFXMenuHandler.all collection.
height The height of the menu separator. This is used to position sub menus correctly.

Methods

Name Description
toString() Genereates the HTML string needed to render the menu item.

WebFXMenuBar

This object type is used for menu bars. The menu bar extends a menu so all properties and methods available on a menu are available to the menu bar. Some caution is due. The position of the default implementation of the menu bar is static so size and position has no real effect.

Constructor

new WebFXMenuBar()
Name Description
No arguments

Properties

Same as for WebFXMenu

Methods

Same as for WebFXMenu

WebFXMenuButton

This object type is used for buttons on a menu bar. The menu button extends the menu item so all properties and methods available on a menu item are available to the menu button. Some caution is due. The height property is not used for anything right now.

Constructor

new WebFXMenuButton(sText, sHref, sToolTip, oSubMenu)

Same as for WebFXMenuItem.

Properties

Same as for WebFXMenuItem

Methods

Same as for WebFXMenuItem

webFXMenuHandler

This object is used to handle the XMenu system and has a some methods to handle the menus.

Constructor

Not available. The webFXMenuHandler is already available as an object.

Properties

Name Description
all A collection that maps an id to a JS object. This can be useful for finding the JS object assosciated with an HTMLElement.

Methods

Name Description
showMenu(oMenu [, relObj [, sDir]]) Allows you to show a menu from outside the menu system. This way is preferred to calling show on the actual menu item because it also handles the show and hide timers. The second and third argument are the same as in the method position for WebFXMenu and are used to position the menu relative to an object.
hideMenu(oMenu) Allows you to hide a menu from outside the menu system. This way is preferred to calling hide on the actual menu item because it also handles the show and hide timers.

There are more methods and properties on the webFXMenuHandler but these are mostly needed for internal work.

Global Constants

There are a couple of global constants that are used to describe how the menus work. A lot of these are just used to define the default properties and these will not be listed again.

Name Description
webfxMenuUseHover If this is set to true then the menu will be set in hover mode and this means that the menu will open on mouse over and hide on mouse out.
webfxMenuShowTime This is the time to wait before showing a menu. Using 0 when the menu is in hover mode is not recommended because then the menus will popup even when the user did not intend them to.
webfxMenuHideTime This is the time to wait before hiding a menu. When using normal mode it is important that this time is fairly large (~300ms) because otherwise the user will not have time to complete the click on the menu item she/he intended. When using hover mode this time should be about the same. If too small the menus will hide when going between sub menus.
webfxMenuImagePath This is the path to the images to use as arrows in the menu items. This should be the relative path from the web page location. Default value is "" and that means the same directory.

Introduction & Browser Issues
Usage
Implementation
API
Look & Feel
Hover Menu

Author: Erik Arvidsson