Учебники

JqueryUI — Меню

Январь 2, 2019

Виджет меню обычно состоит из строки главного меню с всплывающими меню. Элементы во всплывающих меню часто имеют всплывающие меню. Меню может быть создано с использованием элементов разметки до тех пор, пока поддерживается родительско-дочернее отношение (используя <ul> или <ol>). Каждый пункт меню имеет элемент привязки.

Виджет меню в jQueryUI может использоваться для встроенных и всплывающих меню или в качестве основы для построения более сложных систем меню. Например, вы можете создавать вложенные меню с пользовательским позиционированием.

jQueryUI предоставляет методы menu () для создания меню.

Синтаксис

Метод menu () можно использовать в двух формах:

Метод $ (селектор, контекст) .menu (опции)

Метод $ (селектор, контекст) .menu («действие», параметры)

Метод $ (селектор, контекст) .menu (опции)

Метод menu (options) объявляет, что элемент HTML и его содержимое должны обрабатываться и управляться как меню. Параметр options — это объект, который определяет внешний вид и поведение элементов меню.

Синтаксис 

$(selector, context).menu (options);

Вы можете предоставить один или несколько параметров одновременно, используя объект Javascript. Если нужно указать несколько параметров, разделите их запятой следующим образом: 

$(selector, context).menu({option1: value1, option2: value2..... });

В следующей таблице перечислены различные параметры, которые можно использовать с этим методом —

Sr.No. Вариант и описание
1 отключен

Эта опция, если установлена ​​в true, отключает меню. По умолчанию его значение равно false .

Опция — отключена

Эта опция, если установлена ​​в true, отключает меню. По умолчанию его значение равно false .

Синтаксис 

$( ".selector" ).menu (
   { disabled: true }
);
2 иконки

Эта опция устанавливает значки для подменю. По умолчанию его значение равно {подменю: «ui-icon-carat-1-e»} .

Вариант — иконки

Эта опция устанавливает значки для подменю. По умолчанию его значение равно {подменю: «ui-icon-carat-1-e»} .

Синтаксис 

$( ".selector" ).menu (
   { icons: { submenu: "ui-icon-circle-triangle-e" } }
);
3 меню

Эта опция является селектором для элементов, которые служат контейнером меню, включая подменю. По умолчанию его значение равно ul .

Вариант — меню

Эта опция является селектором для элементов, которые служат контейнером меню, включая подменю. По умолчанию его значение равно ul .

Синтаксис 

$( ".selector" ).menu (
   { menus: "div" }
);
4 позиция

Этот параметр устанавливает положение подменю по отношению к связанному элементу родительского меню. По умолчанию его значение равно {my: «left top», at: «right top»} .

Вариант — позиция

Этот параметр устанавливает положение подменю по отношению к связанному элементу родительского меню. По умолчанию его значение равно {my: «left top», at: «right top»} .

Синтаксис 

$( ".selector" ).menu (
   { position: { my: "left top", at: "right-5 top+5" } }
);
5 роль

Эта опция используется для настройки ролей ARIA, используемых для меню и пунктов меню. По умолчанию его значением является меню .

Вариант — роль

Эта опция используется для настройки ролей ARIA, используемых для меню и пунктов меню. По умолчанию его значением является меню .

В рамках Инициативы доступности веб-сайтов (WAI) Accessible Rich Internet Applications Suite (ARIA) определяет способ сделать веб-контент и веб-приложения более доступными. Он используется для улучшения доступности динамического содержимого и расширенных элементов управления пользовательского интерфейса, разработанных с использованием Ajax, HTML, JavaScript и связанных с ними технологий. Вы можете прочитать больше об этом на: ARIA

Синтаксис 

$( ".selector" ).menu (
   { role: null }
);

Эта опция, если установлена ​​в true, отключает меню. По умолчанию его значение равно false .

Опция — отключена

Эта опция, если установлена ​​в true, отключает меню. По умолчанию его значение равно false .

Синтаксис

Эта опция устанавливает значки для подменю. По умолчанию его значение равно {подменю: «ui-icon-carat-1-e»} .

Вариант — иконки

