Using Dynamic Manipulation Metods

Menus have set of methods that allow dynamic menu manipulation on the stage of menu creation:

methods for adding submenus

methods for adding and deleting menu items (keep in mind that you can't perform items manipulations after submenu was created - after .apply() call)

methods for style manipulation

All those methods are described below.

You also can create new menus and new menus' items just by one click!

Creating An Empty Menu

To create an empty menu, null must be passed as a menu definition:

var Menu = new CMenu (null, 'Menu');

Of course, you can pass any correct menu definition here, and the menu will be created usual way.

Object References

In order to manipulate a menu or menu item, you need to obtain an interface object reference. When the menu is created, the reference returned allows only to create and run menu functions, such as create() or run().

Keep in mind that you can't perform items manipulations after submenu was created - after .apply() call.

To receive the interface reference, you have to call the obj() method:

var menuref = Menu.obj()

Here ref is a reference to the menu interface object.

Menu/Items Manipulation Metods

Creating And Deleting Menu Items

addItem method

Creates a new item in the menu.

Syntax: itemref = ref.addItem( [definition] )

Where:

ref - the menu interface reference;
definition - the object-style item definition. See defining menu items for details. If null or empty, the menu item without any properties is created.

Returns:

itemref - the reference to the menu item object.

Example:

var item = menuref.addItem( { "text" : "Item1" } ); var item2 = menuref.addItem();

delItem method

Removes the item with the index from the menu.

Syntax: ref.delItem( index )

Where:

ref - the menu interface reference;
index - the index of the item to delete.

Returns: none.

Example:

menuref.delItem(0);

getItem method

Returns the reference to menu item object with the index specified.

Syntax: itemref = ref.getItem( index )

Where:

ref - the menu interface reference;
index - the index of the item to receive reference to.

Returns:

itemref - the reference to the menu item object

Example:

var item = menuref.getItem(0);

Setting And Obtaining Menu Style Attributes

St method

Sets an attribute value or definition of the "style" property.

Syntax: ref.St( attribute_name, attribute_definition )

Where:

ref - the menu interface reference;
attribute_name - string identifying the name of the style attribute, as in menu style attributes
attribute_definition - any possible attribute definition or value. See menu style attributes for details.

Example:

//set 'bgcolor' attribute value menuref.St('bgcolor', '#FFFFFF'); //set 'border' attribute definition menuref.St('border', { "width" : 2, "color" : "black" } );

StOver method

Sets or returns an attribute value or definition of the "itemover" property.

Syntax: attribute_value = ref.StOver( attribute_name [, attribute_definition] )

Where:

ref - the menu interface reference;
attribute_name - string identifying the name of the style attribute, as in menu item mouse-over style attributes
attribute_definition - any possible attribute definition or value. See menu item mouse-over style attributes for details.

Returns:

attribute_value - the value or the definition of the menu "style" property attribute.

Example:

//get 'color' attribute value var color = menuref.StOver('color'); //set 'bgcolor' attribute value menuref.StOver('bgcolor', '#FFFFFF');

StOn method

Sets or returns an attribute value or definition of the "itemon" property.

Syntax: attribute_value = ref.StOn( attribute_name [, attribute_definition] )

Where:

ref - the menu interface reference;
attribute_name - string identifying the name of the style attribute, as in menu item 'on'-state style attributes
attribute_definition - any possible attribute definition or value. See menu item 'on'-state style attributes for details.

Returns:

attribute_value - the value or the definition of the menu "style" property attribute.

Example:

//get 'color' attribute value var color = menuref.StOn('color'); //set 'bgcolor' attribute value menuref.StOn('bgcolor', '#FFFFFF');

Additional Menu Methods

Separator method

Sets or returns the definition of "separator" property.

Syntax: separator_def = ref.Separator( [separator_definition] )

Where:

ref - the menu interface reference;
separator_definition - any possible separator definition. See defining separators for details.

Returns:

separator_def - the definition of the menu "separator" property attribute.

Example:

//get separator property var sep = menuref.Separator(); //set 'separator' definition menuref.Separator( { "style" : { "bgcolor" : "black", "size" : [100, 1] } } );

Additional Menu Item Methods

Type method

Sets or returns the definition of "type" property.

Syntax: type = ref.Type( [type_value] )

Where:

ref - reference to the menu item;
type_value - any possible item type value. See menu item types for details.

Returns:

type - the value of the menu item "type" property.

Example:

//get type property var type = itemref.Type(); //set 'type' property itemref.Type("separator");

Act method

Sets or returns the value of "action" property.

Syntax: attribute_val = ref.Act( attribute_name [,attribute_value] )

Where:

ref - reference to the menu item;
attribute_name - string identifying the name of the position attribute, as in menu item actions
attribute_value - any possible attribute value for "action" property. See menu item actions for details.

Returns:

atribute_val - the value of "action" property's attribute

Example:

//get 'js' property var js = itemref.Act('js'); //set 'url' property itemref.Act( 'url', 'http://www.codethat.com' );

setText method

Sets the value of "text", "textover", "texton" property.

Syntax: ref.setText( text_value[, property_switch] )

Where:

ref - reference to the menu item;
text_value - any possible item caption.
property_switch - specifies the text property to set the value for. Possible values are: "on" and "over" which correspond to "texton" and "textover" properties. To set the "text" property, specify "" or just omit this parameter.

Returns: none

Example:

//set 'text' property itemref.setText( "Item caption" );

//set 'textover' property itemref.setText( "Item is overed!", "over" );

Example - Dynamic Menu

You can see an example and complete code here - Dynamic Menu Example

One Click Menu Creation

If you'd like to give your users possibility to create new menu just by choosing its parameters and then clicking only button, you should create a small code before.

Use methods that were described above.

For example, lets create .js file like this:

var dynmenu = new CMenu(null, 'dynmenu');
var o = dynmenu.obj();
o.St('size', [100, 20]);
o.St('border', {
	"color" : "black", "width" : 2
} );
o.St('direction', 'h');
o.St('align', 'center');
o.St('imgendoff', {
	src : 'img/arr_right.gif', width : 16, height : 16
} );
o.St('imgendon', {
	src : 'img/arr_down.gif', width : 16, height : 16
} );
o.Pos('absolute', false);
o.StOver('bgcolor', '#DDDDDD');

Now we create two functions:

function addMenu () {
	var item = dynmenu.obj().getItem(0);
	var popup = item.addPopup();
	popup.St('direction', 'v');
	popup.Pos('anchor', 'sw');
	popup.apply();
}

function delMenu () {
	dynmenu.obj().getItem(0).delPopup()
}

Then you have to include .js file into your .html file and create a form, where user can choose menu parameters.

Example - One Click Menu Creation

You can see an example and complete code here - One click menu creation

Read more about CodeThatMenu >>