PopMenu Examples

Basic Context Menu

This example demonstrates how easy it is to create a basic context menu that just works. You could assign a link to a menu item by specifying href option, or a callback by specifying action option.

You could also navigate the context menu using keyboard! Try clicking on the button, and press [context menu] button on the keyboard. Navigate using [up] and [down] arrow buttons. Press [enter] or [space] bar to select.

$(elm).popmenu({
	hello: {label: 'Say Hello', action: function() { alert('Hello!'); }},
	doublejar: {label: 'Visit doublejar.com', href: 'http://www.doublejar.com', target: '_blank' }
});

More Options for Context Menu Item

This example demonstrates a context menu creation with various options, such as:

• icons,
• disabled item,
• separator.

$(elm).popmenu({
	add: {label: 'Add', icon: 'add'},
	remove: {label: 'Remove', icon: 'remove', disabled: true},
	separator: {type: 'separator'},
	favorite: {label: 'Favorite', icon: 'favorite'},
	home: {label: 'Visit Homepage', icon: '../img/home.png'}
});

Dynamic Labels

A function instead of string can be assigned as menu item labels.

$(elm).popmenu({
	dateLabel: {label: 'Current Date & Time', disabled: true},
	date: {label: getCurrentDate}
});

function getCurrentDate() {
	var date = new Date();
	return date.toString();
}

Alternative Menu Item Creation

Beginning with an empty context menu, this example demonstrates various methods to add/remove menu items after a context menu is initialized.

• append
• prepend
• insert
• remove

$(elm).popmenu();

// Insert at the end
$(elm).popmenu().append('open', {label: 'Open...'});
$(elm).popmenu().append('saveAs', {label: 'Save As...'});
$(elm).popmenu().append('exit', {label: 'Exit'});

// Insert at the beginning
$(elm).popmenu().prepend('new', {label: 'New'});

// Insert after a specified item
$(elm).popmenu().insert('save', {label: 'Save'}, 'open');

// Remove an item
$(elm).popmenu().remove('exit');

Single Context Menu Assigned to Multiple Elements

Multiple elements can share a single instance of context menu. In this way, any operations made to the context menu of an element will affect others as well.

Disable Save and Save As

// Create a PopMenu instance
var menu = new PopMenu({
	newItem: {label: 'New'},
	open: {label: 'Open...'},
	save: {label: 'Save'},
	saveAs: {label: 'Save As...'}
});

// Assign menu to both buttons
$('#MultiBtn1').popmenu(menu);
$('#MultiBtn2').popmenu(menu);

// The checkbox will try to modify context menu items
$('#MultiToggle').change(function() {
	if($(this).is(':checked')) {
		// Accessing PopMenu instance from 'menu' variable
		menu.find('save').disable(true);
		menu.find('saveAs').disable(true);
	}
	else {
		// Accessing PopMenu instance from #MultiBtn1 (the first button)
		$('#MultiBtn1').popmenu().find('save').disable(false);
		$('#MultiBtn1').popmenu().find('saveAs').disable(false);
	}
});

Submenus and Long Menu List

PopMenu is able to handle long list of menu items and unlimited submenus.

$(elm).popmenu({
	newItem: {label: 'New'},
	options: {label: 'Options', submenu: {
		sort: {label: 'Sort By', submenu: {
			sortName: {label: 'Name'},
			sortType: {label: 'Type'},
			sortSize: {label: 'Size'},
			sortDate: {label: 'Date'},
			sortSep: {type: 'separator'},
			sortOpt: {label: 'Sort Options', submenu: {
				sortOptOrder: {label: 'Ordering', submenu: {
					sortOptOrderAsc: {label: 'Ascending'},
					sortOptOrderDesc: {label: 'Descending'}
				}},
				sortOptFolder: {label: 'Folder First'}
			}}
		}},
		view: {label: 'View Mode', submenu: {
			viewThumb: {label: 'Thumbnails'},
			viewIcon: {label: 'Icons', submenu: {
				viBig: {label: 'Large Icons'},
				viMed: {label: 'Medium Icons'},
				viSml: {label: 'Small Icons'},
				viTny: {label: 'Tiny Icons'},
			}},
			viewList: {label: 'List'},
			viewTree: {label: 'Tree'}
		}}
	}},
	provinces: {label: 'Provinces', submenu: {
		idac: {label: 'Aceh'},
		idba: {label: 'Bali'},
		idbt: {label: 'Banten'},
		idbe: {label: 'Bengkulu'},
		idgo: {label: 'Gorontalo'},
		idjk: {label: 'Jakarta'},
		idja: {label: 'Jambi'},
		idjb: {label: 'Jawa Barat'},
		idjt: {label: 'Jawa Tengah'},
		idji: {label: 'Jawa Timur'},
		idkb: {label: 'Kalimantan Barat'},
		idks: {label: 'Kalimantan Selatan'},
		idkt: {label: 'Kalimantan Tengah'},
		idki: {label: 'Kalimantan Timur'},
		idku: {label: 'Kalimantan Utara'},
		idbb: {label: 'Kepulauan Bangka Belitung'},
		idkr: {label: 'Kepulauan Riau'},
		idla: {label: 'Lampung'},
		idma: {label: 'Maluku'},
		idmu: {label: 'Maluku Utara'},
		idnb: {label: 'Nusa Tenggara Barat'},
		idnt: {label: 'Nusa Tenggara Timur'},
		idpa: {label: 'Papua'},
		idpb: {label: 'Papua Barat'},
		idri: {label: 'Riau'},
		idsr: {label: 'Sulawesi Barat'},
		idsn: {label: 'Sulawesi Selatan'},
		idst: {label: 'Sulawesi Tengah'},
		idsg: {label: 'Sulawesi Tenggara'},
		idsa: {label: 'Sulawesi Utara'},
		idsb: {label: 'Sumatera Barat'},
		idss: {label: 'Sumatera Selatan'},
		idsu: {label: 'Sumatera Utara'},
		idyo: {label: 'Yogyakarta'}
	}}
});

// Dynamically creating submenu
var newSubmenu = new PopMenu({
    newFolder: {label: 'Folder'},
    newSep: {type: 'separator'},
    newFile: {label: 'Blank File'},
    newPng: {label: 'Image File (png)'},
    newDoc: {label: 'Text Document (doc)'},
    newXls: {label: 'Spreadsheet (xls)'}
});
$(elm).popmenu().find('newItem').options({ submenu: newSubmenu });

Showing Context Menu with Left Click

Context menu can be triggered using left click by calling $(elm).popmenu('show') and optionally passing onclick event argument to position the menu under mouse cursor.

// Create a PopMenu instance
var menu = new PopMenu({
	newItem: {label: 'New'},
	open: {label: 'Open...'},
	save: {label: 'Save'},
	saveAs: {label: 'Save As...'}
});

// Assign menu to both buttons
$('#LeftBtn1').popmenu(menu);
$('#LeftBtn2').popmenu(menu);

// Show context menu using left click
$('#LeftBtn1').click(function() {
	$(this).popmenu('show');
});
// Show context menu using left click
$('#LeftBtn2').click(function(e) {
	$(this).popmenu('show', e);
});