Плагин jStackmenu

Плагин jQuery UI для формирования оригинального меню.

Эффект раскрывается полностью в браузерах, которые поддерживают CSS трансформации. В других браузерах элементы меню выскакивают в линейном порядке.

Использование

Использовать плагин очень просто. Нужно организовать вызов метода .jstackmenu() для элемента, у которого есть наследники.

$('ul.my-stack').jstackmenu();
$('span.toggle-stack').click( function(){
	$('ul.my-stack').jstackmenu('toggle');
});

Необходимые файлы

1. jQuery 1.3.2
2. jQuery UI 1.7.2
3. Плагин jQuery CSS Transform
4. Плагин jQuery Animate CSS Rotate Scale
5. jStackmenu.js

Опции

radius

integer   Радиус дуги, по которой выводятся пункты меню. Значение по умолчанию: 1000 

clockwise

boolean Направление движения элементов меню по дуге: true - по часовой стрелке, false - против часовой стрелки. Значение по умолчанию: true

direction

string    Направление вывода элементов меню. Значение по умолчанию: 'top'

time

integer  Время разворачивания меню в ms. Значение по умолчанию: 500 

Методы

toggle Переключает видимость меню.

.jstackmenu( 'toggle', [switch], [callback] )

[switch]: переменная типа boolean, которая определяет состояние меню.

[callback]: возвратная функция, которая вызывается после выполнения переключения состояния меню.

$('#stackmenu').jstackmenu( 'toggle', function( event, menuElement ){
  // Выполняем какие-либо операции после переключения
});

show Выводит меню.

.jstackmenu( 'show', [callback] )

[callback]: возвратная функция, которая вызывается после завершения вывода меню.

$('#stackmenu').jstackmenu( 'show', function( event, menuElement ){
  // Выполняем какие-либо операции после вывода меню
});

hide Скрывает меню.

.jstackmenu( 'hide', [callback] )

[callback]: возвратная функция, которая вызывается после завершения скрытия меню.

$('#stackmenu').jstackmenu( 'hide', function( event, menuElement ){
  // Выполняем какие-либо операции после скрытия меню
});

enable Делаем меню доступным.

.jstackmenu( 'enable')

disable Делаем меню недоступным.

.jstackmenu( 'disable')

destroy полностью удаляем функционал jStackmenu у объекта.

.jstackmenu( 'destroy')

option Получаем или устанавливаем значение опции jStackmenu. Если [значение] не задано, то функция возвращает текущее значение опции.

.jstackmenu( 'option', имя_опции, [значение])

События

show Происходит после завершения анимации вывода меню.

$( '#stackmenu' ).jstackmenu( {
  'show':  function( event, menuElement ){
    // Выполняем какие-либо операции
  }
} );

$( '#stackmenu' ).bind( ' jstackmenushow', function( event, menuElement ){
    // Выполняем какие-либо операции
  } );

hide Происходит после завершения анимации скрытия меню.

$( '#stackmenu' ).jstackmenu( {
  'hide':  function( event, menuElement ){
    // Выполняем какие-либо операции
  }
} );

$( '#stackmenu' ).bind( ' jstackmenuhide', function( event, menuElement ){
    // Выполняем какие-либо операции
  } );

showBefore Происходит перед анимацией вывода меню.

$( '#stackmenu' ).jstackmenu( {
  'showBefore':  function( event, menuElement ){
    // Выполняем какие-либо операции
  }
} );

$( '#stackmenu' ).bind( ' jstackmenushowBefore', function( event, menuElement ){
    // Выполняем какие-либо операции
  } );

hideBefore Происходит после завершения анимации скрытия меню.

$( '#stackmenu' ).jstackmenu( {
  'hideBefore':  function( event, menuElement ){
    // Выполняем какие-либо операции
  }
} );

$( '#stackmenu' ).bind( ' jstackmenuhideBefore', function( event, menuElement ){
    // Выполняем какие-либо операции
  } );

Демонстрация