1. Home
  2. Tutorials

JqueryUI - Menu

Widżet menu zwykle składa się z głównego paska menu z wyskakującymi menu. Elementy w wyskakujących menu często mają podrzędne menu podręczne. Menu można utworzyć przy użyciu elementów znaczników, o ile zachowana jest relacja rodzic-dziecko (za pomocą <ul> lub <ol>). Każda pozycja menu ma element zakotwiczenia.

Widget Menu w jQueryUI może być używany do tworzenia menu podręcznych i menu podręcznych lub jako podstawa do tworzenia bardziej złożonych systemów menu. Na przykład można tworzyć zagnieżdżone menu z niestandardowym pozycjonowaniem.

jQueryUI udostępnia metody menu () do tworzenia menu.

Składnia

Plik menu() metoda może być stosowana w dwóch formach -

$ (selektor, kontekst). menu (opcje) Metoda

Metoda menu (opcje) deklaruje, że element HTML i jego zawartość powinny być traktowane i zarządzane jak menu. Te opcje parametr jest obiektem, który określa wygląd i zachowanie pozycji menu zaangażowanych.

Składnia

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

Możesz podać jedną lub więcej opcji naraz, używając obiektu JavaScript. Jeśli ma zostać podanych więcej niż jedna opcja, oddziel je przecinkiem w następujący sposób -

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

W poniższej tabeli wymieniono różne opcje , których można użyć z tą metodą -

Sr.No. Opcja i opis
1 wyłączone

Ta opcja, jeśli jest ustawiona na true, wyłącza menu. Domyślnie jego wartość tofalse.

Option - disabled

Ta opcja, jeśli jest ustawiona na true, wyłącza menu. Domyślnie jego wartość tofalse.

Syntax

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

Ta opcja ustawia ikony podmenu. Domyślnie jego wartość to{ submenu: "ui-icon-carat-1-e" }.

Option - icons

Ta opcja ustawia ikony podmenu. Domyślnie jego wartość to{ submenu: "ui-icon-carat-1-e" }.

Syntax

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

Ta opcja to selektor elementów służących jako kontener menu, w tym podmenu. Domyślnie jego wartość toul.

Option - menus

Ta opcja to selektor elementów służących jako kontener menu, w tym podmenu. Domyślnie jego wartość toul.

Syntax

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

Ta opcja ustawia pozycję podmenu w stosunku do powiązanego nadrzędnego elementu menu. Domyślnie jego wartość to{ my: "left top", at: "right top" }.

Option - position

Ta opcja ustawia pozycję podmenu w stosunku do powiązanego nadrzędnego elementu menu. Domyślnie jego wartość to{ my: "left top", at: "right top" }.

Syntax

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

Ta opcja służy do dostosowywania ról ARIA używanych dla menu i elementów menu. Domyślnie jego wartość tomenu.

Option - role

Ta opcja służy do dostosowywania ról ARIA używanych dla menu i elementów menu. Domyślnie jego wartość tomenu.

W ramach inicjatywy Web Accessibility Initiative (WAI), Accessible Rich Internet Applications Suite (ARIA), definiuje sposób zwiększania dostępności treści i aplikacji internetowych. Służy do poprawy dostępności dynamicznej zawartości i zaawansowanych elementów sterujących interfejsu użytkownika opracowanych przy użyciu technologii Ajax, HTML, JavaScript i pokrewnych. Więcej na ten temat można przeczytać pod adresem: ARIA

Syntax

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

Domyślna funkcjonalność

Poniższy przykład ilustruje prosty przykład funkcji widgetu menu, nie przekazując żadnych parametrów do menu() metoda.

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

Zapiszmy powyższy kod w pliku HTML menuexample.htmi otwórz go w standardowej przeglądarce obsługującej javascript, musisz również zobaczyć następujące dane wyjściowe. Teraz możesz grać z wynikiem -

W powyższym przykładzie możesz zobaczyć menu z możliwością tworzenia motywów, zawierające interakcje myszy i klawiatury do nawigacji.

Stosowanie ikon i pozycji

Poniższy przykład ilustruje użycie dwóch opcji icons, i position w funkcji menu 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>

Zapiszmy powyższy kod w pliku HTML menuexample.htmi otwórz go w standardowej przeglądarce obsługującej javascript, musisz również zobaczyć następujące dane wyjściowe. Teraz możesz grać z wynikiem -

W powyższym przykładzie widać, że zastosowaliśmy obraz ikony dla listy podmenu, a także zmieniliśmy pozycję podmenu.

$ (selektor, kontekst) .menu ("akcja", parametry) Metoda

Metoda menu („akcja”, params) może wykonywać działania na elementach menu, takie jak włączanie / wyłączanie menu. Akcja jest określana jako łańcuch w pierwszym argumencie (np. „Disable” wyłącza menu). Zapoznaj się z czynnościami, które można wykonać, w poniższej tabeli.

Składnia

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

W poniższej tabeli wymieniono różne akcje , których można użyć z tą metodą -

Sr.No. Działanie i opis
1 rozmycie ([wydarzenie])

Ta akcja usuwa fokus z menu. Uruchamia zdarzenie rozmycia menu, resetując dowolny aktywny styl elementu. Gdzie wydarzenie jest typoweEvent i reprezentuje to, co spowodowało rozmycie menu.

Action - blur( [event ] )

Ta akcja usuwa fokus z menu. Uruchamia zdarzenie rozmycia menu, resetując dowolny aktywny styl elementu. Gdzie wydarzenie jest typoweEvent i reprezentuje to, co spowodowało rozmycie menu.

Syntax

$(".selector").menu( "blur" );
2 collapse ([wydarzenie])

Ta czynność zamyka aktualnie aktywne podmenu. Gdzie wydarzenie jest typoweEvent i reprezentuje to, co spowodowało zwinięcie menu.

Action - collapse( [event ] )

Ta czynność zamyka aktualnie aktywne podmenu. Gdzie wydarzenie jest typoweEvent i reprezentuje to, co spowodowało zwinięcie menu.

Syntax

$(".selector").menu( "collapse" );
3 collapseAll ([zdarzenie] [, wszystko])

Ta czynność zamyka wszystkie otwarte podmenu.

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

Ta czynność zamyka wszystkie otwarte podmenu. Gdzie -

  • zdarzenie jest typuEvent i reprezentuje to, co spowodowało upadek menu

  • wszystko jest typuBoolean Wskazuje, czy wszystkie podmenu powinny być zamknięte, czy tylko podmenu poniżej, w tym menu, które jest celem zdarzenia wyzwalającego lub je zawiera.

Syntax

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

Ta akcja całkowicie usuwa funkcjonalność menu. Spowoduje to przywrócenie elementu do stanu sprzed inicjalizacji. Ta metoda nie przyjmuje żadnych argumentów.

Action - destroy()

Ta akcja całkowicie usuwa funkcjonalność menu. Spowoduje to przywrócenie elementu do stanu sprzed inicjalizacji. Ta metoda nie przyjmuje żadnych argumentów.

Syntax

$(".selector").menu( "destroy" );
5 wyłączyć()

Ta czynność wyłącza menu. Ta metoda nie przyjmuje żadnych argumentów.

Action - disable()

Ta czynność wyłącza menu. Ta metoda nie przyjmuje żadnych argumentów.

Syntax

$(".selector").menu( "disable" );
6 włączyć()

Ta akcja włącza menu. Ta metoda nie przyjmuje żadnych argumentów.

Action - enable()

Ta akcja włącza menu. Ta metoda nie przyjmuje żadnych argumentów.

Syntax

$(".selector").menu( "enable" );
7 expand ([wydarzenie])

Ta czynność otwiera podmenu poniżej aktualnie aktywnego elementu, jeśli takie istnieje. Gdzie wydarzenie jest typoweEvent i reprezentuje to, co spowodowało rozwinięcie menu.

Action - expand( [event ] )

Ta czynność otwiera podmenu poniżej aktualnie aktywnego elementu, jeśli takie istnieje. Gdzie wydarzenie jest typoweEvent i reprezentuje to, co spowodowało rozwinięcie menu.

Syntax

$(".selector").menu( "expand" );
8 focus ([wydarzenie], element)

Ta akcja aktywuje określoną pozycję menu, rozpoczyna otwieranie dowolnego podmenu, jeśli jest dostępne, i wyzwala zdarzenie aktywności menu. Gdzie wydarzenie jest typoweEventi reprezentuje to, co spowodowało, że menu nabrało ostrości. a pozycja jest obiektem jQuery reprezentującym pozycję menu, która ma zostać aktywowana / aktywowana.

Action - focus( [event ], item )

Ta akcja aktywuje określoną pozycję menu, rozpoczyna otwieranie dowolnego podmenu, jeśli jest dostępne, i wyzwala zdarzenie aktywności menu. Gdzie wydarzenie jest typoweEventi reprezentuje to, co spowodowało, że menu nabrało ostrości. a pozycja jest obiektem jQuery reprezentującym pozycję menu, która ma zostać aktywowana / aktywowana.

Syntax

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

Ta akcja zwraca wartość logiczną , która określa, czy bieżąca aktywna pozycja menu jest pierwszą pozycją menu. Ta metoda nie przyjmuje żadnych argumentów.

Action - isFirstItem()

Ta akcja zwraca wartość logiczną , która określa, czy bieżąca aktywna pozycja menu jest pierwszą pozycją menu. Ta metoda nie przyjmuje żadnych argumentów.

