Jump to content

ips.ui.menu

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

 

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

Виджет меню не создаёт сам элемент меню. Оно должно существовать на странице в виде HTML-элемента с соответствующими CSS классами, уже добавленными в него (это сделано для того, чтобы меню было доступно без включенного javascript). Атрибуты для для инициализации меню должны быть добавлены к элементу триггеру - то есть к тому элементу, который отобразит меню по клику пользователя. Обычно это ссылка или кнопка.

Элемент меню должен иметь тот же ID, что и у элемента триггера, но с суффиксом _menu; например, если триггер имеет ID 'trigger', то ID элемента меню должен быть такой 'trigger_menu'. Иначе триггер не отобразит меню.

<!-- Триггер -->
<a href='#elMyMenu_menu' id='elMyMenu' data-ipsMenu>Открыть меню</a>

<!-- Меню -->
<ul id='elMyMenu_menu' class='ipsMenu'>
	...
</ul>

 

Переназначение URL-адресов из пунктов меню

Виджет меню имеет механизм тестирования адресов пунктов меню с помощью AJAX, вместо перехода по прямой ссылке из меню. Чтобы воспользоваться этим поведением, укажите атрибут данных data-action к элементу из пунктов меню:

<li class='ipsMenu_item' data-action='ipsMenu_ping'><a href='...'>Пункт меню</a></li>

 

Указание значений в меню

С помощью указания атрибута data-ipsMenuValue у пункта меню, вы можете предоставить значение, которое будете передано событием, и будет использовано обработчиком события для идентификации пункта меню:

<li class='ipsMenu_item' data-ipsMenuValue='itemID'><a href='...'>Пункт меню</a></li>

 

Параметры

className
(Строка; необязательный; по умолчанию 'ipsMenu')

Указывает базовый класс меню, который будет использоваться виджетом. По умолчанию это стандартный класс ipsMenu, но при передаче другого имени класса, могут быть созданы другие стили меню.

 

closeOnClick
(Логический - boolean; необязательный; по умолчанию true)

Определяет, будет ли меню закрываться при клике по элементу.

 

closeOnBlur
(Логический - boolean; необязательный; по умолчанию true)

Определяет, будет ли элемент меню закрываться, когда происходик клик вне меню или от меню переходит фокус куда-либо.

 

appendTo
(Селектор; необязательный)

По умолчанию, элемент меню перемещён и применён к глобальному контейнеру (обычно body). Используя данный параметр, вы можете контролировать куда будет добавлено меню - полезно использовать при создании меню внутри всплывающего окна, например.

 

activeClass
(Строка; необязательный)

Задаёт имя класса, который будет применён к элементу триггеру при открытии меню.

 

selectable
(Смешанный; необязательный; по умолчанию false)

Определяет, будет ли меню иметь функционал выбора пунктов. Если передаваемый параметр 'radio', только один пункт может быть выбран в рамках меню. Если параметр 'checkbox', могут быть выбраны несколько пунктов. Обратите внимание, что меню должно иметь правильные CSS для корректной работы.

 

withStem
(Логический - boolean; необязательный; по умолчанию true)

Определяет, имеет ли меню стрелку, указывающую на принадлежность меню элементу триггеру.

 

stemOffset
(Число; необязательный; по умолчанию 15)

Значение, указывающее на смещение стрелки, то есть расстояние от края до центральной точки стрелки. Редко когда приходится изменять этот параметр, если CSS классы не кардинально изменены.

 

stopLinks
(Логический - boolean; необязательный; по умолчанию false)

Отменяет стандартное действие браузера перехода по ссылке путём вызова стандартного метода браузера - preventDefault.

 

above
(Логический - boolean; необязательный; по умолчанию false)

По умолчанию, меню открывается под триггером. Установка этого параметра в true, меню будет открываться сверху элемента триггера.

 

События ips.ui.menu

menuOpened

Вызывается при открытии меню пользователем путём клика по триггеру.

Данные события:

  • elemID - Идентификатор элемента триггера, к которому принадлежит это меню.
  • originalEvent - оригинальное событие клика (используется для вызова originalEvent.preventDefault() для предотвращения стандартного браузерного действия).
  • menu - ссылка на элемент меню.

 

menuClosed

Вызывается при закрытии меню.

Данные события:

  • elemID - Идентификатор элемента триггера, к которому принадлежит это меню.

 

menuPingSuccessful

Вызывается при закрытии меню.

Нет данных о событии.

 

menuItemSelected

Вызывается, когда пользователь выбирает элемент в меню.

Данные события:

  • triggerElem - Ссылка на элемент триггер.
  • triggerID - Идентификатор элемента триггера.
  • menuElem - Ссылка на элемент меню.
  • originalEvent - Необработанный объект события javascript от клика.
  • selectedItemID - Строка, содержащая значение выбранного пункта меню, если указан атрибут data-ipsMenuValue.
  • selectedItems - Объект, содержащий ссылки на отмеченные пункты, когда пункты меню выбираемые.

 

Ответы ips.ui.menu на события

closeMenu

Может быть запущен у меню или триггера для закрытия меню.