Developer’s corner

jQuery Accordion Menu

This widget is a true jQuery-UI widget which displays a accordion menu. It adapts its style in function of the choosen jQuery-UI theme. It has been built given the instructions of the following page: jQuery-UI - Widget factory.

You can download it here: menu-deploy.tar.gz. It must be deploy at the root of your web directory. All directories must keep the same name as in the archive: js, css, images and demos. The directory demos contains a demonstration page in which you will have to change the path of jquery.js, jquery-ui.js and jquery-ui.css. This directory is not required for the menu widget.

Dependency

This widget has been tested jQuery 1.6 and jQuery-UI 1.8 and requires the following jQuery-UI widgets:

  • jquery.ui.core.js
  • jquery.ui.widget.js
  • jquery.ui.button.js

Usage

To create a menu you have to write: Simple menu with an event on the OPEN action of the 1st sub-menu.

<ul id="menu">
	<li title="coucou" id="s1">
		<p>Blablabla...</p>
		<p>Super Blablabla...</p>
	</li>
	<li title="salut" id="s2">
		<p>Super Blablabla...</p>
		<p>RE:Super Blablabla...</p>
	</li>
</ul>

And then, the following javascript:

	$('#menu').menu();

Note: This menu can be created from a UL element but also from any hierarchic node (ex: DIV).

You can destroy the whole menu and come back at the original HTML item by calling the destroy function. Ex:

$('#myMenu').menu('destroy');

Options

At the creation of the menu, you can set the following options:

Description Possible values By default
active Specifies which sub-menu must be open by default. -1, an integer (0 included), a DOM element or a jQuery element (ex: $('#mySubMenu')). -1
frameVisible Indicates whether the frame/border surrounding the whole menu must be visible. true, false false
fixable Indicates whether sub-menus are allowed (if asked) to stay always visible. true, false true
fixed Specifies which sub-menus must be fixed (= always visible) by default. List of sub-menus (see 'active') to fix at initialization. []
minizable Indicates whether the whole menu can be minimized or not. true, false false
width Width of the whole menu or 'auto'. A CSS width. 'auto'
height Height of the whole menu or 'auto'. A CSS width. 'auto'
event Event which triggers the open/close operation. 'click', 'mouseover', 'dblclick', … 'click'
animation Speed of the open/close operation. 'fast', 'slow', 0 or any numeric value (time in ms). 'fast'
title Class of the direct children which contains the sub-menu title. null, any string (will be then a class name) null
toolbar Class of an empty DIV element to add in the header of the whole menu. null, any string (will be then a class name) null

Example: Menu when reduced. Menu with a custom tool bar.

// CREATE THE MENU:
$('#menu').menu({
	active: 1,
	frameVisible: true,
	minimizable: true,
	toolbar: 'myToolBar'
});
 
// CUSTOMIZE THE TOOLBAR:
// a title:
$('.myToolBar').append('<h2>My Tool Bar</h2>');
// 3 images/buttons:
$('.myToolBar').append('<img id="openAll" src="menu-open.png" title="Open all sub-menus." />');
$('.myToolBar').append('<img id="collapseAll" src="menu-collapse.png" title="Collapse all sub-menus." />');
$('.myToolBar').append('<img id="print" src="print.png" title="Print the page (does not work in this demo page)" />');

Events

You can also customize the following events:

Description Arguments
onstatuschange Function to call at each open/close operation on a sub-menu. index, item, newStatus, oldStatus. oldStatus and newStatus may be: 'opened' or 'closed'.

Example:

$('#menu').menu({
	...,
	onstatuschange: function(index, item, newstatus, oldstatus){	// Add a new item in the first sub-menu each time it is openning.
		if (index == 0 && newstatus == 'opened' && oldstatus == 'closed'){
			var nbParaph = item.find('.ui-submenu-content p').length;
			item.find('.ui-submenu-content').append('<p>OPEN_EVT => Paragraph n&deg;'+nbParaph+' !</p>');
		}
	}
});

Methods

And you can use the following methods/functions to interact dynamically with the menu:

Description Parameter Return value
destroy() Destroys all DOM modifications done by this jQuery-UI widget.
show(index/item) Shows or Opens the given sub-menu ; that's to say: display its 'ui-submenu-content' DIV. An index, a DOM element or a jQuery item
hide(index/item) Hides or Closes the given sub-menu ; that's to say: hide its 'ui-submenu-content' DIV. An index, a DOM element or a jQuery item
fix(indexes/items) Fixes the given sub-menu. (ONLY IF OPTIONS.FIXABLE IS TRUE) An indexes array, a DOM elements array or a jQuery list
unfix(indexes/items) Unfixes the given sub-menu. (ONLY IF OPTIONS.FIXABLE IS TRUE) An indexes array, a DOM elements array or a jQuery list
showAll() Fixes and opens all sub-menus.
hideAll() Closes all sub-menus.
getToolbar() Gets the toolbar that the user can customize. A jQuery item (equivalent to: $('#menu').find('.myToolBar')).
getSubMenu(index) Gets the specified sub-menu. An index, a DOM element or a jQuery item A jQuery item.

Example:

$('#openAll').click(function(evt){
	$('#menu').menu('showAll');
});
$('#collapseAll').click(function(evt){
	$('#menu').menu('hideAll');
});

Version

Version: 1.0 (5th March 2012)

Download: menu-deploy.tar.gz (all sources are included)

Author: Grégory Mantelet (CDS) - question@astro.unistra.fr

jquery_menu_ui.txt · Last modified: 2012/09/17 14:14 by administrator

Thanks for acknowledging the CDS developer’s resources (libraries, source code, etc.)

© UDS/CNRS

Contact