invisionbyte

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