PopMenu Class
Constructor
PopMenu([menu])
An object can be passed to menu parameter
to define a list of menu items.
-
menu: Object
The menu object structure basically consists
of id: options pairs. For the list of available
options, please refer to PopMenuItem class.
// EXAMPLE //
var menu = new PopMenu({
new: {label: 'New', icon: 'new'},
open: {label: 'Open', icon: 'open'},
save: {label: 'Save', icon: 'save'},
saveAs: {label: 'SaveAs'}
});
Constants
direction.RIGHT_BOTTOM: integer = 3
since 1.0
direction.RIGHT_TOP: integer = 2
since 1.0
direction.LEFT_BOTTOM: integer = 1
since 1.0
direction.LEFT_TOP: integer = 0
since 1.0
Options
effect: string = fade
since 1.0
fade | slide | none
Transition effects for context menu.
duration: integer = 200
since 1.0
Transition duration in ms if an effect is not 'none'.
contextMenu: boolean = false
since 1.0
A flag determining whether this PopMenu is a top level menu or a sub-menu.
Please use contextMenu() to change this value.
Properties
$: jQuery
since 1.0
Reference to DOM (jQuery) representation of the context menu.
id: string = (random)
since 1.0
The HTML ID of the PopMenu.
data: Object
since 1.0
Internally stores the menu options. Please use options() method
to get/set menu options.
Methods
since 1.0
append(id, options)
Append a menu item at the end of the list.
-
id: string
ID of the new menu item.
-
options: Object
PopMenuItem options. For the list of available
options, please refer to PopMenuItem class.
// To insert a menu item named 'exit' at the end
$(elm).popmenu().append('exit', {
label: 'Exit'
});
contextMenu: boolean
since 1.0
contextMenu(value)
Set the PopMenu as a top level context menu if true is passed as the value.
Or get the current status if no parameter is passed.
-
value: boolean
True if the PopMenu is set as a top level context menu.
// To set the current PopMenu as a top level context menu, and show it on the page
var menu = new PopMenu({
add: {label: 'Add'},
remove: {label: 'Remove'}
});
menu.contextMenu(true);
menu.show(0, 0);
since 1.0
find(id)
Find a menu item. If a particular item is not found, NULL will be returned.
-
id: string
ID of the menu item.
// To disable a menu entry named 'save'
$(elm).popmenu().find('save').disable(true);
hide: void
since 1.0
hide([effect [, duration]])
Hide context menu if currently being shown.
-
effect: string
Effect to use. If null, effect which is used when showing the context menu
will be used. See effect option for available options.
-
duration: integer
Duration of the effect in ms.
// To hide the context menu using 'fade' effect after 3 seconds
var menu = new PopMenu();
menu.show(0, 0);
setTimeout(function() {
menu.hide('fade');
}, 3000);
hideSubmenus: void
since 1.0
hideSubmenus([effect [, duration]])
Hide submenus if currently being shown.
-
effect: string
Effect to use. If null, effect which is used when showing the context menu
will be used. See effect option for available options.
-
duration: integer
Duration of the effect in ms.
// To hide the all submenus using 'fade' effect after 3 seconds
var menu = new PopMenu();
menu.show(0, 0);
menu.find('displayModeItem').submenu.showAsSubmenu();
setTimeout(function() {
menu.hideSubmenus('fade');
}, 3000);
since 1.0
insert(id, options, after)
Insert a menu item in the middle of the list.
-
id: string
ID of the new menu item.
-
options: Object
PopMenuItem options. For the list of available
options, please refer to PopMenuItem class.
-
after: string
ID of an existing item which the new menu item will be placed after.
// To insert a menu item named 'save' after 'open'
$(elm).popmenu().insert('save', {
label: 'Save'
}, 'open');
options: object
since 1.0
options([options])
Get/set menu options.
-
options: object
Options to be set, please refer to Options section for list of available options.
If none is specified, the method will act as getter.
// To retrieve options
var options = $(elm).popmenu().options();
// To set the transition duration to 300ms
$(elm).popmenu().options({duration: 300});
populateMenu: void
since 1.0
populateMenu(menu)
Populate PopMenu with menu items. Existing items will be kept.
-
menu: Object
The menu object structure basically consists
of id: options pairs. For the list of available
options, please refer to PopMenuItem class.
// To insert a set of menu items to existing context menu
$(elm).popmenu().populateMenu({
sep0: {type: 'separator'},
add: {label: 'Add', icon: 'add'},
remove: {label: 'Remove', icon: 'remove'}
});
since 1.0
prepend(id, options)
Insert a menu item at the beginning of the list.
-
id: string
ID of the new menu item.
-
options: Object
PopMenuItem options. For the list of available
options, please refer to PopMenuItem class.
// To insert a menu item named 'new' at the beginning
$(elm).popmenu().prepend('new', {
label: 'New File'
});
remove: void
since 1.0
remove(id)
Remove a menu item and its submenus.
-
id: string
ID of the menu item.
// To remove a menu entry named 'new'
$(elm).popmenu().remove('new');
since 1.0
selectedItem()
Get currently selected item. If no item is selected, null will be returned.
// To check if the currently selected item is the 'save' item.
if($(elm).popmenu().find('save') == $(elm).popmenu().selectedItem()) {
alert('Save item is selected.');
}
show: void
since 1.0
show(x, y, [effect [, duration]])
Show context menu. If x and y coordinates are speified, the context menu
expand direction will be automatically determined not to overflow the viewport.
By default, the expand direction is to bottom right.
Please note that this function only works for context menu. For submenu, use
showAsSubmenu() instead.
-
x: integer
Position of the context menu from the left of viewport in pixels.
-
y: integer
Position of the context menu from the top of viewport in pixels.
-
effect: string
Effect to use. If null or 'default', effect which is set in options will be used.
See effect option for available options.
-
duration: integer
Duration of the effect in ms.
// To show the context menu on top left
var menu = PopMenu();
menu.show(0, 0);
showAsSubmenu: void
since 1.0
showAsSubmenu([direction, [effect [, duration]]])
Show sub-menu.
By default, the expand direction is to bottom right.
Please note that this function only works for submenu. For context menu, use
show() instead.
-
direction: PopMenu.direction = RIGHT_BOTTOM
Direction the submenu will be opened. Available options are:
- PopMenu.direction.RIGHT_BOTTOM
- PopMenu.direction.RIGHT_TOP
- PopMenu.direction.LEFT_BOTTOM
- PopMenu.direction.LEFT_TOP
-
effect: string
Effect to use. If null or 'default', effect which is set in options will be used.
See effect option for available options.
-
duration: integer
Duration of the effect in ms.
// To show the context menu on top left
var menu = PopMenu();
menu.show(0, 0);
updateLabels: void
since 1.0
updateLabels([force])
Update all menu labels.
-
force: boolean = false
If set to true, item without dynamic labels (ie. string) will also be updated.
// To force updating all menu labels
$(elm).popmenu().updateLabels(true);