Syntax

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

Ta akcja zwraca wartość logiczną , która określa, czy bieżąca aktywna pozycja menu jest ostatnią pozycją menu. Ta metoda nie przyjmuje żadnych argumentów.

Action - isLastItem()

Ta akcja zwraca wartość logiczną , która określa, czy bieżąca aktywna pozycja menu jest ostatnią pozycją menu. Ta metoda nie przyjmuje żadnych argumentów.

Syntax

$(".selector").menu( "isLastItem" );
11 następne wydarzenie ] )

Ta akcja deleguje stan aktywny do następnej pozycji menu. Gdzie wydarzenie jest typoweEvent i reprezentuje to, co wywołało ruch skupienia.

Action - next( [event ] )

Ta akcja deleguje stan aktywny do następnej pozycji menu. Gdzie wydarzenie jest typoweEvent i reprezentuje to, co wywołało ruch skupienia.

Syntax

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

Ta akcja przenosi stan aktywny do pierwszej pozycji menu poniżej dolnej części menu przewijalnego lub do ostatniej pozycji, jeśli nie można jej przewijać. Gdzie wydarzenie jest typoweEvent i reprezentuje to, co wywołało ruch skupienia.

Action - nextPage( [event ] )

Ta akcja przenosi stan aktywny do pierwszej pozycji menu poniżej dolnej części menu przewijalnego lub do ostatniej pozycji, jeśli nie można jej przewijać. Gdzie wydarzenie jest typoweEvent i reprezentuje to, co wywołało ruch skupienia.

Syntax

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

Ta akcja pobiera wartość aktualnie skojarzoną z określoną optionName . Gdzie nazwa_opcji jest typuString i reprezentuje nazwę opcji do pobrania.

Action - option( optionName )

Ta akcja pobiera wartość aktualnie skojarzoną z określoną optionName . Gdzie nazwa_opcji jest typuString i reprezentuje nazwę opcji do pobrania.

Syntax

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

Ta akcja pobiera obiekt zawierający pary klucz / wartość reprezentujące hash bieżących opcji menu.

Action - option()

Ta akcja pobiera obiekt zawierający pary klucz / wartość reprezentujące hash bieżących opcji menu.

Syntax

var options = $( ".selector" ).menu( "option" );
15 opcja (nazwa_opcji, wartość)

Ta akcja ustawia wartość opcji menu skojarzonej z określoną opcją nazwa_opcji. Gdzie nazwa_opcji jest typuStringi reprezentuje nazwę opcji do ustawienia, a wartość jest typu Object i reprezentuje wartość do ustawienia dla opcji.

Action - option( optionName, value )

Ta akcja ustawia wartość opcji menu skojarzonej z określoną opcją nazwa_opcji. Gdzie nazwa_opcji jest typuStringi reprezentuje nazwę opcji do ustawienia, a wartość jest typu Object i reprezentuje wartość do ustawienia dla opcji.

Syntax

$(".selector").menu( "option", "disabled", true );
16 opcja (opcje)

Ta akcja ustawia jedną lub więcej opcji menu. Gdzie opcje są typoweObject i reprezentuje mapę par opcja-wartość do ustawienia.

Action - option( options )

Ta akcja ustawia jedną lub więcej opcji menu. Gdzie opcje są typoweObject i reprezentuje mapę par opcja-wartość do ustawienia.

Syntax

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

Ta czynność przenosi stan aktywny do poprzedniej pozycji menu. Gdzie wydarzenie jest typoweEvent i reprezentuje to, co wywołało ruch skupienia.

Action - previous( [event ] )

Ta czynność przenosi stan aktywny do poprzedniej pozycji menu. Gdzie wydarzenie jest typoweEvent i reprezentuje to, co wywołało ruch skupienia.

Syntax

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

Ta akcja przenosi stan aktywny do pierwszej pozycji menu powyżej górnej części menu przewijalnego lub do pierwszej pozycji, jeśli nie można jej przewijać. Gdzie wydarzenie jest typoweEvent i reprezentuje to, co wywołało ruch skupienia.

Action - previousPage( [event ] )

Ta akcja przenosi stan aktywny do pierwszej pozycji menu powyżej górnej części menu przewijalnego lub do pierwszej pozycji, jeśli nie można jej przewijać. Gdzie wydarzenie jest typoweEvent i reprezentuje to, co wywołało ruch skupienia.

Syntax

$(".selector").menu( "previousPage" );
19 odświeżać()

Ta akcja inicjuje podmenu i elementy menu, które nie zostały jeszcze zainicjowane. Ta metoda nie przyjmuje żadnych argumentów.

Action - refresh()

