DHTML Menu 4 API (WebFX)

The class that represents a menu.

Syntax

new Menu()

Parameters

Static Methods

Name	Description
None.

Static Fields

Name	Type	Descripton
`keyboardAccelKey`	`Number`	The keyCode for the key that is used to activate the menubar
`keyboardAccelProperty`	`String`	The preoperty name for the property of the event object used in keyboard related events that when true should disable the defautl action

Methods

Name Description

add

Syntax

object.add(mi)

Arguments

Name	Type	Descripton
`mi`	`MenuItem`	The menu item to add

Return Type

MenuItem

Adds a menu item last to the menu

areSizesCached

Syntax

object.areSizesCached()

Arguments

No Arguments.

Return Type

Boolean

Returns whether the sizes are cached

cacheSizes

Syntax

object.cacheSizes(bForce)

Arguments

Name	Type	Descripton
`bForce`	`Boolean`	Force recalculation of the sizes. If false then the size are only recalulated if not already cached

Return Type

void

Depreciated. Use updateSizeCache and/or resetSizeCache instead. Used to recalculate the sizes and cache them for future use

Syntax

object.close()

Arguments

No Arguments.

Return Type

void

Closes the menu

closeAllMenus

Syntax

object.closeAllMenus()

Arguments

No Arguments.

Return Type

void

Closes all menus in the menu tree

closeAllSubs

Syntax

object.closeAllSubs(oNotThisSub)

Arguments

Name	Type	Descripton
`oNotThisSub`	`Menu`	The menu not to close

Return Type

void

Closes all the sub menus except the provided one. If no argument is passed all subs are closed.

createPopup

Syntax

object.createPopup()

Arguments

No Arguments.

Return Type

void

Creates the popup object used for the menu

drawMenu

Syntax

object.drawMenu()

Arguments

No Arguments.

Return Type

void

Draws the menu inside the popup object. This function does nothing if the menu is not invalidated

fixScrollButtons

Syntax

object.fixScrollButtons()

Arguments

No Arguments.

Return Type

void

Fixes the visibility of the scroll buttons

fixScrollEnabledState

Syntax

object.fixScrollEnabledState()

Arguments

No Arguments.

Return Type

void

If the scroll buttons are showed this enables and disables the buttons depending on the current scroll position

fixSize

Syntax

object.fixSize()

Arguments

No Arguments.

Return Type

void

Resizes the menu to fit its content

getDocument

Syntax

object.getDocument()

Arguments

No Arguments.

Return Type

HTMLDocument

Returns the document inside the popup used for the menu

getHeight

Syntax

object.getHeight()

Arguments

No Arguments.

Return Type

Number

Returns the height of the menu

getInsetBottom

Syntax

object.getInsetBottom()

Arguments

No Arguments.

Return Type

Number

Returns the distance between the lower outer edge of the menu and the last menu item

getInsetLeft

Syntax

object.getInsetLeft()

Arguments

No Arguments.

Return Type

Number

Returns the distance between the outer left edge of the menu and the menu items

getInsetRight

Syntax

object.getInsetRight()

Arguments

No Arguments.

Return Type

Number

Returns the distance between the right outer edge of the menu and the menu items

getInsetTop

Syntax

object.getInsetTop()

Arguments

No Arguments.

Return Type

Number

Returns the distance between the outer upper edge of the menu and the first menu item

getLeft

Syntax

object.getLeft()

Arguments

No Arguments.

Return Type

Number

Returns the left position of the menu

getMeasureDocument

Syntax

object.getMeasureDocument()

Arguments

No Arguments.

Return Type

HTMLDocument

Returns a document that can be used to measure the content inside the menu

getMenuBar

Syntax

object.getMenuBar()

Arguments

No Arguments.

Return Type

MenuBar

Returns the first parent menu that is an instance of the class MenuBar

getPreferredHeight

Syntax

object.getPreferredHeight()

Arguments

No Arguments.

Return Type

Number

Returns the preferred height of the menu. This is the sum of all items and assuming that no scroll buttons are needed

getPreferredWidth

Syntax

object.getPreferredWidth()

Arguments

No Arguments.

Return Type

Number

Returns the preferred width of the menu. This is the width of the widest menu item.

getSelectedIndex

Syntax

object.getSelectedIndex()

Arguments

No Arguments.

Return Type

Number

Returns the index of the selected menu item

getTop

Syntax

object.getTop()

Arguments

No Arguments.

Return Type

Number

Returns the top position of the menu

getWidth

Syntax

object.getWidth()

Arguments

No Arguments.

Return Type

Number

Returns the width of the menu

goToNextMenu

Syntax

object.goToNextMenu()

Arguments

No Arguments.

Return Type

void

Goes to the next menu. If the currently selected menu item has a sub menu then this is selected. If not the next menu button on the menu bar is selected.

goToNextMenuItem

Syntax

object.goToNextMenuItem()

Arguments

No Arguments.

Return Type

void

Selects the next menu item in the menu. If the last item was selected the first one becomes selected. Notice that menu separators are skipped.

goToPreviousMenu

Syntax

object.goToPreviousMenu()

Arguments

No Arguments.

Return Type

void

Goes to the previous menu. If the current menu has a parent menu then this menu is closed. If not then the previous menu button on the menu bar is selected.

goToPreviousMenuItem

Syntax

object.goToPreviousMenuItem()

Arguments

No Arguments.

Return Type

void

Selects the previous menu item in the menu. If the first item is selected the last one becomes selected. Notice that menu separators are skipped.

handleKeyEvents

Syntax

object.handleKeyEvents(oEvent)

Arguments

Name	Type	Descripton
`oEvent`	`Event`	The event object used for the keydown event

Return Type

void

This is called when a keydown event is fired on the menu

hookupMenu

Syntax

object.hookupMenu()

Arguments

No Arguments.

Return Type

void

Hookups events and connections between the HTML DOM and the JavaScript objects

invalidate

Syntax

object.invalidate()

Arguments

No Arguments.

Return Type

void

Marks the menu as dirty. The next time the menu is shown it is first redrawn

isShown

Syntax

object.isShown()

Arguments

No Arguments.

Return Type

Boolean

Returns whether the menu is shown or not

remove

Syntax

object.remove(mi)

Arguments

Name	Type	Descripton
`mi`	`MenuItem`	The item to remove

Return Type

MenuItem

Removes a menu item from the menu

resetSizeCache

Syntax

object.resetSizeCache()

Arguments

No Arguments.

Return Type

void

Clears the cached sizes

setLeft

Syntax

object.setLeft(nLeft)

Arguments

Name	Type	Descripton
`nLeft`	`Number`	The new left position

Return Type

void

Depreciated. Use show instead. Sets the left position of the menu

setLocation

Syntax

object.setLocation(nLeft, nTop)

Arguments

Name	Type	Descripton
`nLeft`	`Number`	The new left position
`nTop`	`Number`	The new top position

Return Type

void

Depreciated. Use show instead. Sets both left and top position of the menu

setRect

Syntax

object.setRect(nLeft, nTop, nWidth, nHeight)

Arguments

Name	Type	Descripton
`nLeft`	`Number`	The new left position
`nTop`	`Number`	The new top position
`nWidth`	`Number`	The new width position
`nHeight`	`Number`	The new height position

Return Type

void

Depreciated. Use show instead. Sets both location and size of the menu

setSelectedIndex

Syntax

object.setSelectedIndex(nIndex)

Arguments

Name	Type	Descripton
`nIndex`	`Number`	The index of the menu item to select

Return Type

void

Selects the menu item with the provided index

setTop

Syntax

object.setTop(nTop)

Arguments

Name	Type	Descripton
`nTop`	`Number`	The new top position

Return Type

void

Depreciated. Use show instead. Sets the top position of the menu

show

Syntax

object.show([left [, left [, left [, left]]]])

Arguments

Name	Type	Descripton
`left`	`Number`	Optional. The left position The default value is `0`.
`left`	`Number`	Optional. The left position The default value is `0`.
`left`	`Number`	Optional. The left position
`left`	`Number`	Optional. The left position