Эта опция устанавливает значки для подменю. По умолчанию его значение равно {подменю: «ui-icon-carat-1-e»} .

Синтаксис

Эта опция является селектором для элементов, которые служат контейнером меню, включая подменю. По умолчанию его значение равно ul .

Вариант — меню

Эта опция является селектором для элементов, которые служат контейнером меню, включая подменю. По умолчанию его значение равно ul .

Синтаксис

Этот параметр устанавливает положение подменю по отношению к связанному элементу родительского меню. По умолчанию его значение равно {my: «left top», at: «right top»} .

Вариант — позиция

Этот параметр устанавливает положение подменю по отношению к связанному элементу родительского меню. По умолчанию его значение равно {my: «left top», at: «right top»} .

Синтаксис

Эта опция используется для настройки ролей ARIA, используемых для меню и пунктов меню. По умолчанию его значением является меню .

Вариант — роль

Эта опция используется для настройки ролей ARIA, используемых для меню и пунктов меню. По умолчанию его значением является меню .

Синтаксис

Функциональность по умолчанию

В следующем примере демонстрируется простой пример функциональности виджета меню без передачи параметров в метод menu () . 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      <!-- Javascript -->
      
      <script>
         $(function() {
            $( "#menu-1" ).menu();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <ul id = "menu-1">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
      </ul>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле menuexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

В приведенном выше примере вы можете увидеть тематическое меню с мышью и клавиатурой для навигации.

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

В следующем примере демонстрируется использование двух значков параметров и положения в функции меню JqueryUI. 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#menu-2" ).menu({
               icons: { submenu: "ui-icon-circle-triangle-e"},
               position: { my: "right top", at: "right-10 top+5" }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <ul id = "menu-2">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
      </ul>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле menuexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

В приведенном выше примере вы видите, что мы применили изображение значка для списка подменю, а также изменили положение подменю.

Метод $ (селектор, контекст) .menu («действие», параметры)

Метод menu («action», params) может выполнять действие над элементами меню, например включать / отключать меню. Действие указывается в виде строки в первом аргументе (например, «отключить» отключает меню). Проверьте действия, которые можно передать, в следующей таблице.

Синтаксис 

$(selector, context).menu ("action", params);;

В следующей таблице перечислены различные действия, которые можно использовать с этим методом —

Sr.No. Действие и описание
1 размытие ([событие])

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

Действие — размытие ([событие])

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

Синтаксис 

$(".selector").menu( "blur" );
2 свернуть ([событие])

Это действие закрывает текущее активное подменю. Где событие имеет тип Событие и представляет то, что вызвало падение меню.

Действие — крах ([событие])

Это действие закрывает текущее активное подменю. Где событие имеет тип Событие и представляет то, что вызвало падение меню.

Синтаксис 

$(".selector").menu( "collapse" );
3 collapseAll ([событие] [, все])

Это действие закрывает все открытые подменю.

Действие — collapseAll ([событие] [, все])

Это действие закрывает все открытые подменю. Где —

  • Событие имеет тип Событие и представляет то, что вызвало меню, чтобы свернуть

  • all имеет тип Boolean Указывает, должны ли быть закрыты все подменю или только подменю ниже, включая меню, которое является или содержит цель инициирующего события.

Синтаксис 

$(".selector").menu( "collapseAll", null, true );
4 уничтожить ()

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

Действие — уничтожить ()

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

Синтаксис 

$(".selector").menu( "destroy" );
5 отключить ()

Это действие отключает меню. Этот метод не принимает никаких аргументов.

Действие — отключить ()

Это действие отключает меню. Этот метод не принимает никаких аргументов.

Синтаксис 

$(".selector").menu( "disable" );
6 включить()

Это действие активирует меню. Этот метод не принимает никаких аргументов.

Действие — включить ()

Это действие включает меню. Этот метод не принимает никаких аргументов.

Синтаксис 

$(".selector").menu( "enable" );
7 развернуть ([событие])

Это действие открывает подменю под текущим активным элементом, если таковой существует. Где событие имеет тип события и представляет собой то, что вызвало расширение меню.

Действие — развернуть ([событие])

Это действие открывает подменю под текущим активным элементом, если таковой существует. Где событие имеет тип события и представляет собой то, что вызвало расширение меню.

Синтаксис 

$(".selector").menu( "expand" );
8 фокус ([событие], предмет)

Это действие активирует определенный элемент меню, начинает открывать любое подменю, если оно присутствует, и запускает событие фокуса меню. Где событие имеет тип события и представляет то, что вызвало меню, чтобы получить фокус. и item — это объект jQuery, представляющий пункт меню для фокусировки / активации.

Действие — фокус ([событие], предмет)

Это действие активирует определенный элемент меню, начинает открывать любое подменю, если оно присутствует, и запускает событие фокуса меню. Где событие имеет тип события и представляет то, что вызвало меню, чтобы получить фокус. и item — это объект jQuery, представляющий пункт меню для фокусировки / активации.

Синтаксис 

$(".selector").menu( "focus", null, menu.find( ".ui-menu-item:last" ) );
9 isFirstItem ()

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

Действие — isFirstItem ()

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

Синтаксис 

$(".selector").menu( "isFirstItem" );
10 isLastItem ()

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

Действие — isLastItem ()

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

Синтаксис 

$(".selector").menu( "isLastItem" );
11 следующий ([событие])

Это действие делегирует активное состояние следующему пункту меню. Где событие имеет тип Событие и представляет то, что вызвало фокус для перемещения.

Действие — следующее ([событие])

Это действие делегирует активное состояние следующему пункту меню. Где событие имеет тип Событие и представляет то, что вызвало фокус для перемещения.

Синтаксис 

$(".selector").menu( "next" );
12 nextPage ([событие])

Это действие перемещает активное состояние в первый пункт меню под нижней частью прокручиваемого меню или в последний пункт, если не прокручиваемый. Где событие имеет тип Событие и представляет то, что вызвало фокус для перемещения.

Действие — следующая страница ([событие])

Это действие перемещает активное состояние в первый пункт меню под нижней частью прокручиваемого меню или в последний пункт, если не прокручиваемый. Где событие имеет тип Событие и представляет то, что вызвало фокус для перемещения.

Синтаксис 

$(".selector").menu( "nextPage" );
13 опция (optionName)

Это действие возвращает значение, связанное с указанным параметром optionName . Где optionName имеет тип String и представляет имя опции, которую нужно получить.

Действие — опция (optionName)

Это действие возвращает значение, связанное с указанным параметром optionName . Где optionName имеет тип String и представляет имя опции, которую нужно получить.

Синтаксис 

var isDisabled = $( ".selector" ).menu( "option", "disabled" );
14 опция ()

Это действие получает объект, содержащий пары ключ / значение, представляющие текущий хэш опций меню.

Действие — опция ()

Это действие получает объект, содержащий пары ключ / значение, представляющие текущий хэш опций меню.

Синтаксис 

var options = $( ".selector" ).menu( "option" );
15 опция (optionName, значение)

Это действие устанавливает значение опции меню, связанной с указанным optionName. Где optionName имеет тип String и представляет имя опции для установки, а значение имеет тип Object и представляет значение для установки опции.

Действие — опция (optionName, value)

Это действие устанавливает значение опции меню, связанной с указанным optionName. Где optionName имеет тип String и представляет имя опции для установки, а значение имеет тип Object и представляет значение для установки опции.

Синтаксис 

$(".selector").menu( "option", "disabled", true );
16 вариант (варианты)

Это действие устанавливает один или несколько параметров для меню. Где параметры имеют тип Object и представляют собой карту пар параметр-значение для установки.

Действие — опция (варианты)

Это действие устанавливает один или несколько параметров для меню. Где параметры имеют тип Object и представляют собой карту пар параметр-значение для установки.

Синтаксис 

$(".selector").menu( "option", { disabled: true } );
17 предыдущая ([событие])

Это действие перемещает активное состояние в предыдущий пункт меню. Где событие имеет тип Событие и представляет то, что вызвало фокус для перемещения.

Действие — предыдущее ([событие])

Это действие перемещает активное состояние в предыдущий пункт меню. Где событие имеет тип Событие и представляет то, что вызвало фокус для перемещения.

Синтаксис 

$(".selector").menu( "previous" );
18 previousPage ([событие])

Это действие перемещает активное состояние в первый пункт меню над верхней частью прокручиваемого меню или в первый пункт, если не прокручиваемый. Где событие имеет тип Событие и представляет то, что вызвало фокус для перемещения.

Действие — предыдущая страница ([событие])

Это действие перемещает активное состояние в первый пункт меню над верхней частью прокручиваемого меню или в первый пункт, если не прокручиваемый. Где событие имеет тип Событие и представляет то, что вызвало фокус для перемещения.

Синтаксис 

$(".selector").menu( "previousPage" );
19 обновить ()

Это действие инициализирует подменю и пункты меню, которые еще не были инициализированы. Этот метод не принимает никаких аргументов.

Действие — обновить ()

Это действие инициализирует подменю и пункты меню, которые еще не были инициализированы. Этот метод не принимает никаких аргументов.

Синтаксис 

$(".selector").menu( "refresh" );
20 выберите ([событие])

Это действие выбирает текущий активный элемент меню, сворачивает все подменю и запускает событие выбора меню. Где событие имеет тип Событие и представляет то, что вызвало выбор.

Действие — выберите ([событие])

Это действие выбирает текущий активный элемент меню, сворачивает все подменю и запускает событие выбора меню. Где событие имеет тип Событие и представляет то, что вызвало выбор.

Синтаксис 

$(".selector").menu( "select" );
21 виджет ()

Это действие возвращает объект jQuery, содержащий меню. Этот метод не принимает никаких аргументов.

Действие — виджет ()

Это действие возвращает объект jQuery, содержащий меню. Этот метод не принимает никаких аргументов.

Синтаксис 

$(".selector").menu( "widget" );

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

Действие — размытие ([событие])

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

Синтаксис

Это действие закрывает текущее активное подменю. Где событие имеет тип Событие и представляет то, что вызвало падение меню.

Действие — крах ([событие])

Это действие закрывает текущее активное подменю. Где событие имеет тип Событие и представляет то, что вызвало падение меню.

Синтаксис

Это действие закрывает все открытые подменю.

Действие — collapseAll ([событие] [, все])

Это действие закрывает все открытые подменю. Где —

Событие имеет тип Событие и представляет то, что вызвало меню, чтобы свернуть

all имеет тип Boolean Указывает, должны ли быть закрыты все подменю или только подменю ниже, включая меню, которое является или содержит цель инициирующего события.

Синтаксис

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

Действие — уничтожить ()

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

Синтаксис

Это действие отключает меню. Этот метод не принимает никаких аргументов.

Действие — отключить ()

Это действие отключает меню. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие активирует меню. Этот метод не принимает никаких аргументов.

Действие — включить ()

Это действие включает меню. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие открывает подменю под текущим активным элементом, если таковой существует. Где событие имеет тип события и представляет собой то, что вызвало расширение меню.

Действие — развернуть ([событие])

Это действие открывает подменю под текущим активным элементом, если таковой существует. Где событие имеет тип события и представляет собой то, что вызвало расширение меню.

Синтаксис

Это действие активирует определенный элемент меню, начинает открывать любое подменю, если оно присутствует, и запускает событие фокуса меню. Где событие имеет тип события и представляет то, что вызвало меню, чтобы получить фокус. и item — это объект jQuery, представляющий пункт меню для фокусировки / активации.

Действие — фокус ([событие], предмет)

Это действие активирует определенный элемент меню, начинает открывать любое подменю, если оно присутствует, и запускает событие фокуса меню. Где событие имеет тип события и представляет то, что вызвало меню, чтобы получить фокус. и item — это объект jQuery, представляющий пункт меню для фокусировки / активации.

Синтаксис

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

Действие — isFirstItem ()

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

Синтаксис

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

Действие — isLastItem ()

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

Синтаксис

Это действие делегирует активное состояние следующему пункту меню. Где событие имеет тип Событие и представляет то, что вызвало фокус для перемещения.

Действие — следующее ([событие])

Это действие делегирует активное состояние следующему пункту меню. Где событие имеет тип Событие и представляет то, что вызвало фокус для перемещения.

Синтаксис

Это действие перемещает активное состояние в первый пункт меню под нижней частью прокручиваемого меню или в последний пункт, если не прокручиваемый. Где событие имеет тип Событие и представляет то, что вызвало фокус для перемещения.

Действие — следующая страница ([событие])

Это действие перемещает активное состояние в первый пункт меню под нижней частью прокручиваемого меню или в последний пункт, если не прокручиваемый. Где событие имеет тип Событие и представляет то, что вызвало фокус для перемещения.

Синтаксис

Это действие возвращает значение, связанное с указанным параметром optionName . Где optionName имеет тип String и представляет имя опции, которую нужно получить.

Действие — опция (optionName)

Это действие возвращает значение, связанное с указанным параметром optionName . Где optionName имеет тип String и представляет имя опции, которую нужно получить.

Синтаксис

Это действие получает объект, содержащий пары ключ / значение, представляющие текущий хэш опций меню.

Действие — опция ()

Это действие получает объект, содержащий пары ключ / значение, представляющие текущий хэш опций меню.

Синтаксис

Это действие устанавливает значение опции меню, связанной с указанным optionName. Где optionName имеет тип String и представляет имя опции для установки, а значение имеет тип Object и представляет значение для установки опции.

Действие — опция (optionName, value)

Это действие устанавливает значение опции меню, связанной с указанным optionName. Где optionName имеет тип String и представляет имя опции для установки, а значение имеет тип Object и представляет значение для установки опции.

Синтаксис

Это действие устанавливает один или несколько параметров для меню. Где параметры имеют тип Object и представляют собой карту пар параметр-значение для установки.

Действие — опция (варианты)

Это действие устанавливает один или несколько параметров для меню. Где параметры имеют тип Object и представляют собой карту пар параметр-значение для установки.

Синтаксис

Это действие перемещает активное состояние в предыдущий пункт меню. Где событие имеет тип Событие и представляет то, что вызвало фокус для перемещения.

Действие — предыдущее ([событие])

Это действие перемещает активное состояние в предыдущий пункт меню. Где событие имеет тип Событие и представляет то, что вызвало фокус для перемещения.

Синтаксис

Это действие перемещает активное состояние в первый пункт меню над верхней частью прокручиваемого меню или в первый пункт, если не прокручиваемый. Где событие имеет тип Событие и представляет то, что вызвало фокус для перемещения.

Действие — предыдущая страница ([событие])

Это действие перемещает активное состояние в первый пункт меню над верхней частью прокручиваемого меню или в первый пункт, если не прокручиваемый. Где событие имеет тип Событие и представляет то, что вызвало фокус для перемещения.

Синтаксис

Это действие инициализирует подменю и пункты меню, которые еще не были инициализированы. Этот метод не принимает никаких аргументов.

Действие — обновить ()

Это действие инициализирует подменю и пункты меню, которые еще не были инициализированы. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие выбирает текущий активный элемент меню, сворачивает все подменю и запускает событие выбора меню. Где событие имеет тип Событие и представляет то, что вызвало выбор.

Действие — выберите ([событие])

Это действие выбирает текущий активный элемент меню, сворачивает все подменю и запускает событие выбора меню. Где событие имеет тип Событие и представляет то, что вызвало выбор.

Синтаксис

Это действие возвращает объект jQuery, содержащий меню. Этот метод не принимает никаких аргументов.

Действие — виджет ()

Это действие возвращает объект jQuery, содержащий меню. Этот метод не принимает никаких аргументов.

Синтаксис

Следующие примеры демонстрируют, как использовать действия, приведенные в таблице выше.

Использование метода отключения

В следующем примере демонстрируется использование метода disable () . 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      <!-- Javascript -->
      
      <script>
         $(function() {
            $( "#menu-3" ).menu();
            $( "#menu-3" ).menu("disable");
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <ul id = "menu-3">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
      </ul>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле menuexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод:

В приведенном выше примере вы можете увидеть, что меню отключено.

Использование методов focus и collapseAll

В следующем примере демонстрируется использование методов focus () и collapseAll . 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            var menu = $("#menu-4").menu();
            $( "#menu-4" ).menu(
               "focus", null, $( "#menu-4" ).menu().find( ".ui-menu-item:last" ));
            $(menu).mouseleave(function () {
               menu.menu('collapseAll');
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <ul id = "menu-4">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
      </ul>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле menuexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод:

В приведенном выше примере вы можете видеть, что фокус находится на последнем пункте меню. Теперь разверните подменю, и когда мышь покидает подменю, подменю закрывается.

Управление событиями на элементах меню

В дополнение к методу menu (options), который мы видели в предыдущих разделах, JqueryUI предоставляет методы событий, которые запускаются для определенного события. Эти методы событий перечислены ниже —

Sr.No. Метод и описание события
1 размытие (событие, интерфейс)

Это событие срабатывает, когда меню теряет фокус.

Событие — размытие (событие, интерфейс)

Это событие срабатывает, когда меню теряет фокус. Где событие имеет тип Event , а пользовательский интерфейс имеет тип Object и представляет текущий активный элемент меню.

Синтаксис 

$( ".selector" ).menu({
   blur: function( event, ui ) {}
});
2 создать (событие, пользовательский интерфейс)

Это событие срабатывает при создании меню.

Событие — создать (событие, пользовательский интерфейс)

Это событие срабатывает при создании меню. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Синтаксис 

$( ".selector" ).menu({
   create: function( event, ui ) {}
});
3 фокус (событие, интерфейс)

Это событие вызывается, когда меню получает фокус или когда активируется какой-либо пункт меню.

Событие — фокус (событие, интерфейс)

Это событие вызывается, когда меню получает фокус или когда активируется какой-либо пункт меню. Где событие имеет тип Event , а пользовательский интерфейс имеет тип Object и представляет текущий активный элемент меню.

Синтаксис 

$( ".selector" ).menu({
   focus: function( event, ui ) {}
});
4 выберите (событие, интерфейс)

Это событие вызывается при выборе пункта меню.

Событие — выберите (событие, интерфейс)

Это событие вызывается при выборе пункта меню. Где событие имеет тип Event , а пользовательский интерфейс имеет тип Object и представляет текущий активный элемент меню.

Синтаксис 

$( ".selector" ).menu({
   select: function( event, ui ) {}
});

Это событие срабатывает, когда меню теряет фокус.

Событие — размытие (событие, интерфейс)

Это событие срабатывает, когда меню теряет фокус. Где событие имеет тип Event , а пользовательский интерфейс имеет тип Object и представляет текущий активный элемент меню.

Синтаксис

Это событие срабатывает при создании меню.

Событие — создать (событие, пользовательский интерфейс)

Это событие срабатывает при создании меню. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Синтаксис

Это событие вызывается, когда меню получает фокус или когда активируется какой-либо пункт меню.

Событие — фокус (событие, интерфейс)

Это событие вызывается, когда меню получает фокус или когда активируется какой-либо пункт меню. Где событие имеет тип Event , а пользовательский интерфейс имеет тип Object и представляет текущий активный элемент меню.

Синтаксис

Это событие вызывается при выборе пункта меню.

Событие — выберите (событие, интерфейс)

Это событие вызывается при выборе пункта меню. Где событие имеет тип Event , а пользовательский интерфейс имеет тип Object и представляет текущий активный элемент меню.

Синтаксис

пример

В следующем примере демонстрируется использование метода события для функциональности виджета меню. Этот пример демонстрирует использование событий create , blur и focus . 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#menu-5" ).menu({
               create: function( event, ui ) {
                  var result = $( "#result" );
                  result.append( "Create event<br>" );
               },
               blur: function( event, ui ) {
                  var result = $( "#result" );
                  result.append( "Blur event<br>" );
               },
               focus: function( event, ui ) {
                  var result = $( "#result" );
                  result.append( "focus event<br>" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <ul id = "menu-5">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
      </ul>
      <span id = "result"></span>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле menuexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод:

В приведенном выше примере мы печатаем сообщения в зависимости от инициированных событий.

47
Share: