JqueryUI - Menu

Um widget de menu geralmente consiste em uma barra de menu principal com menus pop-up. Os itens nos menus pop-up geralmente têm menus pop-up secundários. Um menu pode ser criado usando os elementos de marcação, desde que a relação pai-filho seja mantida (usando <ul> ou <ol>). Cada item de menu possui um elemento âncora.

O Menu Widget em jQueryUI pode ser usado para menus embutidos e pop-up, ou como base para construir sistemas de menu mais complexos. Por exemplo, você pode criar menus aninhados com posicionamento personalizado.

jQueryUI fornece métodos menu () para criar um menu.

Sintaxe

o menu() método pode ser usado em duas formas -

$ (seletor, contexto) .menu (opções) Método

O método menu (opções) declara que um elemento HTML e seu conteúdo devem ser tratados e gerenciados como menus. O parâmetro options é um objeto que especifica a aparência e o comportamento dos itens de menu envolvidos.

Sintaxe

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

Você pode fornecer uma ou mais opções por vez usando o objeto Javascript. Se houver mais de uma opção a ser fornecida, você irá separá-las usando uma vírgula da seguinte forma -

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

A tabela a seguir lista as diferentes opções que podem ser usadas com este método -

Sr. Não. Opção e descrição
1 Desativado

Esta opção, se definida como verdadeira, desativa o menu. Por padrão, seu valor éfalse.

Option - disabled

Esta opção, se definida como verdadeira, desativa o menu. Por padrão, seu valor éfalse.

Syntax

$( ".selector" ).menu (
   { disabled: true }
);
2 ícones

Esta opção define os ícones para submenus. Por padrão, seu valor é{ submenu: "ui-icon-carat-1-e" }.

Option - icons

Esta opção define os ícones para submenus. Por padrão, seu valor é{ submenu: "ui-icon-carat-1-e" }.

Syntax

$( ".selector" ).menu (
   { icons: { submenu: "ui-icon-circle-triangle-e" } }
);
3 cardápios

Esta opção é um seletor para os elementos que servem como contêiner do menu, incluindo submenus. Por padrão, seu valor éul.

Option - menus

Esta opção é um seletor para os elementos que servem como contêiner do menu, incluindo submenus. Por padrão, seu valor éul.

Syntax

$( ".selector" ).menu (
   { menus: "div" }
);
4 posição

Esta opção define a posição dos submenus em relação ao item de menu pai associado. Por padrão, seu valor é{ my: "left top", at: "right top" }.

Option - position

Esta opção define a posição dos submenus em relação ao item de menu pai associado. Por padrão, seu valor é{ my: "left top", at: "right top" }.

Syntax

$( ".selector" ).menu (
   { position: { my: "left top", at: "right-5 top+5" } }
);
5 Função

Esta opção é usada para personalizar as funções ARIA usadas para o menu e itens de menu. Por padrão, seu valor émenu.

Option - role

Esta opção é usada para personalizar as funções ARIA usadas para o menu e itens de menu. Por padrão, seu valor émenu.

Como parte da Web Accessibility Initiative (WAI), o Accessible Rich Internet Applications Suite (ARIA), define uma maneira de tornar o conteúdo da Web e os aplicativos da Web mais acessíveis. É usado para melhorar a acessibilidade de conteúdo dinâmico e controles avançados de interface com o usuário desenvolvidos com Ajax, HTML, JavaScript e tecnologias relacionadas. Você pode ler mais sobre isso em: ARIA

Syntax

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

Funcionalidade padrão

O exemplo a seguir demonstra um exemplo simples de funcionalidade do widget de menu, sem passar parâmetros para o menu() método.

<!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>

Vamos salvar o código acima em um arquivo HTML menuexample.htme abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída. Agora, você pode brincar com o resultado -

No exemplo acima, você pode ver um menu temático com interações de mouse e teclado para navegação.

Uso de ícones e posição

O exemplo a seguir demonstra o uso de duas opções iconse position na função de menu do 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>

