JqueryUI - Menú

Un widget de menú generalmente consta de una barra de menú principal con menús emergentes. Los elementos de los menús emergentes suelen tener submenús emergentes. Se puede crear un menú usando los elementos de marcado siempre que se mantenga la relación padre-hijo (usando <ul> o <ol>). Cada elemento del menú tiene un elemento de anclaje.

El widget de menú en jQueryUI se puede utilizar para menús en línea y emergentes, o como base para crear sistemas de menús más complejos. Por ejemplo, puede crear menús anidados con posicionamiento personalizado.

jQueryUI proporciona métodos menu () para crear un menú.

Sintaxis

los menu() El método se puede utilizar de dos formas:

$ (selector, contexto) .menu (opciones) Método

El método de menú (opciones) declara que un elemento HTML y su contenido deben tratarse y administrarse como menús. El parámetro de opciones es un objeto que especifica la apariencia y el comportamiento de los elementos del menú involucrados.

Sintaxis

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

Puede proporcionar una o más opciones a la vez utilizando el objeto Javascript. Si hay más de una opción para proporcionar, las separará usando una coma de la siguiente manera:

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

La siguiente tabla enumera las diferentes opciones que se pueden utilizar con este método:

No Señor. Opción y descripción
1 discapacitado

Esta opción, si se establece en true, desactiva el menú. Por defecto su valor esfalse.

Option - disabled

Esta opción, si se establece en true, desactiva el menú. Por defecto su valor esfalse.

Syntax

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

Esta opción establece los iconos de los submenús. Por defecto su valor es{ submenu: "ui-icon-carat-1-e" }.

Option - icons

Esta opción establece los iconos de los submenús. Por defecto su valor es{ submenu: "ui-icon-carat-1-e" }.

Syntax

$( ".selector" ).menu (
   { icons: { submenu: "ui-icon-circle-triangle-e" } }
);
3 menús

Esta opción es un selector de los elementos que sirven como contenedor del menú, incluidos los submenús. Por defecto su valor esul.

Option - menus

Esta opción es un selector de los elementos que sirven como contenedor del menú, incluidos los submenús. Por defecto su valor esul.

Syntax

$( ".selector" ).menu (
   { menus: "div" }
);
4 posición

Esta opción establece la posición de los submenús en relación con el elemento del menú principal asociado. Por defecto su valor es{ my: "left top", at: "right top" }.

Option - position

Esta opción establece la posición de los submenús en relación con el elemento del menú principal asociado. Por defecto su valor es{ my: "left top", at: "right top" }.

Syntax

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

Esta opción se utiliza para personalizar los roles ARIA utilizados para el menú y los elementos del menú. Por defecto su valor esmenu.

Option - role

Esta opción se utiliza para personalizar los roles ARIA utilizados para el menú y los elementos del menú. Por defecto su valor esmenu.

Como parte de la Iniciativa de Accesibilidad Web (WAI), Accessible Rich Internet Applications Suite (ARIA), define una forma de hacer que el contenido y las aplicaciones Web sean más accesibles. Se utiliza para mejorar la accesibilidad de contenido dinámico y controles avanzados de interfaz de usuario desarrollados con Ajax, HTML, JavaScript y tecnologías relacionadas. Puede leer más sobre esto en: ARIA

Syntax

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

Funcionalidad predeterminada

El siguiente ejemplo muestra un ejemplo simple de la funcionalidad del widget de menú, sin pasar parámetros al 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>

Guardemos el código anterior en un archivo HTML. menuexample.htmy abrirlo en un navegador estándar que admita javascript, también debe ver el siguiente resultado. Ahora puedes jugar con el resultado:

En el ejemplo anterior, puede ver un menú temático con interacciones de mouse y teclado para la navegación.

Uso de iconos y posición

El siguiente ejemplo demuestra el uso de dos opciones iconsy position en la función de menú de 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>

Guardemos el código anterior en un archivo HTML. menuexample.htmy abrirlo en un navegador estándar que admita javascript, también debe ver el siguiente resultado. Ahora puedes jugar con el resultado:

En el ejemplo anterior, puede ver que hemos aplicado una imagen de icono para la lista de submenús y también cambiamos la posición del submenú.

$ (selector, contexto) .menu ("acción", params) Método

El método de menú ("acción", parámetros) puede realizar una acción en los elementos del menú, como habilitar / deshabilitar el menú. La acción se especifica como una cadena en el primer argumento (por ejemplo, "desactivar" desactiva el menú). Consulte las acciones que se pueden aprobar en la siguiente tabla.

Sintaxis

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

La siguiente tabla enumera las diferentes acciones que se pueden utilizar con este método:

No Señor. Acción Descripción
1 desenfoque ([evento])

Esta acción quita el foco de un menú. Activa el evento de desenfoque del menú al restablecer cualquier estilo de elemento activo. Donde el evento es de tipoEvent y representa lo que desencadenó el desenfoque del menú.

