JqueryUI - Menu

Un widget menu di solito è costituito da una barra dei menu principale con menu a comparsa. Gli elementi nei menu a comparsa hanno spesso sottomenu a comparsa. È possibile creare un menu utilizzando gli elementi di markup purché venga mantenuta la relazione genitore-figlio (utilizzando <ul> o <ol>). Ogni voce di menu ha un elemento di ancoraggio.

Il menu Widget in jQueryUI può essere utilizzato per menu in linea e popup o come base per la creazione di sistemi di menu più complessi. Ad esempio, puoi creare menu nidificati con posizionamento personalizzato.

jQueryUI fornisce metodi menu () per creare un menu.

Sintassi

Il menu() può essere utilizzato in due forme:

$ (selettore, contesto) .menu (opzioni) Metodo

Il metodo menu (opzioni) dichiara che un elemento HTML e il suo contenuto devono essere trattati e gestiti come menu. Il parametro options è un oggetto che specifica l'aspetto e il comportamento delle voci di menu coinvolte.

Sintassi

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

Puoi fornire una o più opzioni alla volta utilizzando l'oggetto Javascript. Se ci sono più opzioni da fornire, le separerai usando una virgola come segue:

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

La tabella seguente elenca le diverse opzioni che possono essere utilizzate con questo metodo:

Sr.No. Opzione e descrizione
1 Disabilitato

Questa opzione, se impostata su true, disabilita il menu. Per impostazione predefinita, il suo valore èfalse.

Option - disabled

Questa opzione, se impostata su true, disabilita il menu. Per impostazione predefinita, il suo valore èfalse.

Syntax

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

Questa opzione imposta le icone per i sottomenu. Per impostazione predefinita, il suo valore è{ submenu: "ui-icon-carat-1-e" }.

Option - icons

Questa opzione imposta le icone per i sottomenu. Per impostazione predefinita, il suo valore è{ submenu: "ui-icon-carat-1-e" }.

Syntax

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

Questa opzione è un selettore per gli elementi che fungono da contenitore di menu, inclusi i sottomenu. Per impostazione predefinita, il suo valore èul.

Option - menus

Questa opzione è un selettore per gli elementi che fungono da contenitore di menu, inclusi i sottomenu. Per impostazione predefinita, il suo valore èul.

Syntax

$( ".selector" ).menu (
   { menus: "div" }
);
4 posizione

Questa opzione imposta la posizione dei sottomenu in relazione alla voce di menu principale associata. Per impostazione predefinita, il suo valore è{ my: "left top", at: "right top" }.

Option - position

Questa opzione imposta la posizione dei sottomenu in relazione alla voce di menu principale associata. Per impostazione predefinita, il suo valore è{ my: "left top", at: "right top" }.

Syntax

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

Questa opzione viene utilizzata per personalizzare i ruoli ARIA utilizzati per il menu e le voci di menu. Per impostazione predefinita, il suo valore èmenu.

Option - role

Questa opzione viene utilizzata per personalizzare i ruoli ARIA utilizzati per il menu e le voci di menu. Per impostazione predefinita, il suo valore èmenu.

Nell'ambito della Web Accessibility Initiative (WAI), la Accessible Rich Internet Applications Suite (ARIA), definisce un modo per rendere il contenuto Web e le applicazioni Web più accessibili. Viene utilizzato per migliorare l'accessibilità del contenuto dinamico e dei controlli avanzati dell'interfaccia utente sviluppati con Ajax, HTML, JavaScript e tecnologie correlate. Puoi leggere di più su questo su: ARIA

Syntax

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

Funzionalità predefinita

L'esempio seguente mostra un semplice esempio di funzionalità del widget di menu, senza passare parametri al file menu() metodo.

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

Salviamo il codice sopra in un file HTML menuexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:

Nell'esempio sopra, puoi vedere un menu a tema con interazioni di mouse e tastiera per la navigazione.

Uso delle icone e della posizione

