The user can create a new sibling item in any polygon. To do this addNewSibling() method should be used. The parameters here are as follows:

• nextToId - id of the element after which the new item will be inserted.
• itemId - id of the new sibling item;
• itemText - the label of the new sibling item;
• disabled - true|false, if this new sibling item is disabled or enabled;
• img - path to image for the enabled state of the new sibling item;
• imgDis - path to image for the disabled state of the new sibling item.

The new sibling item will be inserted right after the item chosen as “nextToId” one.

    <script>
        menu.addNewSibling(nextToId, ItemId, itemText, disabled, img,imgDis);
    </script>

There is the possibility to create a child item for any item in the menu. The child item will be located in a sub-level polygon and won't be visible until its parent item is hovered over. addNewChild() method should be called and the following parameters are to be passed:

• parentId - id of the element that will contain the newly created item in its sub-level polygon;
• position - position/order of the new child item in the polygon among other child items, whether it comes first, second, etc. (starts with 0);
• itemId - id of the new child item;
• itemText - the label of the new child item;
• disabled - true|false, whether this new child item is disabled or not;
• img - path to image for the enabled state of the new child item;
• imgDis - path to image for the disabled state of the new child item.

      <script>
          menu.addNewChild(parentId, position, itemId, itemText, disabled, img, imgDis);
      </script>

Separators can be created with the help of addNewSeparator() method. A separator provides kind of a logical grouping of menu items. addNewSeparator() method has the following parameters:

• nextToId - id of the element after which the new separator will be inserted;
• itemId - id of the new separator.

    <script>
        menu.addNewSeparator(nextToId, itemId);
    </script>

The user can choose to remove any item from a menu. The item will be removed with all its sub-items/sub-polygons. An item can be removed in the following way:

    <script>
        menu.removeItem(Id);
    </script>

There is the possibility to get parent id of any menu item. This can be done by means of getParentId() method:

    <script>
        var parentId = menu.getParentId(id);
    </script>

Any menu item can be enabled/disabled by user:

    <script>
        menu.setItemEnabled(id);
        menu.setItemDisabled(id);
    </script>

Also the user has the possibility to check whether an item is enabled. This can be done by calling the following method:

    <script>
        var isEnabled = menu.isItemEnabled(id); // returns true|false
    </script>

The user should pass id of the item that will be checked. The method returns true if the item is enabled.

Any item in a menu can be shown/hidden. To do this the user should pass this item's id to the following methods:

    <script>
        menu.showItem(id);
        menu.hideItem(id);
    </script>

The user has the possibility to check whether an item is hidden. The method returns true if the item is hidden:

    <script>
        var isHidden = menu.isItemHidden(id);
    </script>

The user can set text for any menu item. This item's id and text are passed as parameters to the following method:

    <script>
        menu.setItemText(id, text);
    </script>

The user can get item's text using getItemText() method. The method returns the current text of the item:

    <script>
        var text = menu.getItemText(id); // returns item's text
    </script>

Item's position in the polygon can be set applying the method setItemPosition() and passing item's id and item's position number (starting with 0) as parameters:

    <script>
        menu.setItemPosition(id,pos);
    </script>

There is the possibility to get items' position. The method returns item's position number:

    <script>
        var pos = menu.getItemPosition(id); // returns item's position
    </script>

The user has the possibility to set, store, and pass values set for a certain menu item. One menu item can have several different user data stored in it. User data can be set to any menu item. The user just needs to pass this item's id, name of the data and its value to setUserData() method:

    <script>
        menu.setUserData(id, name, value);
    </script>

An easy way to get user data is to use getUserData() method passing the item's id and data name:

    <script>
        var value = menu.getUserData(id, name);
    </script>

Any item in a menu can have its own image displayed in the left part of item display area. setItemImage() method allows the user to set image to an item by passing the following parameters:

• id - id of the item to which the image will be set;
• img - path to the image for the enabled state of the item;
• imgDis - path to the image for the disabled state of the item.

    <script>
        menu.setItemImage(id,img,imgDis);
    </script>

getItemImage() method gets current item images for enabled and disabled states and returns array(img, imgDis) that will contain URLs to images:

    <script>
        var imgs = menu.getItemImage(id); // returns array
    </script>

Item's image can be easily removed/cleared by means of clearItemImage() method to which the user should pass item's id:

    </script>
        menu.clearItemImage(id);
    </script>

The user can specify the supplementary information regarding the item - tooltip. setTooltip() method takes the following parameters:

• id - item id;
• tip - this parameter sets the text that appears when user hovers the mouse over the item.

    <script>
        menu.setTooltip(id,tip);
    </script>

The following method can return current item's tooltip text:

    <script>
        var tip = menu.getTooltip(id);
    </script>

Hotkey is a short-cut to a menu option. In our menu it's just a label (text) written in the item display area. A hotkey can be set to any menu item by calling setHotKey() method and passing item's id and setting hotkey label:

    <script>
        menu.setHotKey(id, hkey);
    </script>

getHotKey() method returns current item's hotkey text:

    <script>
        var hkey = menu.getHotKey(id); // returns hotkey text
    </script>

An item of this type has a small, square box (in the left part of item display area) in addition to item's title. Any other icons can't be added to this type of items. This item can be created by calling addCheckBox() method that takes the following parameters:

• mode - sibling|child, determines whether the checkbox is a sibling or a child;
• nextoId - id of the element,after which the new checkbox will be inserted as a sibling (parentId for a child);
• pos - item's position in the child mode (null for sibling);
• itemId - id of the new checkbox;
• itemText - the text of the new checkbox;
• state- true|false, true and false mean “checked” and “unchecked” respectively;
• disabled- true|false, true and false mean “disabled” and “enabled” respectively.

    <script>
        menu.addCheckbox(mode, nextToId, pos, itemId, itemText, state, disabled);
    </script>

New state (checked/unchecked) of the checkbox can be set by the following method:

    <script>
        menu.setCheckboxState(id,state);
    </script>

A simple way to get the current state of a checkbox is presented below:

    <script>
        var state = menu.getCheckboxState(id); // returns true|false
    </script>

Item of this type has a small selectable circle (in the left part of item display area) in addition to item's title. Any other icons can't be added to this type of items. This item can be created by calling addRadioButton() method that takes the following parameters:

• mode - sibling|child, determines whether the radio button is a sibling or a child;
• nextToId - id of the element, after which the new radio button will be inserted as a sibling (parentId for a child);
• pos - item's position in the child mode (null for sibling);
• itemId - id of the new radio button;
• itemText - the text of the new radio button;
• group - name of the radio group;
• state- true|false, true and false mean “checked” and “unchecked” respectively;
• disabled- true|false, true and false mean “disabled” and “enabled” respectively.

    <script>
        menu.addRadioButton(mode, nextToId, pos, itemId, itemText, group, state, disabled);
    </script>

Any unchecked radio button can be made checked while currently checked radio button automatically changes its state to unchecked:

    <script>
        menu.setRadioChecked(id,state);
    </script>

An easy way to get id of the current checked radio button in a radio group is presented below:

    <script>
        var idChecked = menu.getRadioChecked(group);
    </script>
 

Method forEachItem() calls a user-defined function for every existing item in the menu passing item's id into it. Using iterator can be very useful in case the user wants all the items to be subjects for the same changes.

    <script>
        menu.forEachItem(function(itemId){}); 
    </script>