Vamos salvar o código acima em um arquivo HTML menuexample.htme abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída. Agora, você pode brincar com o resultado -

No exemplo acima, você pode ver que aplicamos uma imagem de ícone para a lista de submenus e também alteramos a posição do submenu.

$ (seletor, contexto) .menu ("ação", parâmetros) Método

O método do menu ("ação", parâmetros) pode executar uma ação nos elementos do menu, como ativar / desativar o menu. A ação é especificada como uma string no primeiro argumento (por exemplo, "desativar" desativa o menu). Confira as ações que podem ser aprovadas, na tabela a seguir.

Sintaxe

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

A tabela a seguir lista as diferentes ações que podem ser usadas com este método -

Sr. Não. Ação e descrição
1 desfoque ([evento])

Esta ação remove o foco de um menu. Ele aciona o evento de desfoque do menu redefinindo qualquer estilo de elemento ativo. Onde o evento é do tipoEvent e representa o que acionou o desfoque do menu.

Action - blur( [event ] )

Esta ação remove o foco de um menu. Ele aciona o evento de desfoque do menu redefinindo qualquer estilo de elemento ativo. Onde o evento é do tipoEvent e representa o que acionou o desfoque do menu.

Syntax

$(".selector").menu( "blur" );
2 recolher ([evento])

Esta ação fecha o submenu ativo atual. Onde o evento é do tipoEvent e representa o que fez com que o menu desmoronasse.

Action - collapse( [event ] )

Esta ação fecha o submenu ativo atual. Onde o evento é do tipoEvent e representa o que fez com que o menu desmoronasse.

Syntax

$(".selector").menu( "collapse" );
3 collapseAll ([evento] [, todos])

Esta ação fecha todos os submenus abertos.

Action - collapseAll( [event ] [, all ] )

Esta ação fecha todos os submenus abertos. Onde -

  • evento é do tipoEvent e representa o que acionou o menu para recolher

  • tudo é do tipoBoolean Indica se todos os submenus devem ser fechados ou apenas os submenus abaixo e incluindo o menu que é ou contém o destino do evento de disparo.

Syntax

$(".selector").menu( "collapseAll", null, true );
4 destruir()

Esta ação remove completamente a funcionalidade do menu. Isso retornará o elemento de volta ao seu estado pré-inicialização. Este método não aceita nenhum argumento.

Action - destroy()

Esta ação remove completamente a funcionalidade do menu. Isso retornará o elemento de volta ao seu estado pré-inicialização. Este método não aceita nenhum argumento.

Syntax

$(".selector").menu( "destroy" );
5 desabilitar ()

Esta ação desativa o menu. Este método não aceita nenhum argumento.

Action - disable()

Esta ação desativa o menu. Este método não aceita nenhum argumento.

Syntax

$(".selector").menu( "disable" );
6 habilitar()

Esta ação ativa o menu. Este método não aceita nenhum argumento.

Action - enable()

Esta ação ativa o menu. Este método não aceita nenhum argumento.

Syntax

$(".selector").menu( "enable" );
7 expandir ([evento])

Esta ação abre o submenu abaixo do item ativo no momento, se houver. Onde o evento é do tipoEvent e representa o que acionou a expansão do menu.

Action - expand( [event ] )

Esta ação abre o submenu abaixo do item ativo no momento, se houver. Onde o evento é do tipoEvent e representa o que acionou a expansão do menu.

Syntax

$(".selector").menu( "expand" );
8 foco ([evento], item)

Esta ação ativa um item de menu específico, começa a abrir qualquer submenu se presente e dispara o evento de foco do menu. Onde o evento é do tipoEvente representa o que acionou o menu para obter o foco. e item é um objeto jQuery que representa o item de menu a ser focalizado / ativado.

Action - focus( [event ], item )

Esta ação ativa um item de menu específico, começa a abrir qualquer submenu se presente e dispara o evento de foco do menu. Onde o evento é do tipoEvente representa o que acionou o menu para obter o foco. e item é um objeto jQuery que representa o item de menu a ser focalizado / ativado.