Return Type

void

Shows the menu at the given location and with the given size

toHTML

Syntax

object.toHTML()

Arguments

No Arguments.

Return Type

String

Returns the HTML code needed to draw the menu

updateSizeCache

Syntax

object.updateSizeCache(bForce)

Arguments

Name	Type	Descripton
`bForce`	`Boolean`	If true then the sizes will be recalculated even if there might not be necessary

Return Type

void

Updates the cached sizes if needed.

Fields

Name	Type	Descripton
`closeTimeout`	`Number`	The time in ms to wait before hiding a menu
`cssFile`	`String`	The path to the css file used to define the look of the menu
`items`	`MenuItem[]`	Read only. An array containing the MenuItem objects for the menu
`mouseHoverDisabled`	`Boolean`	If false the mouse hovers selects disabled menu items. If true only keyboard navigations selects disabled items.
`parentMenu`	`Menu`	Read only. The parent menu
`parentMenuItem`	`MenuItem`	Read only. If this menu is a submenu that belongs to a menu item this points at that menu item
`popup`	`Window`	Read only. The popup window used to display the menu
`selectedIndex`	`Number`	Read only. The index of the selected menu item. Use getter and setter instead.
`shownSubMenu`	`Menu`	Read only. If any submenu is shown this will point to that ment
`showTimeout`	`Number`	The time in ms to wait before showing a menu

Events

Name	Descripton
None.

Remarks

None.

MenuItem

This class represents a menu item

Syntax

new MenuItem(sLabelText [, fAction [, sIconSrc [, oSubMenu]]])

Parameters

Name	Type	Descripton
`sLabelText`	`String`	The text to show on the menu item
`fAction`	`Function or String`	Optional. The function to call when the menu item is clicked. If this is a string then it is treated as an URI.
`sIconSrc`	`String`	Optional. The URI to the image to use as icon
`oSubMenu`	`Menu`	Optional. The Menu object to use as a submenu

Static Methods

Name	Description
None.

Static Fields

Name	Type	Descripton
None.

Methods

Name Description

closeSubMenu

Syntax

object.closeSubMenu([bDelayed])

Arguments

Name	Type	Descripton
`bDelayed`	`Boolean`	Optional. If true then the closing of the sub menu will be delayed Menu.prototype.closeTimeout ms The default value is `false`.

Return Type

void

If the menu item has a sub menu then this will be closed

dispatchAction

Syntax

object.dispatchAction()

Arguments

No Arguments.

Return Type

void

Fires the action on the menu item. If the menu item has a function as it action property then this function is called now. If the action is a string then this is considered to be an URI that the browser should navigate to.

getCssClass

Syntax

object.getCssClass()

Arguments

No Arguments.

Return Type

String

Returns the class name to use on the table row used to render the menu item

getIconCellHtml

Syntax

object.getIconCellHtml()

Arguments

No Arguments.

Return Type

String

Returns the HTML string needed to render the cell with the icon inside it

getIconHtml

Syntax

object.getIconHtml()

Arguments

No Arguments.

Return Type

String

Returns the HTML string needed to render the icon

getSelected

Syntax

object.getSelected()

Arguments

No Arguments.

Return Type

Boolean

Returns whether the menu item is selected or not

getShortcutCellHtml

Syntax

object.getShortcutCellHtml()

Arguments

No Arguments.

Return Type

String

Returns the HTML String needed to render the cell containing the shortcut text

getShortcutHtml

Syntax

object.getShortcutHtml()

Arguments

No Arguments.

Return Type

String

Returns the HTML string needed to render the shortcut text

getSubMenuArrowCellHtml

Syntax

object.getSubMenuArrowCellHtml()

Arguments

No Arguments.

Return Type

String

Returns the HTML string used to render the cell with the sub menu arrow in it

getSubMenuArrowHtml

Syntax

object.getSubMenuArrowHtml()

Arguments

No Arguments.

Return Type

String

