XMenu API (WebFX)

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.
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