L'esempio seguente mostra l'utilizzo di due opzioni icons, e position nella funzione menu di 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>

Salviamo il codice sopra in un file HTML menuexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:

Nell'esempio sopra, puoi vedere che abbiamo applicato un'immagine icona per l'elenco dei sottomenu e abbiamo anche cambiato la posizione del sottomenu.

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

Il metodo menu ("action", params) può eseguire un'azione sugli elementi del menu, come abilitare / disabilitare il menu. L'azione è specificata come una stringa nel primo argomento (ad esempio, "disable" disabilita il menu). Controlla le azioni che possono essere trasmesse, nella tabella seguente.

Sintassi

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

La tabella seguente elenca le diverse azioni che possono essere utilizzate con questo metodo:

Sr.No. Azione e descrizione
1 sfocatura ([evento])

Questa azione rimuove lo stato attivo da un menu. Attiva l'evento di sfocatura del menu ripristinando qualsiasi stile di elemento attivo. Dove l' evento è di tipoEvent e rappresenta ciò che ha attivato la sfocatura del menu.

Action - blur( [event ] )

Questa azione rimuove lo stato attivo da un menu. Attiva l'evento di sfocatura del menu ripristinando qualsiasi stile di elemento attivo. Dove l' evento è di tipoEvent e rappresenta ciò che ha attivato la sfocatura del menu.

Syntax

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

Questa azione chiude il sottomenu attivo corrente. Dove l' evento è di tipoEvent e rappresenta ciò che ha provocato il collasso del menu.

Action - collapse( [event ] )

Questa azione chiude il sottomenu attivo corrente. Dove l' evento è di tipoEvent e rappresenta ciò che ha provocato il collasso del menu.

Syntax

$(".selector").menu( "collapse" );
3 collapseAll ([event] [, all])

Questa azione chiude tutti i sottomenu aperti.

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

Questa azione chiude tutti i sottomenu aperti. Dove -

  • l'evento è di tipoEvent e rappresenta ciò che ha provocato il collasso del menu

  • tutto è di tipoBoolean Indica se tutti i sottomenu devono essere chiusi o solo i sottomenu sottostanti e compreso il menu che è o contiene l'obiettivo dell'evento scatenante.

Syntax

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

Questa azione rimuove completamente la funzionalità del menu. Questo riporterà l'elemento al suo stato pre-inizializzazione. Questo metodo non accetta argomenti.

Action - destroy()

Questa azione rimuove completamente la funzionalità del menu. Questo riporterà l'elemento al suo stato pre-inizializzazione. Questo metodo non accetta argomenti.

Syntax

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

Questa azione disabilita il menu. Questo metodo non accetta argomenti.

Action - disable()

Questa azione disabilita il menu. Questo metodo non accetta argomenti.

Syntax

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

Questa azione abilita il menu. Questo metodo non accetta argomenti.

Action - enable()

Questa azione abilita il menu. Questo metodo non accetta argomenti.

Syntax

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

Questa azione apre il sottomenu sotto l'elemento attualmente attivo, se presente. Dove l' evento è di tipoEvent e rappresenta ciò che ha attivato l'espansione del menu.

Action - expand( [event ] )

Questa azione apre il sottomenu sotto l'elemento attualmente attivo, se presente. Dove l' evento è di tipoEvent e rappresenta ciò che ha attivato l'espansione del menu.

Syntax

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

Questa azione attiva una particolare voce di menu, avvia l'apertura di qualsiasi sottomenu, se presente, e attiva l'evento focus del menu. Dove l' evento è di tipoEvente rappresenta ciò che ha attivato il menu per ottenere la messa a fuoco. e item è un oggetto jQuery che rappresenta la voce di menu da mettere a fuoco / attivare.

Action - focus( [event ], item )

Questa azione attiva una particolare voce di menu, avvia l'apertura di qualsiasi sottomenu, se presente, e attiva l'evento focus del menu. Dove l' evento è di tipoEvente rappresenta ciò che ha attivato il menu per ottenere la messa a fuoco. e item è un oggetto jQuery che rappresenta la voce di menu da mettere a fuoco / attivare.