Returns the HTML string used to render the arrow indicating a sub menu

getTextCellHtml

Syntax

object.getTextCellHtml()

Arguments

No Arguments.

Return Type

String

Returns the HTML string needed to render the cell with the text inside it

getTextHtml

Syntax

object.getTextHtml()

Arguments

No Arguments.

Return Type

String

Returns the HTML string to use for the text on the menu item. If a mnemonic character is set the text is updated to underline that charcter.

getToolTip

Syntax

object.getToolTip()

Arguments

No Arguments.

Return Type

String

Returns the tooltip text for the menu item

makeDisabledContainer

Syntax

object.makeDisabledContainer(s)

Arguments

Name	Type	Descripton
`s`	`String`	The text to enclose

Return Type

String

Encloses the argument in the HTML code needed to display the item as disabled

positionSubMenu

Syntax

object.positionSubMenu()

Arguments

No Arguments.

Return Type

void

Positions the sub menu relative to the menu item. The size and location as well as the property subMenuDirection is taken into account.

scrollIntoView

Syntax

object.scrollIntoView()

Arguments

No Arguments.

Return Type

void

If the parent menu is scrollable this scrolls the item into view

setSelected

Syntax

object.setSelected(bSelected)

Arguments

Name	Type	Descripton
`bSelected`	`Boolean`	Whether to select the item or not

Return Type

void

Selects or deselects the menu item

showSubMenu

Syntax

object.showSubMenu([bDelayed])

Arguments

Name	Type	Descripton
`bDelayed`	`Boolean`	Optional. If true then the showing of the sub menu will be delayed Menu.prototype.showTimeout ms The default value is `false`.

Return Type

void

If the menu item has a sub menu then this is shown

Fields

Name	Type	Descripton
`action`	`Function or String`	The action to do when the item is clicked. If this is a function it is called as amethod. If it is a string then this is treated as an URI that will be navigated to.
`disabled`	`Boolean`	If the item is disabled or not
`icon`	`String`	The URI to the iamge to use as icon
`mnemonic`	`String`	The character that can be used to dipatch the action for the menu item. This is the letter that should be underlined in the text of the item.
`shortcut`	`String`	The text to show in the shortcut cell.This is only for informative purpose
`target`	`String`	The name of the target window or frame. This can be used in conjunction with the action property to open links in different window or frames.
`text`	`String`	The text to show on the menu item
`tooltip`	`String`	The text to show as a tooltip when the user hovers the item with the mouse
`visible`	`Boolean`	If false then the menu item is not rendered in the menu.

Events

Name	Descripton
None.

Remarks

None.

CheckBoxMenuItem

This class extends MenuItem and therefore all methods and field available for MenuItem are also available for CheckBoxMenuItem.

This is a menu item that has a check box next to it. When clicked the check box is toggled

Syntax

new CheckBoxMenuItem(sLabelText [, bChecked [, fAction [, oSubMenu]]])

Parameters

Name	Type	Descripton
`sLabelText`	`String`	The text to show on the menu item
`bChecked`	`Boolean`	Optional. Whether the item should be checked or not
`fAction`	`Function or String`	Optional. The function to call when the menu item is clicked. If this is a string then it is treated as an URI.
`oSubMenu`	`Menu`	Optional. The Menu object to use as a submenu

Static Methods

Name	Description
None.

Static Fields

Name	Type	Descripton
None.

Methods

Name	Description
None.

Fields

Name	Type	Descripton
`checked`	`Boolean`	Whether the item is checked or not

Events

Name	Descripton
None.

Remarks

None.

RadioButtonMenuItem

This class extends MenuItem and therefore all methods and field available for MenuItem are also available for RadioButtonMenuItem.

This is a menu item that has a check box next to it. When clicked the check box is toggled

Syntax

new RadioButtonMenuItem(sLabelText [, bChecked [, sRadioGroupName [, fAction [, oSubMenu]]]])

Parameters