Ta akcja inicjuje podmenu i elementy menu, które nie zostały jeszcze zainicjowane. Ta metoda nie przyjmuje żadnych argumentów.

Syntax

$(".selector").menu( "refresh" );
20 wybierz ([wydarzenie])

Ta akcja powoduje zaznaczenie aktualnie aktywnej pozycji menu, zwinięcie wszystkich podmenu i wyzwolenie zdarzenia wyboru menu. Gdzie wydarzenie jest typoweEvent i reprezentuje, co spowodowało wybór.

Action - select( [event ] )

Ta akcja powoduje zaznaczenie aktualnie aktywnej pozycji menu, zwinięcie wszystkich podmenu i wyzwolenie zdarzenia wyboru menu. Gdzie wydarzenie jest typoweEvent i reprezentuje, co spowodowało wybór.

Syntax

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

Ta akcja zwraca obiekt jQuery zawierający menu. Ta metoda nie przyjmuje żadnych argumentów.

Action - widget()

Ta akcja zwraca obiekt jQuery zawierający menu. Ta metoda nie przyjmuje żadnych argumentów.

Syntax

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

Poniższe przykłady pokazują, jak korzystać z działań podanych w powyższej tabeli.

Stosowanie metody wyłączania

Poniższy przykład demonstruje użycie metody 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>

Zapiszmy powyższy kod w pliku HTML menuexample.htm i otwórz go w standardowej przeglądarce obsługującej javascript, musisz również zobaczyć następujące dane wyjściowe -

W powyższym przykładzie widać, że menu jest wyłączone.

Korzystanie z metody focus i collapseAll

Poniższy przykład ilustruje użycie metod focus () i 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>

Zapiszmy powyższy kod w pliku HTML menuexample.htm i otwórz go w standardowej przeglądarce obsługującej javascript, musisz również zobaczyć następujące dane wyjściowe -

W powyższym przykładzie widać, że fokus znajduje się na ostatniej pozycji menu. Teraz rozwiń podmenu, a gdy mysz opuści podmenu, podmenu zostanie zamknięte.

Zarządzanie zdarzeniami w elementach menu

Oprócz metody menu (opcje), którą widzieliśmy w poprzednich sekcjach, JqueryUI udostępnia metody zdarzeń, które są wyzwalane dla określonego zdarzenia. Te metody zdarzeń są wymienione poniżej -

Sr.No. Metoda i opis wydarzenia
1 blur (zdarzenie, ui)

To zdarzenie jest wyzwalane, gdy menu traci fokus.

Event - blur(event, ui)

To zdarzenie jest wyzwalane, gdy menu traci fokus. Gdzie zdarzenie jest typu Zdarzenie , a interfejs użytkownika jest typu Obiekt i reprezentuje aktualnie aktywną pozycję menu.

Syntax

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

To zdarzenie jest wyzwalane podczas tworzenia menu.

Event - create(event, ui)

To zdarzenie jest wyzwalane podczas tworzenia menu. Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object .

Syntax

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

To zdarzenie jest wyzwalane, gdy menu staje się aktywne lub gdy aktywowany jest dowolny element menu.

Event - focus(event, ui)

To zdarzenie jest wyzwalane, gdy menu staje się aktywne lub gdy aktywowany jest dowolny element menu. Gdzie zdarzenie jest typu Zdarzenie , a interfejs użytkownika jest typu Obiekt i reprezentuje aktualnie aktywną pozycję menu.

Syntax

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

To zdarzenie jest wyzwalane po wybraniu pozycji menu.

Event - select(event, ui)

To zdarzenie jest wyzwalane po wybraniu pozycji menu. Gdzie zdarzenie jest typu Zdarzenie , a interfejs użytkownika jest typu Obiekt i reprezentuje aktualnie aktywną pozycję menu.

Syntax

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

Przykład

Poniższy przykład ilustruje użycie metody zdarzenia dla funkcji widgetu menu. Ten przykład demonstruje użycie funkcji tworzenia , rozmycia i skupienia zdarzenia .

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

Zapiszmy powyższy kod w pliku HTML menuexample.htm i otwórz go w standardowej przeglądarce obsługującej javascript, musisz również zobaczyć następujące dane wyjściowe -

W powyższym przykładzie drukujemy komunikaty w oparciu o wywołane zdarzenia.

Japanese Spanish German French Thai Portuguese Russian Vietnamese Italian Korean Turkish Indonesian Polish Hindi

Efekty JqueryUI

JqueryUI Interactions

JqueryUI Tutorial

Przydatne zasoby dla JqueryUI

Narzędzia JqueryUI

Widżety JqueryUI

Language

Japanese
Spanish
German
French
Thai
Portuguese
Russian
Vietnamese
Italian
Korean
Turkish
Indonesian
Polish
Hindi