Виджет меню добавляет интерактивность к элементам меню, созданным с помощью 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
Может быть запущен у меню или триггера для закрытия меню.