Action - blur( [event ] )

Esta acción quita el foco de un menú. Activa el evento de desenfoque del menú al restablecer cualquier estilo de elemento activo. Donde el evento es de tipoEvent y representa lo que desencadenó el desenfoque del menú.

Syntax

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

Esta acción cierra el submenú activo actual. Donde el evento es de tipoEvent y representa lo que provocó el colapso del menú.

Action - collapse( [event ] )

Esta acción cierra el submenú activo actual. Donde el evento es de tipoEvent y representa lo que provocó el colapso del menú.

Syntax

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

Esta acción cierra todos los submenús abiertos.

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

Esta acción cierra todos los submenús abiertos. Donde -

  • el evento es de tipoEvent y representa lo que provocó el colapso del menú

  • todo es de tipoBoolean Indica si se deben cerrar todos los submenús o solo los submenús siguientes e incluido el menú que es o contiene el objetivo del evento desencadenante.

Syntax

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

Esta acción elimina completamente la funcionalidad del menú. Esto devolverá el elemento a su estado previo al inicio. Este método no acepta argumentos.

Action - destroy()

Esta acción elimina completamente la funcionalidad del menú. Esto devolverá el elemento a su estado previo al inicio. Este método no acepta argumentos.

Syntax

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

Esta acción desactiva el menú. Este método no acepta argumentos.

Action - disable()

Esta acción desactiva el menú. Este método no acepta argumentos.

Syntax

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

Esta acción habilita el menú. Este método no acepta argumentos.

Action - enable()

Esta acción habilita el menú. Este método no acepta argumentos.

Syntax

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

Esta acción abre el submenú debajo del elemento activo actualmente, si existe. Donde el evento es de tipoEvent y representa lo que provocó la expansión del menú.

Action - expand( [event ] )

Esta acción abre el submenú debajo del elemento activo actualmente, si existe. Donde el evento es de tipoEvent y representa lo que provocó la expansión del menú.

Syntax

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

Esta acción activa un elemento de menú en particular, comienza a abrir cualquier submenú si está presente y activa el evento de enfoque del menú. Donde el evento es de tipoEventy representa lo que provocó que el menú se enfocara. y el elemento es un objeto jQuery que representa el elemento del menú para enfocar / activar.

Action - focus( [event ], item )

Esta acción activa un elemento de menú en particular, comienza a abrir cualquier submenú si está presente y activa el evento de enfoque del menú. Donde el evento es de tipoEventy representa lo que provocó que el menú se enfocara. y el elemento es un objeto jQuery que representa el elemento del menú para enfocar / activar.

Syntax

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

Esta acción devuelve un valor booleano , que indica si el elemento de menú activo actual es el primer elemento de menú. Este método no acepta argumentos.

Action - isFirstItem()

Esta acción devuelve un valor booleano , que indica si el elemento de menú activo actual es el primer elemento de menú. Este método no acepta argumentos.

Syntax

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

Esta acción devuelve un valor booleano , que indica si el elemento de menú activo actual es el último elemento de menú. Este método no acepta argumentos.

Action - isLastItem()

Esta acción devuelve un valor booleano , que indica si el elemento de menú activo actual es el último elemento de menú. Este método no acepta argumentos.

Syntax

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

Esta acción delega el estado activo al siguiente elemento del menú. Donde el evento es de tipoEvent y representa lo que provocó que el foco se moviera.

Action - next( [event ] )

Esta acción delega el estado activo al siguiente elemento del menú. Donde el evento es de tipoEvent y representa lo que provocó que el foco se moviera.

Syntax

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

Esta acción mueve el estado activo al primer elemento del menú debajo de la parte inferior de un menú desplazable o al último elemento si no es desplazable. Donde el evento es de tipoEvent y representa lo que provocó que el foco se moviera.

Action - nextPage( [event ] )

Esta acción mueve el estado activo al primer elemento del menú debajo de la parte inferior de un menú desplazable o al último elemento si no es desplazable. Donde el evento es de tipoEvent y representa lo que provocó que el foco se moviera.

Syntax

$(".selector").menu( "nextPage" );
13 opción (optionName)

Esta acción obtiene el valor asociado actualmente con el optionName especificado . Donde optionName es de tipoString y representa el nombre de la opción a obtener.

Action - option( optionName )

Esta acción obtiene el valor asociado actualmente con el optionName especificado . Donde optionName es de tipoString y representa el nombre de la opción a obtener.

Syntax

var isDisabled = $( ".selector" ).menu( "option", "disabled" );
14 opción()

Esta acción obtiene un objeto que contiene pares clave / valor que representan el hash de opciones del menú actual.

Action - option()

Esta acción obtiene un objeto que contiene pares clave / valor que representan el hash de opciones del menú actual.

Syntax

var options = $( ".selector" ).menu( "option" );
15 opción (optionName, valor)

Esta acción establece el valor de la opción de menú asociada con el optionName especificado. Donde optionName es de tipoStringy representa el nombre de la opción para establecer y el valor es de tipo Objeto y representa el valor para establecer para la opción.