Syntax

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

Esta ação retorna um valor booleano , que indica se o item de menu ativo atual é o primeiro item de menu. Este método não aceita nenhum argumento.

Action - isFirstItem()

Esta ação retorna um valor booleano , que indica se o item de menu ativo atual é o primeiro item de menu. Este método não aceita nenhum argumento.

Syntax

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

Esta ação retorna um valor booleano , que indica se o item de menu ativo atual é o último item de menu. Este método não aceita nenhum argumento.

Action - isLastItem()

Esta ação retorna um valor booleano , que indica se o item de menu ativo atual é o último item de menu. Este método não aceita nenhum argumento.

Syntax

$(".selector").menu( "isLastItem" );
11 próximo evento ] )

Esta ação delega o estado ativo para o próximo item de menu. Onde o evento é do tipoEvent e representa o que acionou o foco para se mover.

Action - next( [event ] )

Esta ação delega o estado ativo para o próximo item de menu. Onde o evento é do tipoEvent e representa o que acionou o foco para se mover.

Syntax

$(".selector").menu( "next" );
12 nextPage ([evento])

Esta ação move o estado ativo para o primeiro item de menu abaixo da parte inferior de um menu rolável ou o último item se não for rolável. Onde o evento é do tipoEvent e representa o que acionou o foco para se mover.

Action - nextPage( [event ] )

Esta ação move o estado ativo para o primeiro item de menu abaixo da parte inferior de um menu rolável ou o último item se não for rolável. Onde o evento é do tipoEvent e representa o que acionou o foco para se mover.

Syntax

$(".selector").menu( "nextPage" );
13 opção (optionName)

Esta ação obtém o valor atualmente associado ao optionName especificado . Onde optionName é do tipoString e representa o nome da opção de obter.

Action - option( optionName )

Esta ação obtém o valor atualmente associado ao optionName especificado . Onde optionName é do tipoString e representa o nome da opção de obter.

Syntax

var isDisabled = $( ".selector" ).menu( "option", "disabled" );
14 opção()

Esta ação obtém um objeto contendo pares de chave / valor que representam o hash de opções do menu atual.

Action - option()

Esta ação obtém um objeto contendo pares de chave / valor que representam o hash de opções do menu atual.

Syntax

var options = $( ".selector" ).menu( "option" );
15 opção (optionName, value)

Esta ação define o valor da opção de menu associada ao optionName especificado. Onde optionName é do tipoStringe representa o nome da opção a ser definida e o valor é do tipo Object e representa o valor a ser definido para a opção.

Action - option( optionName, value )

Esta ação define o valor da opção de menu associada ao optionName especificado. Onde optionName é do tipoStringe representa o nome da opção a ser definida e o valor é do tipo Object e representa o valor a ser definido para a opção.

Syntax

$(".selector").menu( "option", "disabled", true );
16 opção (opções)

Esta ação define uma ou mais opções para o menu. Onde as opções são do tipoObject e representa um mapa de pares de opção-valor a definir.

Action - option( options )

Esta ação define uma ou mais opções para o menu. Onde as opções são do tipoObject e representa um mapa de pares de opção-valor a definir.

Syntax

$(".selector").menu( "option", { disabled: true } );
17 anterior ([evento])

Esta ação move o estado ativo para o item de menu anterior. Onde o evento é do tipoEvent e representa o que acionou o foco para se mover.

Action - previous( [event ] )

Esta ação move o estado ativo para o item de menu anterior. Onde o evento é do tipoEvent e representa o que acionou o foco para se mover.

Syntax

$(".selector").menu( "previous" );
18 anteriorPage ([evento])

Esta ação move o estado ativo para o primeiro item de menu acima do topo de um menu rolável ou o primeiro item se não for rolável. Onde o evento é do tipoEvent e representa o que acionou o foco para se mover.

Action - previousPage( [event ] )

