jquery обзор плагинов

Источник

• users.tpg.com.au/j_birch/plugins/superfish/

Скачать

Примеры

• базовые настройки
• с использованием bgIframe
  
• вертикальное меню
• навигация в виде закладок
  
• с использованием Supersubs

Описание

Superfish расширяет возможности выпадающего css меню добавляя следующие возможности

• Поддержка hover в ie6.  По умолчанию добавляется класс sfHover, но это меняется в настройках
• Задержка скрытия меню по событию mouseout. Задержка задана в 800 миллисекунд, что предотвращает скрытие меню при случайном перемещение мыши за его пределы
• Анимированное появление подменю. По умолчанию используется эффект fade-in (плавное изменение прозрачности), но можно изменить в настройках
• Управление меню с клавиатуры. Можно вызвать нужный пункт нажимая tab
  
• Поддержка плагина hoverIntent. Автоматически определяется наличие этого плагина и если он найден, то используется продвинутое поведение для mouseovers (задержка по событию mouseout остается в любом случае ). На странице с примерами используется плагин hoverIntent. Если на странице используется hoverIntent, но для меню вы не хотите его применять, то необходимо передать параметр disableHI : true
• Отмечает наличие подменю автоматически добавляя картинку со стрелкой в родительский пункт. Можно убрать стрелочку через параметр autoArrows
• Падающая тень во всех браузерах, которые поддерживают этот эффект. Не работает в ie6
• Сохраняет путь текущей открытой позиции. Смотрите пример навигация в виде закладок
• Поддержка callback функций

Установка

Начать нужно с простого CSS выпадающего меню Suckerfish. Чтобы упростить работу, вы можете скачать css с примерами различных меню.

Подключите файл jQuery и superfish.js

1

<script type="text/javascript" src="superfish.js"></script>

Вызовите superfish() и передайте в него родительский элемент ul.

1
2
3

$(document).ready(function() {
   $('ul.sf-menu').superfish();
});

Настройка

Параметры:

• параметр
  значение по умолчанию
  описание
• hoverClass
  ‘sfHover’
  Класс присваивается элементу меню на который наведен курсор
• pathClass
  ‘overideThisToUse’
  Класс присваивается элементам списка, определяющим путь к открытому пункту
• pathLevels
  1
  Число пунктов подменю которые остаются открытыми или будут восстановлены используя pathClass
• delay
  800
  Задержка в миллисекундах перед скрытием подменю после того как курсор будет убран
• animation
  {opacity:’show’}
  Объект эквивалентный первому параметру метода jQuery .animate()
• speed
  ‘normal’
  Скорость анимации. эквивалентно второму параметру метода jQuery .animate()
• autoArrows
  true
  Если true, то стрелка указывающая наличие подменю будет показана
• dropShadows
  true
  Показывает тень у подменю
• disableHI
  false
  При true авто определение наличия hoverIntent отключено
• onInit
  function(){}
  Пользовательская функция, вызываемая один раз при инициализации плагина
• onBeforeShow
  function(){}
  Пользовательская функция, вызываемая перед запуском анимации
• onShow
  function(){}
  Пользовательская функция, вызываемая по завершению анимации
• onHide
  function(){}
  Пользовательская функция вызываемая при скрытии подменю

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// ссылка на CSS файл для меню
<link rel="stylesheet" type="text/css" media="screen" href="superfish.css" /> 
// подключение скриптов (hoverIntent не обязателен)
<script type="text/javascript" src="hoverIntent.js"></script>
<script type="text/javascript" src="superfish.js"></script> 
// инициализация Superfish
<script type="text/javascript"> 
$(document).ready(function() {
   $('ul.sf-menu').superfish({
      delay:       1000,                            // задержка в миллисекунду
      animation:   {opacity:'show',height:'show'},  // fade-in и slide-down анимация
      speed:       'fast',                          // увеличение скорости анимации
      autoArrows:  false,                           // отключает стрелку подменю
      dropShadows: false                            // отключает тень
   });
 });
</script>