Reference « Documentation

Coding Reference for jsDOMenuBar Version 1.1

This reference describes the methods and fields available in jsDOMenuBar. You may also wish to view the coding reference for jsDOMenu at the same time.

Global public constructors

jsDOMenuBar()

Create a new menu bar.

Syntax

menuBarObj = new jsDOMenuBar(mode, id, draggable, className, width, height);

Arguments

mode - Optional. String that specifies the mode of the menu bar. Defaults to "absolute". Allowed values are "absolute", "fixed" and "static". If the mode = "static", you must also specify an unique id.

A menu bar is absolutely positioned if it is fixed at a particular position with respect to the document. It will move with the page when you scroll.

A menu bar is fixed positioned if it is fixed at a particular position with respect to the window. It will always be visible regardless of how much you scroll.

A menu bar is statically positioned if it is fixed at a particular position with respect to the document structure. Thus, it is not required to call methods like setX(), moveTo(), etc to position the menu bar.

id - Optional, except when mode = "static". String that specifies the id of the element that will contain the menu bar. This argument is required when mode = "static". It is recommended that the element you specify is an empty DIV tag. For example:

<div id="staticMenuBar"></div>

Note that the id must be unique.

draggable - Optional. Boolean that specifies whether the menu bar is draggable. Defaults to false. If set to true, you can position the cursor to the dragging region (the leftmost region of the menu bar) to drag it.

className - Optional. String that specifies the CSS class selector for the menu bar. Defaults to "jsdomenubardiv". The class selector "jsdomenubardiv" is defined in the theme file, e.g. classic.css.

width - Optional. Integer that specifies the width of the menu bar. Defaults to "auto". Default unit is "px".

height - Optional. Integer that specifies the height of the menu bar. Defaults to "auto". Default unit is "px".

Remarks

The method signature for this constructor has been changed compared with the previous version (v1.0.1).

You can access the HTML element object of the menu bar using the menuBarObj field. For example, menuBarObj.menuBarObj.style holds the style object of the HTML element.


menuBarItem()

Create a new menu bar item.

Syntax

menuBarItemObj = new menuBarItem(displayText, menuObj, itemName, enabled, 
                                 actionOnClick, className, classNameOver, classNameClick);

Arguments

displayText - Required. String that specifies the text to be displayed on the menu bar item.

menuObj - Optional. Menu that is the main menu for the menu bar item. Defaults to null (no menu). If a menu is set, the value of actionOnClick will not be used.

itemName - Optional. String that specifies the name of the menu bar item. Defaults to "" (no name). You should set this argument only if you need to reference this menu bar item later on.

enabled - Optional. Boolean that specifies whether the menu bar item is enabled/disabled. Defaults to true. The default value can also be set using "".

actionOnClick - Optional. String that specifies the action to be done when the menu item is being clicked if no main menu has been set for the menu bar item. Defaults to "" (no action). If a main menu has been set, this value will not be used.

There are two types of actions allowed:

To distinguish between the two types, prefix "link:" or "code:" respectively to the value. For example, "code:alert('Hello World!');" instead "alert('Hello World!');". For links, prefixing "link:" is optional, as any prefix other than "code:" will be intepreted as a link.

className - Optional. String that specifies the CSS class selector for the menu bar item. Defaults to "jsdomenubaritem". The default value can also be set using "". The class selector "jsdomenubaritem" is defined in the theme file, e.g. classic.css.

classNameOver - Optional. String that specifies the CSS class selector for the menu bar item when the cursor is over it. Defaults to "jsdomenubaritemover". The default value can also be set using "". The class selector "jsdomenubaritemover" is defined in the theme file, e.g. classic.css.

classNameClick - Optional. String that specifies the CSS class selector for the menu bar item when the cursor is clicked on it. Defaults to "jsdomenubaritemclick". The default value can also be set using "". The class selector "jsdomenubaritemclick" is defined in the theme file, e.g. classic.css.

Remarks

If you need to define any argument, you must also define the arguments before it. For example, if you need to define the third argument, but not the second, you still need to set the second argument to "" (default value).

The following codes are equivalent to the above:

menuBarItemObj = new menuBarItem();
menuBarItemObj.displayText = displayText;
menuBarItemObj.menuObj = menuObj;
menuBarItemObj.itemName = itemName;
menuBarItemObj.enabled = enabled;
menuBarItemObj.actionOnClick = actionOnClick;
menuBarItemObj.className = className;
menuBarItemObj.classNameOver = classNameOver;
menuBarItemObj.classNameClick = classNameClick;

You should only define the fields that need to be changed.


addMenuBarItem()

Add a new menu bar item to the menu bar.

Syntax

menuBarObj.addMenuItem(menuBarItemObj);

Argument

menuBarItemObj - Required. Menu bar item that is going to be added to the menu bar.

Remarks

You can access the HTML element object of the menu bar item using the items field. For example, menuBarObj.items["itemName"].style (or menuBarObj.items.itemName.style) holds the style object of the HTML element, where "itemName" is the value of itemName field of the menuBarItemObj added.