Esta ação move o estado ativo para o primeiro item de menu acima do topo de um menu rolável ou o primeiro item se não for rolável. Onde o evento é do tipoEvent e representa o que acionou o foco para se mover.

Syntax

$(".selector").menu( "previousPage" );
19 atualizar ()

Esta ação inicializa submenus e itens de menu que ainda não foram inicializados. Este método não aceita nenhum argumento.

Action - refresh()

Esta ação inicializa submenus e itens de menu que ainda não foram inicializados. Este método não aceita nenhum argumento.

Syntax

$(".selector").menu( "refresh" );
20 selecione ([evento])

Esta ação seleciona o item de menu ativo no momento, recolhe todos os submenus e aciona o evento de seleção do menu. Onde o evento é do tipoEvent e representa o que acionou a seleção.

Action - select( [event ] )

Esta ação seleciona o item de menu ativo no momento, recolhe todos os submenus e aciona o evento de seleção do menu. Onde o evento é do tipoEvent e representa o que acionou a seleção.

Syntax

$(".selector").menu( "select" );
21 ferramenta()

Esta ação retorna um objeto jQuery contendo o menu. Este método não aceita nenhum argumento.

Action - widget()

Esta ação retorna um objeto jQuery contendo o menu. Este método não aceita nenhum argumento.

Syntax

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

Os exemplos a seguir demonstram como usar as ações fornecidas na tabela acima.

Uso do método de desabilitação

O exemplo a seguir demonstra o uso do método 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>

Vamos salvar o código acima em um arquivo HTML menuexample.htm e abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída -

No exemplo acima, você pode ver que o menu está desabilitado.

Uso dos métodos focus e collapseAll

O exemplo a seguir demonstra o uso dos métodos focus () e 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>

Vamos salvar o código acima em um arquivo HTML menuexample.htm e abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída -

No exemplo acima, você pode ver que o foco está no último item do menu. Agora expanda o submenu e quando o mouse sai do submenu, o submenu é fechado.

Gerenciamento de eventos nos elementos do menu

Além do método de menu (opções) que vimos nas seções anteriores, JqueryUI fornece métodos de evento que são acionados para um evento específico. Esses métodos de evento estão listados abaixo -

Sr. Não. Método e descrição do evento
1 desfoque (evento, ui)

Este evento é acionado quando um menu perde o foco.

Event - blur(event, ui)

Este evento é acionado quando um menu perde o foco. Onde evento é do tipo Evento e ui é do tipo Objeto e representa o item de menu ativo no momento.

Syntax

$( ".selector" ).menu({
   blur: function( event, ui ) {}
});
2 criar (evento, ui)

Este evento é acionado quando um menu é criado.

Event - create(event, ui)

Este evento é acionado quando um menu é criado. Onde o evento é do tipo Evento e ui é do tipo Objeto .

Syntax

$( ".selector" ).menu({
   create: function( event, ui ) {}
});
3 foco (evento, ui)

Este evento é disparado quando um menu ganha foco ou quando qualquer item do menu é ativado.

Event - focus(event, ui)

Este evento é disparado quando um menu ganha foco ou quando qualquer item do menu é ativado. Onde evento é do tipo Evento e ui é do tipo Objeto e representa o item de menu ativo no momento.

Syntax

$( ".selector" ).menu({
   focus: function( event, ui ) {}
});
4 selecione (evento, ui)

Este evento é disparado quando um item de menu é selecionado.

Event - select(event, ui)

Este evento é disparado quando um item de menu é selecionado. Onde evento é do tipo Evento e ui é do tipo Objeto e representa o item de menu ativo no momento.

Syntax

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

Exemplo

O exemplo a seguir demonstra o uso do método de evento para a funcionalidade do widget de menu. Este exemplo demonstra o uso de criação , desfoque e foco de evento .

<!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>

Vamos salvar o código acima em um arquivo HTML menuexample.htm e abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída -

No exemplo acima, estamos imprimindo as mensagens com base nos eventos disparados.