glowPopUpMenu jQuery Plugin

jQuery.fn.glowPopUpMenu

Renders a nested pop up menu

Usage

$('SELECTOR').glowPopUpMenu(options)

where 'SELECTOR' is a div element to be used as a container for the menu

Options

groupCssClass: Class applied to a set of menu options
- default: empty string
itemCssClass: Class applied to an individual menu option
- default: empty string
itemSelectedCssClass: Class applied to a selected individual menu option
- default: empty string
itemExpandedCssClass: Class applied to a selected individual menu option when navigating the item's children
- default: empty string
expandImageUrl: Image URL path to image displayed when an option has children
- default: empty string
expandImageWidth: Width of the expand image
- default: 0
iconWidth: Width of icons shown in menu options
- default: 0
iconHeight: Height of icons shown in menu options
- default: 0
position: PopupPanel opening direction to use. any combination of left, right, up, down
- default: updown
zIndex: z-index at which to render the panel
- default: 100
menuItems: Nested array of menu options. Each menu option is, itself, represented by an array of the format:

id: unique id
text: display text
url: when provided, will redirect to URL when clicked
target: target in which to open URL
callback: optional callback to execute when clicked
icon url
childItems: optional array of child menu items

closeOnMouseOut: when true, the menu closes upon mouseout
- default: true

Events

glowPopUpMenuOpened - triggered when a menu is opened
glowPopUpMenuClosed - triggered when a menu is closed
glowPopUpMenuItemOver - triggered when mouse is over a menu option

Methods

isOpen

Returns whether the menu is currently open

var isOpen = $('SELECTOR').glowPopUpPanel('isOpen');

open

Opens an instance of a popup menu.

$('SELECTOR').glowPopUpPanel('open');

close

Closes an instance of a popup menu.

$('SELECTOR').glowPopUpPanel('close');

refresh

Refreshes the contents of a glowPopUpMenu after its options have been programmatically changes

$('SELECTOR').glowPopUpPanel('refresh');

add

Adds a new menu item to the end of the menu

var menuItem = $('SELECTOR').glowPopUpMenu('createMenuItem', {
    id: 'new',
    text: 'This is a new item!',
    onClick: functino(){ alert("I'm new"); }
});
$('SELECTOR').glowPopUpMenu('add', menuItem);

remove

Removes an instance of a menu item from the menu

var menuItem = $('SELECTOR').glowPopUpMenu('getById', 5);
$('SELECTOR').glowPopUpMenu('remove', menuItem);

insert

Adds a new menu item instance to the menu at a given index

var menuItem = $('SELECTOR').glowPopUpMenu('createMenuItem', {
    id: 'new',
    text: 'This is a new item!',
    onClick: functino(){ alert("I'm new"); }
});
$('SELECTOR').glowPopUpMenu('insert', menuItem, 4);

clear

Clears a menu of all options

$('SELECTOR').glowPopUpMenu('clear');

getById

Returns a menu item by its ID

var item = $('SELECTOR').glowPopUpMenu('getById', 4);

getByText

Returns a menu item by its display text

var item = $('SELECTOR').glowPopUpMenu('getById', 'Menu Option');

getByIndex

Returns a menu item by its index

var item = $('SELECTOR').glowPopUpMenu('getByIndex', 3);

getCurrent

Returns the currently-selected menu item

var item = $('SELECTOR').glowPopUpMenu('getCurrent');

getCurrentByLevel

Returns the currently-selected menu item at a given menu level

var item = $('SELECTOR').glowPopUpMenu('getCurrentByLevel', 2);

count

Returns the number of menu items in a menu

var count = $('SELECTOR').glowPopUpMenu('count');

createMenuItem

Creates a new menu item object suitable for adding or inserting into a menu

var menuItem = $('SELECTOR').glowPopUpMenu('createMenuItem', {
    id: 'new',
    text: 'This is a new item!',
    onClick: functino(){ alert("I'm new"); }
});

Recommended