Syntax

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

Questa azione restituisce un valore booleano , che indica se la voce di menu attiva corrente è la prima voce di menu. Questo metodo non accetta argomenti.

Action - isFirstItem()

Questa azione restituisce un valore booleano , che indica se la voce di menu attiva corrente è la prima voce di menu. Questo metodo non accetta argomenti.

Syntax

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

Questa azione restituisce un valore booleano , che indica se la voce di menu attiva corrente è l'ultima voce di menu. Questo metodo non accetta argomenti.

Action - isLastItem()

Questa azione restituisce un valore booleano , che indica se la voce di menu attiva corrente è l'ultima voce di menu. Questo metodo non accetta argomenti.

Syntax

$(".selector").menu( "isLastItem" );
11 successivo ([evento])

Questa azione delega lo stato attivo alla voce di menu successiva. Dove l' evento è di tipoEvent e rappresenta ciò che ha attivato lo spostamento del focus.

Action - next( [event ] )

Questa azione delega lo stato attivo alla voce di menu successiva. Dove l' evento è di tipoEvent e rappresenta ciò che ha attivato lo spostamento del focus.

Syntax

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

Questa azione sposta lo stato attivo alla prima voce di menu sotto la parte inferiore di un menu scorrevole o all'ultimo elemento se non è scorrevole. Dove l' evento è di tipoEvent e rappresenta ciò che ha attivato lo spostamento del focus.

Action - nextPage( [event ] )

Questa azione sposta lo stato attivo alla prima voce di menu sotto la parte inferiore di un menu scorrevole o all'ultimo elemento se non è scorrevole. Dove l' evento è di tipoEvent e rappresenta ciò che ha attivato lo spostamento del focus.

Syntax

$(".selector").menu( "nextPage" );
13 opzione (optionName)

Questa azione ottiene il valore attualmente associato con optionName specificato . Dove optionName è di tipoString e rappresenta il nome dell'opzione da ottenere.

Action - option( optionName )

Questa azione ottiene il valore attualmente associato con optionName specificato . Dove optionName è di tipoString e rappresenta il nome dell'opzione da ottenere.

Syntax

var isDisabled = $( ".selector" ).menu( "option", "disabled" );
14 opzione()

Questa azione ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni di menu corrente.

Action - option()

Questa azione ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni di menu corrente.

Syntax

var options = $( ".selector" ).menu( "option" );
15 opzione (optionName, value)

Questa azione imposta il valore dell'opzione di menu associata a optionName specificato. Dove optionName è di tipoStringe rappresenta il nome dell'opzione da impostare e il valore è di tipo Object e rappresenta il valore da impostare per l'opzione.

Action - option( optionName, value )

Questa azione imposta il valore dell'opzione di menu associata a optionName specificato. Dove optionName è di tipoStringe rappresenta il nome dell'opzione da impostare e il valore è di tipo Object e rappresenta il valore da impostare per l'opzione.

Syntax

$(".selector").menu( "option", "disabled", true );
16 opzione (opzioni)

Questa azione imposta una o più opzioni per il menu. Dove le opzioni sono di tipoObject e rappresenta una mappa di coppie opzione-valore da impostare.

Action - option( options )

Questa azione imposta una o più opzioni per il menu. Dove le opzioni sono di tipoObject e rappresenta una mappa di coppie opzione-valore da impostare.

Syntax

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

Questa azione sposta lo stato attivo alla voce di menu precedente. Dove l' evento è di tipoEvent e rappresenta ciò che ha attivato lo spostamento del focus.

Action - previous( [event ] )

Questa azione sposta lo stato attivo alla voce di menu precedente. Dove l' evento è di tipoEvent e rappresenta ciò che ha attivato lo spostamento del focus.

Syntax

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