Action - option( optionName, value )

Esta acción establece el valor de la opción de menú asociada con el optionName especificado. Donde optionName es de tipoStringy representa el nombre de la opción para establecer y el valor es de tipo Objeto y representa el valor para establecer para la opción.

Syntax

$(".selector").menu( "option", "disabled", true );
dieciséis opción (opciones)

Esta acción establece una o más opciones para el menú. Donde las opciones son de tipoObject y representa un mapa de pares opción-valor para establecer.

Action - option( options )

Esta acción establece una o más opciones para el menú. Donde las opciones son de tipoObject y representa un mapa de pares opción-valor para establecer.

Syntax

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

Esta acción mueve el estado activo al elemento de menú anterior. Donde el evento es de tipoEvent y representa lo que provocó que el foco se moviera.

Action - previous( [event ] )

Esta acción mueve el estado activo al elemento de menú anterior. Donde el evento es de tipoEvent y representa lo que provocó que el foco se moviera.

Syntax

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

Esta acción mueve el estado activo al primer elemento de menú sobre la parte superior de un menú desplazable o al primer elemento si no es desplazable. Donde el evento es de tipoEvent y representa lo que provocó que el foco se moviera.

Action - previousPage( [event ] )

Esta acción mueve el estado activo al primer elemento de menú sobre la parte superior de un menú desplazable o al primer elemento si no es desplazable. Donde el evento es de tipoEvent y representa lo que provocó que el foco se moviera.

Syntax

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

Esta acción inicializa submenús y elementos de menú que aún no se han inicializado. Este método no acepta argumentos.

Action - refresh()

Esta acción inicializa submenús y elementos de menú que aún no se han inicializado. Este método no acepta argumentos.

Syntax

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

Esta acción selecciona el elemento de menú actualmente activo, colapsa todos los submenús y activa el evento de selección del menú. Donde el evento es de tipoEvent y representa lo que provocó la selección.

Action - select( [event ] )

Esta acción selecciona el elemento de menú actualmente activo, colapsa todos los submenús y activa el evento de selección del menú. Donde el evento es de tipoEvent y representa lo que provocó la selección.

Syntax

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

Esta acción devuelve un objeto jQuery que contiene el menú. Este método no acepta argumentos.

Action - widget()

Esta acción devuelve un objeto jQuery que contiene el menú. Este método no acepta argumentos.

Syntax

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

Los siguientes ejemplos demuestran cómo utilizar las acciones indicadas en la tabla anterior.

Uso del método de desactivación

El siguiente ejemplo demuestra el uso del 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>

Guardemos el código anterior en un archivo HTML. menuexample.htm y ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado:

En el ejemplo anterior, puede ver que el menú está deshabilitado.

Uso de enfoque y colapso Todos los métodos

El siguiente ejemplo demuestra el uso de los métodos focus () y 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>

Guardemos el código anterior en un archivo HTML. menuexample.htm y ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado:

En el ejemplo anterior, puede ver que el foco está en el último elemento del menú. Ahora expanda el submenú y cuando el mouse sale del submenú, el submenú se cierra.

Gestión de eventos en elementos del menú

Además del método de menú (opciones) que vimos en las secciones anteriores, JqueryUI proporciona métodos de eventos que se activan para un evento en particular. Estos métodos de eventos se enumeran a continuación:

No Señor. Método y descripción del evento
1 desenfoque (evento, ui)

Este evento se activa cuando un menú pierde el foco.

Event - blur(event, ui)

Este evento se activa cuando un menú pierde el foco. Donde evento es de tipo Evento y ui es de tipo Objeto y representa el elemento de menú actualmente activo.

Syntax

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

Este evento se activa cuando se crea un menú.

Event - create(event, ui)

Este evento se activa cuando se crea un menú. Donde evento es de tipo Evento y ui es de tipo Objeto .

Syntax

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

Este evento se activa cuando un menú gana foco o cuando se activa cualquier elemento del menú.

Event - focus(event, ui)

Este evento se activa cuando un menú gana foco o cuando se activa cualquier elemento del menú. Donde evento es de tipo Evento y ui es de tipo Objeto y representa el elemento de menú actualmente activo.

Syntax

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

Este evento se activa cuando se selecciona un elemento del menú.

Event - select(event, ui)

Este evento se activa cuando se selecciona un elemento del menú. Donde evento es de tipo Evento y ui es de tipo Objeto y representa el elemento de menú actualmente activo.

Syntax

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

Ejemplo

El siguiente ejemplo demuestra el uso del método de evento para la funcionalidad del widget de menú. Este ejemplo demuestra el uso de creación de eventos , desenfoque y enfoque .

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

Guardemos el código anterior en un archivo HTML. menuexample.htm y ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado:

En el ejemplo anterior, estamos imprimiendo los mensajes basados ​​en los eventos activados.