Name	Type	Descripton
`sLabelText`	`String`	The text to show on the menu item
`bChecked`	`Boolean`	Optional. Whether the item should be checked or not
`sRadioGroupName`	`String`	Optional. This is the name of the logical radio group that the menu item should belong to. Notice that only one item can be checked at the same time in the same group. Groups are local to the current menu.
`fAction`	`Function or String`	Optional. The function to call when the menu item is clicked. If this is a string then it is treated as an URI.
`oSubMenu`	`Menu`	Optional. The Menu object to use as a submenu

Static Methods

Name	Description
None.

Static Fields

Name	Type	Descripton
None.

Methods

Name	Description
None.

Fields

Name	Type	Descripton
`checked`	`Boolean`	Whether the item is checked or not
`radioGroupName`	`String`	This is the name of the logical radio group that the menu item should belong to. Notice that only one item can be checked at the same time in the same group. Groups are local to the current menu.

Events

Name	Descripton
None.

Remarks

None.

MenuSeparator

This class extends MenuItem and therefore all methods and field available for MenuItem are also available for MenuSeparator.

This is a menu item that has a check box next to it. When clicked the check box is toggled

Syntax

new MenuSeparator()

Parameters

Static Methods

Name	Description
None.

Static Fields

Name	Type	Descripton
None.

Methods

Name	Description
None.

Fields

Name	Type	Descripton
None.

Events

Name	Descripton
None.

Remarks

None.

MenuBar

This class extends Menu and therefore all methods and field available for Menu are also available for MenuBar.

The class used to create menu bars

Syntax

new MenuBar()

Parameters

Static Methods

Name	Description
None.

Static Fields

Name	Type	Descripton
None.

Methods

Name Description

backupFocused

Syntax

object.backupFocused()

Arguments

No Arguments.

Return Type

void

Saves a reference to the currently focused element for later use

create

Syntax

object.create()

Arguments

No Arguments.

Return Type

HTMLElement

Creates the HTMLElement needed to render the menu bar. This can later be inserted into the tree.

getActiveState

Syntax

object.getActiveState()

Arguments

No Arguments.

Return Type

String

Returns the active state. The state can be one of three values: "active" (this occurs when the menu bar is active and no menu is opened), "open" (the menu bar us active but a menu is open) and "inactive" (no menus open and not active).

restoreFocused

Syntax

object.restoreFocused()

Arguments

No Arguments.

Return Type

void

Restores the backuped focused element

setActive

Syntax

object.setActive(bActive)

Arguments

Name	Type	Descripton
`bActive`	`Boolean`	Whether the menu bar should be active or not

Return Type

void

Sets whether the menu bar should be active. When active, the user can use the keyboard to navigate on the menu bar.

toggleActive

Syntax

object.toggleActive()

Arguments

No Arguments.

Return Type

void

Toggles the active state. If active it becomes inactive and the other way around

write

Syntax

object.write()

Arguments

No Arguments.

Return Type

void

Writes the HTML code needed to render the menu bar into the document where this is called

Fields

Name	Type	Descripton
None.

Events

Name	Descripton
None.

Remarks

None.

MenuButton

This class extends MenuItem and therefore all methods and field available for MenuItem are also available for MenuButton.

This is a menu button that is used on the menu bar.

Syntax

new MenuButton(sLabelText [, oSubMenu])

Parameters

Name	Type	Descripton
`sLabelText`	`String`	The text to show on the menu button
`oSubMenu`	`Menu`	Optional. The Menu object to use as a sub menu

Static Methods

Name	Description
None.

Static Fields

Name	Type	Descripton
None.

Methods

Name	Description
None.

Fields

Name	Type	Descripton
None.

Events

Name	Descripton
None.

Remarks

None.

Globals

Functions

Name Description

getMenuItemElement

Syntax

getMenuItemElement(el)

Arguments

Name	Type	Descripton
`el`	`Element`	The element to check its ancestors

Return Type

Element

Returns the first element that represents a menu item

Objects

Name	Type	Descripton
None.

Introduction
Menu Creation
Menu Bar Creation
Usage
API
Customizing look & feel
Demos
Download

Author: Erik Arvidsson