Questa azione sposta lo stato attivo alla prima voce di menu sopra la parte superiore di un menu scorrevole o alla prima voce se non scorrevole. Dove l' evento è di tipoEvent e rappresenta ciò che ha attivato lo spostamento del focus.

Action - previousPage( [event ] )

Questa azione sposta lo stato attivo alla prima voce di menu sopra la parte superiore di un menu scorrevole o alla prima voce se non scorrevole. Dove l' evento è di tipoEvent e rappresenta ciò che ha attivato lo spostamento del focus.

Syntax

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

Questa azione inizializza i sottomenu e le voci di menu che non sono già state inizializzate. Questo metodo non accetta argomenti.

Action - refresh()

Questa azione inizializza i sottomenu e le voci di menu che non sono già state inizializzate. Questo metodo non accetta argomenti.

Syntax

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

Questa azione seleziona la voce di menu attualmente attiva, comprime tutti i sottomenu e attiva l'evento di selezione del menu. Dove l' evento è di tipoEvent e rappresenta ciò che ha attivato la selezione.

Action - select( [event ] )

Questa azione seleziona la voce di menu attualmente attiva, comprime tutti i sottomenu e attiva l'evento di selezione del menu. Dove l' evento è di tipoEvent e rappresenta ciò che ha attivato la selezione.

Syntax

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

Questa azione restituisce un oggetto jQuery contenente il menu. Questo metodo non accetta argomenti.

Action - widget()

Questa azione restituisce un oggetto jQuery contenente il menu. Questo metodo non accetta argomenti.

Syntax

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

I seguenti esempi dimostrano come utilizzare le azioni fornite nella tabella sopra.

Uso del metodo di disabilitazione

L'esempio seguente mostra l'uso del metodo 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>

Salviamo il codice sopra in un file HTML menuexample.htm e aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output:

Nell'esempio sopra, puoi vedere che il menu è disabilitato.

Uso dei metodi focus e collapseAll

L'esempio seguente mostra l'uso dei metodi 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>

Salviamo il codice sopra in un file HTML menuexample.htm e aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output:

Nell'esempio sopra, puoi vedere che lo stato attivo è sull'ultima voce di menu. Ora espandi il sottomenu e quando il mouse esce dal sottomenu, il sottomenu viene chiuso.

Gestione degli eventi sugli elementi del menu

Oltre al metodo menu (opzioni) che abbiamo visto nelle sezioni precedenti, JqueryUI fornisce metodi di eventi che vengono attivati ​​per un particolare evento. Questi metodi di eventi sono elencati di seguito:

Sr.No. Metodo e descrizione dell'evento
1 sfocatura (evento, ui)

Questo evento viene attivato quando un menu perde il focus.

Event - blur(event, ui)

Questo evento viene attivato quando un menu perde il focus. Dove event è di tipo Event e ui è di tipo Object e rappresenta la voce di menu attualmente attiva.

Syntax

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

Questo evento viene attivato quando viene creato un menu.

Event - create(event, ui)

Questo evento viene attivato quando viene creato un menu. Dove event è di tipo Event e ui è di tipo Object .

Syntax

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

Questo evento viene attivato quando un menu diventa attivo o quando viene attivata una voce di menu.

Event - focus(event, ui)

Questo evento viene attivato quando un menu diventa attivo o quando viene attivata una voce di menu. Dove event è di tipo Event e ui è di tipo Object e rappresenta la voce di menu attualmente attiva.

Syntax

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

Questo evento viene attivato quando viene selezionata una voce di menu.

Event - select(event, ui)

Questo evento viene attivato quando viene selezionata una voce di menu. Dove event è di tipo Event e ui è di tipo Object e rappresenta la voce di menu attualmente attiva.

Syntax

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

Esempio

L'esempio seguente mostra l'utilizzo del metodo dell'evento per la funzionalità del widget del menu. Questo esempio dimostra l'uso di eventi create , blur e 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>

Salviamo il codice sopra in un file HTML menuexample.htm e aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output:

Nell'esempio precedente, stampiamo i messaggi in base agli eventi attivati.