C-Menu Example
Left click here or elsewhere to close menu.
Documentation
CMenu.AddButton(id, name, [icon path])
Function will add one item to the menu.
- id Id of the item, useful in CMenu-Callback to determine which item was selected.
- name The name shown in the menu.
- [icon path] Optional path to an image. Image dimensions like 16x16px fit well.
Example:
myMenu.AddButton(1,"Push me");
myMenu.AddButton(2,"Push me with Icon", "/img/menu_button.png");
CMenu.AddCheck(id, name, initialSelect, [checkIcons])
Function will add one checkable item to the menu.
- id Id of the item, useful in CMenu-Callback to determine which Item was selected.
- name The name shown in the menu. This parameter can also be an array containing the name for state checked and the other for unchecked.
- initialSelect Boolean, whether the first state will be checked or unchecked.
- [checkIcons] Optional array of two path to an image. The first image will be used for checked state and the other one for the unchecked state.
Example:
myMenu.AddCheck(3,"Play / Pause",false);
myMenu.AddCheck(4,["Play", "Pause"],true);
myMenu.AddCheck(5,["Play", "Pause"],true,
["/img/menu_play.png","/img/menu_pause.png"]
);
myMenu.AddCheck(6,["Yes", "No"],true,
["/img/check_yes.png","/img/check_no.png"]
);
CMenu.AddSeperator()
Adds a horizontal line to the menu.
CMenu.popup(x,y)
Popup the menu at screen position x,y [px].
The following reasons can close the menu:
- User clicks on Item. Invokes the callback function and passes the corresponding item.
- User clicks on Exit-Item Hard coded item to close the menu. Use CMenu.suppressExitItem = true to change default behaviour.
- Any left-click event which bubbles up to the body-element. It will close the cmenu.
- New call to popup Every popup-call will close any other cmenu, also from other cmenu instances.
- CMenu.close() Function to close menu.
- Timeout If not closed by the other reasons, cmenu will be closed after MENU_DISPLAY_TIMEOUT (defined in lib.js) milliseconds.
Remarks:
If you use the example below, note that the event-callback "mousedown_callback" must be assigned by addEvent.
Because event handler like <element onclick="mousedown_callback"> or getElementById("test").onclick=mousedown_callback; can't be used to determine correct mouse position.
Example:
function mousedown_callback(evt){
evt = (evt) ? evt : ((window.event) ? window.event : "");
var elem = (evt.target) ? evt.target : evt.srcElement;
// use cross-browser aware function to determine the correct mouse position.
var pos = extractMouseFromEvent(evt);
// Popup the menu:
myMenu.popup(pos.x,pos.y);
// Stop event from bubbling
// That is necessary because the event will bubble up until it reaches
// the body element.
// But body left-click will close all CMenus.
evt.cancelBubble=true;
}
CMenu.DeleteById(id)
Delete item with ID id.
bool CMenu.suppressExitItem
Set this value to true to suppress the hard coded item to close the menu.
Example:
myMenu.suppressExitItem = true;
bool CMenu.GetItemById(id)
Returns an Item-Object with following members:
- id - the id
- name - the name
- visible - display the item if true
- image - path to an image, maybe an array (see CMenu.AddCheck).
Example:
var item = myMenu.GetItemById(3);
item.name = "New Name"
// For Check-Items:
item.checked = true;