setMode()

Set the mode of the menu bar.

Syntax

menuBarObj.setMode(mode);

Argument

mode - Required. String that specifies the mode of the menu. Allowed values are "absolute" and "fixed".

Remarks

-


setActivateMode()

Set the activate mode of the menu bar.

Syntax

menuBarObj.setActivateMode(activateMode);

Argument

activateMode - Required. String that specifies the activate mode of the menu bar. Allowed values are "click" and "over".

The "click" mode requires users to click on the menu bar item to show the menu bar menu, while the "over" mode only requires users to move the cursor over the menu bar item to show the menu bar menu.

Remarks

-


setDraggable()

Set whether the menu bar is draggable.

Syntax

menuBarObj.setDraggable(draggable);

Argument

draggable - Required. Boolean that specifies whether the menu bar is draggable. If set to true, you can position the cursor to the dragging region (the leftmost region of the menu bar) to drag it.

Remarks

-


setClassName()

Set the class name of the menu bar.

Syntax

menuBarObj.setClassName(className);

Argument

className - Required. String that specifies the CSS class selector for the menu bar.

Remarks

The following code is equivalent to the above:

menuBarObj.menuBarObj.className = className;

setDragClassName()

Set the class name of the dragging region of the menu bar.

Syntax

menuBarObj.setDragClassName(className);

Argument

className - Required. String that specifies the CSS class selector for the dragging region of the menu bar.

Remarks

The following code is equivalent to the above:

menuBarObj.dragObj.className = className;

show()

Show the menu bar.

Syntax

menuBarObj.show();

Argument

None

Remarks

The following code is equivalent to the above:

menuBarObj.menuBarObj.style.visibility = "visible";

hide()

Hide the menu bar.

Syntax

menuBarObj.hide();

Argument

None

Remarks

The following code is equivalent to the above:

menuBarObj.menuBarObj.style.visibility = "hidden";

setX()

Set the x-coordinate of the menu bar.

Syntax

menuBarObj.setX(x);

Argument

x - Required. Integer that specifies the x-coordinate of the menu bar. Default unit is "px".

Remarks

-


setY()

Set the y-coordinate of the menu bar.

Syntax

menuBarObj.setY(y);

Argument

y - Required. Integer that specifies the y-coordinate of the menu bar. Default unit is "px".

Remarks

-


moveTo()

Move the menu bar to the x-coordinate specified by the first argument and the y-coordinate specified by the second argument.

Syntax

menuBarObj.moveTo(x, y);

Arguments

x - Required. Integer that specifies the x-coordinate of the menu bar. Default unit is "px".

y - Required. Integer that specifies the y-coordinate of the menu bar. Default unit is "px".

Remarks

-


moveBy()

Move the menu bar towards left by the amount specified by the first argument, and away from top by the amount specified by the second argument. If you want to move the menu bar towards right, or away from bottom, specify a negative value respectively.

Syntax

menuBarObj.moveBy(x, y);

Arguments

x - Required. Integer that specifies how much left/right the menu bar will move. Default unit is "px".

y - Required. Integer that specifies how much top/bottom the menu bar will move. Default unit is "px".

Remarks

-


setBorderWidth()

Set the border width of the menu bar.

Syntax

menuBarObj.setBorderWidth(width);

Argument

width - Required. Integer that specifies the border width of the menu bar. Default unit is "px".

Remarks

This method may be deprecated in future versions. Therefore, try not to use it in this version.

It is recommended that you set the border width using stylesheet instead.

The following code is equivalent to the above:

menuBarObj.menuBarObj.style.borderWidth = width + "px";

setClassName()

Set the class name of the menu bar item.

Syntax

menuBarObj.items["itemName"].setClassName(className);

Argument

className - Required. String that specifies the CSS class selector for the menu bar item.

Remarks

The following code is equivalent to the above:

menuBarObj.items.itemName.setClassName(className);

setClassNameOver()

Set the class name of the menu bar item when the cursor is over it.

Syntax

menuBarObj.items["itemName"].setClassNameOver(classNameOver);

Argument

classNameOver - Required. String that specifies the CSS class selector for the menu bar item when the cursor is over it.

Remarks

The following code is equivalent to the above:

menuBarObj.items.itemName.setClassNameOver(classNameOver);

setClassNameClick()

Set the class name of the menu bar item when the cursor is clicked on it.

Syntax

menuBarObj.items["itemName"].setClassNameClick(classNameClick);

Argument

classNameClick - Required. String that specifies the CSS class selector for the menu bar item when the cursor is clicked on it.

Remarks

The following code is equivalent to the above:

menuBarObj.items.itemName.setClassNameClick(classNameClick);

setDisplayText()

Set the display text of the menu bar item.

Syntax

menuBarObj.items["itemName"].setDisplayText(displayText);

Argument

displayText - Required. String that specifies the text to be displayed on the menu bar item.

Remarks

The following code is equivalent to the above:

menuBarObj.items.itemName.setDisplayText(displayText);

setMenu()

Set the main menu for the menu bar item.

Syntax

menuBarObj.items["itemName"].setMenu(menuObj);

Argument

menuObj - Required. Menu that is the main menu for the menu bar item.

Remarks

The following code is equivalent to the above:

menuBarObj.items.itemName.setMenu(menuObj);

showIcon()

Show the icon before the display text.

Syntax

menuBarObj.items["itemName"].showIcon(className, classNameOver, classNameClick);

Arguments

className - Required. String that specifies the CSS class selector for the icon.

classNameOver - Optional. String that specifies the CSS class selector for the icon when the cursor is over the menu item.

classNameClick - Optional. String that specifies the CSS class selector for the icon when the cursor is clicked on the menu bar item.

Remarks

The following code is equivalent to the above:

menuBarObj.items.itemName.showIcon(className, classNameOver, classNameClick);

setIconClassName()

Set the class name of the icon.

Syntax

menuBarObj.items["itemName"].setIconClassName(className);

Argument

className - Required. String that specifies the CSS class selector for the icon.

Remarks

The following code is equivalent to the above:

menuBarObj.items.itemName.setIconClassName(className);

This method is available only if the showIcon() method has been called to show the icon before the display text.


setIconClassNameOver()

Set the class name of the icon when the cursor is over the menu bar item.

Syntax

menuBarObj.items["itemName"].setIconClassNameOver(classNameOver);

Argument

classNameOver - Required. String that specifies the CSS class selector for the icon when the cursor is over the menu bar item.

Remarks

The following code is equivalent to the above:

menuBarObj.items.itemName.setIconClassNameOver(classNameOver);

This method is available only if the showIcon() method has been called to show the icon before the display text.


setIconClassNameClick()

Set the class name of the icon when the cursor is clicked on the menu bar item.

Syntax

menuBarObj.items["itemName"].setIconClassNameClick(classNameClick);

Argument

classNameClick - Required. String that specifies the CSS class selector for the icon when the cursor is clicked on the menu bar item.

Remarks

The following code is equivalent to the above:

menuBarObj.items.itemName.setIconClassNameClick(classNameClick);

This method is available only if the showIcon() method has been called to show the icon before the display text.


Global public methods

hideMenuBarMenus()

Hide all menu bar menus.

Syntax

hideMenuBarMenus();

Argument

None.

Remarks

This method may be useful if you wish to control how the menu bar menus hide.


Global public fields

You can define the following global public fields in jsdomenu.config.js to override the default values.

menuBarClassName

String that specifies the CSS class selector for the menu bar.

Default Value

var menuBarClassName = "jsdomenubardiv";

Remarks

The class selector "jsdomenubardiv" is defined in the theme file, e.g. classic.css.


menuBarItemClassName

String that specifies the CSS class selector for the menu bar item.

Default Value

var menuBarItemClassName = "jsdomenubaritem";

Remarks

The class selector "jsdomenubaritem" is defined in the theme file, e.g. classic.css.


menuBarItemClassNameOver

String that specifies the CSS class selector for the menu bar item when the cursor is over it.

Default Value

var menuBarItemClassNameOver = "jsdomenubaritemover";

Remarks

The class selector "jsdomenubaritemover" is defined in the theme file, e.g. classic.css.


menuBarItemClassNameClick

String that specifies the CSS class selector for the menu bar item when the cursor is clicked on it.

Default Value

var menuBarItemClassNameClick = "jsdomenubaritemclick";

Remarks

The class selector "jsdomenubaritemclick" is defined in the theme file, e.g. classic.css.


menuBarDragClassName

String that specifies the CSS class selector for the dragging region of the menu bar.

Default Value

var menuBarDragClassName = "jsdomenubardragdiv";

Remarks

The class selector "jsdomenubardragdiv" is defined in the theme file, e.g. classic.css.


menuBarMode

String that specifies the default mode of the menu bars.

Default Value

var menuBarMode = "absolute";

Remarks

Allowed values are "absolute", "fixed", and "static".


menuBarActivateMode

String that specifies the default activate mode of the menu bars.

Default Value

var menuBarActivateMode = "click";

Remarks

Allowed values are "click" and "over".


menuBarBorderWidth

Integer that specifies the border width of the menu bar. Default unit is "px".

Default Value

var menuBarBorderWidth = 2;

Remarks

This field may be deprecated in future versions. Therefore, try not to use it in this version.

Safari will use the value of this field to render the menu bars when the page loads, and disregard the value set in the stylesheet. Other Gecko-based browsers like Mozilla Firefox or Microsoft Internet Explorer will use the value set in the stylesheet to render the menu bars when the page loads, and disregard the value of this field.


View the Example page to see a simple example of how to create jsDOMenuBar.

Back to Documentation


Compiled on 16 Jaunary 2005.

The latest version is available at http://www.tohzhiqiang.per.sg/projects/jsdomenubar/docs/reference.php.