JqueryUI - Menu

Một widget menu thường bao gồm một thanh menu chính với các menu bật lên. Các mục trong menu bật lên thường có menu phụ. Một menu có thể được tạo bằng cách sử dụng các phần tử đánh dấu miễn là mối quan hệ cha-con được duy trì (sử dụng <ul> hoặc <ol>). Mỗi mục menu có một phần tử neo.

Menu Widget trong jQueryUI có thể được sử dụng cho menu nội tuyến và menu bật lên, hoặc làm cơ sở để xây dựng các hệ thống menu phức tạp hơn. Ví dụ: bạn có thể tạo menu lồng nhau với vị trí tùy chỉnh.

jQueryUI cung cấp các phương thức menu () để tạo menu.

Cú pháp

Các menu() phương pháp có thể được sử dụng ở hai dạng:

  • $ (bộ chọn, ngữ cảnh) .menu (tùy chọn) Phương thức

  • $ (selector, ngữ cảnh) .menu ( "hành động", params) Phương pháp

$ (bộ chọn, ngữ cảnh) .menu (tùy chọn) Phương thức

Phương thức menu (tùy chọn) tuyên bố rằng một phần tử HTML và nội dung của nó phải được xử lý và quản lý dưới dạng menu. Các tùy chọn tham số là một đối tượng mà xác định sự xuất hiện và hành vi của các mục trình đơn liên quan.

Cú pháp

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

Bạn có thể cung cấp một hoặc nhiều tùy chọn cùng một lúc bằng cách sử dụng đối tượng Javascript. Nếu có nhiều tùy chọn được cung cấp thì bạn sẽ phân tách chúng bằng dấu phẩy như sau:

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

Bảng sau liệt kê các tùy chọn khác nhau có thể được sử dụng với phương pháp này:

Sr.No. Tùy chọn & Mô tả
1 tàn tật

Tùy chọn này nếu được đặt thành true sẽ vô hiệu hóa menu. Theo mặc định, giá trị của nó làfalse.

Option - disabled

Tùy chọn này nếu được đặt thành true sẽ vô hiệu hóa menu. Theo mặc định, giá trị của nó làfalse.

Syntax

$( ".selector" ).menu (
   { disabled: true }
);
2 biểu tượng

Tùy chọn này đặt các biểu tượng cho menu con. Theo mặc định, giá trị của nó là{ submenu: "ui-icon-carat-1-e" }.

Option - icons

Tùy chọn này đặt các biểu tượng cho menu con. Theo mặc định, giá trị của nó là{ submenu: "ui-icon-carat-1-e" }.

Syntax

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

Tùy chọn này là một bộ chọn cho các phần tử đóng vai trò là vùng chứa menu, bao gồm các menu phụ. Theo mặc định, giá trị của nó làul.

Option - menus

Tùy chọn này là một bộ chọn cho các phần tử đóng vai trò là vùng chứa menu, bao gồm các menu phụ. Theo mặc định, giá trị của nó làul.

Syntax

$( ".selector" ).menu (
   { menus: "div" }
);
4 Chức vụ

Tùy chọn này đặt vị trí của menu con liên quan đến mục menu mẹ được liên kết. Theo mặc định, giá trị của nó là{ my: "left top", at: "right top" }.

Option - position

Tùy chọn này đặt vị trí của menu con liên quan đến mục menu mẹ được liên kết. Theo mặc định, giá trị của nó là{ my: "left top", at: "right top" }.

Syntax

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

Tùy chọn này được sử dụng để tùy chỉnh các vai trò ARIA được sử dụng cho menu và các mục menu. Theo mặc định, giá trị của nó làmenu.

Option - role

Tùy chọn này được sử dụng để tùy chỉnh các vai trò ARIA được sử dụng cho menu và các mục menu. Theo mặc định, giá trị của nó làmenu.

Là một phần của Sáng kiến ​​hỗ trợ truy cập web (WAI), Bộ ứng dụng Internet phong phú có thể truy cập (ARIA), xác định một cách để làm cho nội dung Web và các ứng dụng Web dễ truy cập hơn. Nó được sử dụng để cải thiện khả năng truy cập của nội dung động và các điều khiển giao diện người dùng nâng cao được phát triển bằng Ajax, HTML, JavaScript và các công nghệ liên quan. Bạn có thể đọc thêm về điều này tại: ARIA

Syntax

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

Chức năng mặc định

Ví dụ sau minh họa một ví dụ đơn giản về chức năng tiện ích menu, không chuyển tham số nào cho menu() phương pháp.

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

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML menuexample.htmvà mở nó trong trình duyệt tiêu chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Trong ví dụ trên, bạn có thể thấy một menu có thể chủ đề với các tương tác chuột và bàn phím để điều hướng.

Sử dụng các biểu tượng và vị trí

Ví dụ sau minh họa việc sử dụng hai tùy chọn iconsvà position trong chức năng menu của 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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML menuexample.htmvà mở nó trong trình duyệt tiêu chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Trong ví dụ trên, bạn có thể thấy chúng tôi đã áp dụng hình ảnh biểu tượng cho danh sách menu con và cũng đã thay đổi vị trí menu con.

$ (bộ chọn, ngữ cảnh) .menu ("action", params)

Phương thức menu ("action", params) có thể thực hiện một hành động trên các phần tử menu, chẳng hạn như bật / tắt menu. Hành động được chỉ định dưới dạng một chuỗi trong đối số đầu tiên (ví dụ: "tắt" tắt menu). Kiểm tra các hành động có thể được thông qua, trong bảng sau.

Cú pháp

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

Bảng sau liệt kê các hành động khác nhau có thể được sử dụng với phương pháp này:

Sr.No. Mô tả hành động
1 mờ ([sự kiện])

Hành động này sẽ xóa tiêu điểm khỏi menu. Nó kích hoạt sự kiện mờ của menu bằng cách đặt lại bất kỳ kiểu phần tử đang hoạt động nào. Trường hợp sự kiện thuộc loạiEvent và đại diện cho những gì đã kích hoạt menu làm mờ.

Action - blur( [event ] )

Hành động này sẽ xóa tiêu điểm khỏi menu. Nó kích hoạt sự kiện mờ của menu bằng cách đặt lại bất kỳ kiểu phần tử đang hoạt động nào. Trường hợp sự kiện thuộc loạiEvent và đại diện cho những gì đã kích hoạt menu làm mờ.

Syntax

$(".selector").menu( "blur" );
2 sụp đổ ([sự kiện])

Hành động này đóng menu phụ đang hoạt động hiện tại. Trường hợp sự kiện thuộc loạiEvent và thể hiện điều gì đã kích hoạt menu thu gọn.

Action - collapse( [event ] )

Hành động này đóng menu phụ đang hoạt động hiện tại. Trường hợp sự kiện thuộc loạiEvent và thể hiện điều gì đã kích hoạt menu thu gọn.

Syntax

$(".selector").menu( "collapse" );
3 sậpAll ([sự kiện] [, tất cả])

Hành động này đóng tất cả menu con đang mở.

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

Hành động này đóng tất cả menu con đang mở. Ở đâu -

  • sự kiện thuộc loạiEvent và thể hiện điều gì đã kích hoạt menu thu gọn

  • tất cả đều thuộc loạiBoolean Cho biết liệu tất cả các menu phụ nên được đóng lại hay chỉ các menu phụ bên dưới và bao gồm menu đang hoặc chứa mục tiêu của sự kiện kích hoạt.

Syntax

$(".selector").menu( "collapseAll", null, true );
4 hủy hoại()

Hành động này sẽ loại bỏ hoàn toàn chức năng menu. Thao tác này sẽ đưa phần tử trở lại trạng thái pre-init. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - destroy()

Hành động này sẽ loại bỏ hoàn toàn chức năng menu. Thao tác này sẽ đưa phần tử trở lại trạng thái pre-init. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").menu( "destroy" );
5 vô hiệu hóa()

Hành động này sẽ tắt menu. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - disable()

Hành động này sẽ tắt menu. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").menu( "disable" );
6 cho phép ()

Hành động này sẽ bật menu. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - enable()

Hành động này sẽ bật menu. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").menu( "enable" );
7 mở rộng ([sự kiện])

Hành động này sẽ mở menu phụ bên dưới mục hiện đang hoạt động, nếu có. Trường hợp sự kiện thuộc loạiEvent và thể hiện điều gì đã kích hoạt menu mở rộng.

Action - expand( [event ] )

Hành động này sẽ mở menu phụ bên dưới mục hiện đang hoạt động, nếu có. Trường hợp sự kiện thuộc loạiEvent và thể hiện điều gì đã kích hoạt menu mở rộng.

Syntax

$(".selector").menu( "expand" );
số 8 tiêu điểm ([sự kiện], mục)

Hành động này kích hoạt một mục menu cụ thể, bắt đầu mở bất kỳ menu phụ nào nếu có và kích hoạt sự kiện tiêu điểm của menu. Trường hợp sự kiện thuộc loạiEventvà đại diện cho những gì đã kích hoạt menu để đạt được tiêu điểm. và item là một đối tượng jQuery đại diện cho menu item để tập trung / kích hoạt.

Action - focus( [event ], item )

Hành động này kích hoạt một mục menu cụ thể, bắt đầu mở bất kỳ menu phụ nào nếu có và kích hoạt sự kiện tiêu điểm của menu. Trường hợp sự kiện thuộc loạiEventvà đại diện cho những gì đã kích hoạt menu để đạt được tiêu điểm. và item là một đối tượng jQuery đại diện cho menu item để tập trung / kích hoạt.

Syntax

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

Hành động này trả về một giá trị boolean , giá trị này cho biết mục menu đang hoạt động hiện tại có phải là mục menu đầu tiên hay không. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - isFirstItem()

Hành động này trả về một giá trị boolean , giá trị này cho biết mục menu đang hoạt động hiện tại có phải là mục menu đầu tiên hay không. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

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

Hành động này trả về giá trị boolean , giá trị này cho biết liệu mục menu đang hoạt động hiện tại có phải là mục menu cuối cùng hay không. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - isLastItem()

Hành động này trả về giá trị boolean , giá trị này cho biết liệu mục menu đang hoạt động hiện tại có phải là mục menu cuối cùng hay không. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").menu( "isLastItem" );
11 sự kiện tiếp theo ] )

Hành động này ủy quyền trạng thái hoạt động cho mục menu tiếp theo. Trường hợp sự kiện thuộc loạiEvent và đại diện cho những gì đã kích hoạt tiêu điểm để di chuyển.

Action - next( [event ] )

Hành động này ủy quyền trạng thái hoạt động cho mục menu tiếp theo. Trường hợp sự kiện thuộc loạiEvent và đại diện cho những gì đã kích hoạt tiêu điểm để di chuyển.

Syntax

$(".selector").menu( "next" );
12 nextPage ([sự kiện])

Hành động này sẽ chuyển trạng thái hoạt động sang mục menu đầu tiên bên dưới cuối menu có thể cuộn hoặc mục cuối cùng nếu không cuộn được. Trường hợp sự kiện thuộc loạiEvent và đại diện cho những gì đã kích hoạt tiêu điểm để di chuyển.

Action - nextPage( [event ] )

Hành động này sẽ chuyển trạng thái hoạt động sang mục menu đầu tiên bên dưới cuối menu có thể cuộn hoặc mục cuối cùng nếu không cuộn được. Trường hợp sự kiện thuộc loạiEvent và đại diện cho những gì đã kích hoạt tiêu điểm để di chuyển.

Syntax

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

Hành động này nhận giá trị hiện được liên kết với optionName được chỉ định . Nơi optionName thuộc loạiString và đại diện cho tên của tùy chọn để lấy.

Action - option( optionName )

Hành động này nhận giá trị hiện được liên kết với optionName được chỉ định . Nơi optionName thuộc loạiString và đại diện cho tên của tùy chọn để lấy.

Syntax

var isDisabled = $( ".selector" ).menu( "option", "disabled" );
14 Lựa chọn()

Hành động này nhận một đối tượng chứa các cặp khóa / giá trị đại diện cho băm tùy chọn menu hiện tại.

Action - option()

Hành động này nhận một đối tượng chứa các cặp khóa / giá trị đại diện cho băm tùy chọn menu hiện tại.

Syntax

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

Hành động này đặt giá trị của tùy chọn menu được liên kết với Tên tùy chọn được chỉ định. Nơi optionName thuộc loạiStringvà đại diện cho tên của tùy chọn để đặt và giá trị thuộc loại Đối tượng và đại diện cho giá trị để đặt cho tùy chọn.

Action - option( optionName, value )

Hành động này đặt giá trị của tùy chọn menu được liên kết với Tên tùy chọn được chỉ định. Nơi optionName thuộc loạiStringvà đại diện cho tên của tùy chọn để đặt và giá trị thuộc loại Đối tượng và đại diện cho giá trị để đặt cho tùy chọn.

Syntax

$(".selector").menu( "option", "disabled", true );
16 option (tùy chọn)

Hành động này đặt một hoặc nhiều tùy chọn cho menu. Nơi các tùy chọn thuộc loạiObject và đại diện cho một bản đồ của các cặp tùy chọn-giá trị để đặt.

Action - option( options )

Hành động này đặt một hoặc nhiều tùy chọn cho menu. Nơi các tùy chọn thuộc loạiObject và đại diện cho một bản đồ của các cặp tùy chọn-giá trị để đặt.

Syntax

$(".selector").menu( "option", { disabled: true } );
17 trước ([sự kiện])

Hành động này chuyển trạng thái hoạt động sang mục menu trước đó. Trường hợp sự kiện thuộc loạiEvent và đại diện cho những gì đã kích hoạt tiêu điểm để di chuyển.

Action - previous( [event ] )

Hành động này chuyển trạng thái hoạt động sang mục menu trước đó. Trường hợp sự kiện thuộc loạiEvent và đại diện cho những gì đã kích hoạt tiêu điểm để di chuyển.

Syntax

$(".selector").menu( "previous" );
18 Trang trước ([sự kiện])

Hành động này sẽ chuyển trạng thái hoạt động sang mục menu đầu tiên phía trên đầu menu có thể cuộn hoặc mục đầu tiên nếu không cuộn được. Trường hợp sự kiện thuộc loạiEvent và đại diện cho những gì đã kích hoạt tiêu điểm để di chuyển.

Action - previousPage( [event ] )

Hành động này sẽ chuyển trạng thái hoạt động sang mục menu đầu tiên phía trên đầu menu có thể cuộn hoặc mục đầu tiên nếu không cuộn được. Trường hợp sự kiện thuộc loạiEvent và đại diện cho những gì đã kích hoạt tiêu điểm để di chuyển.

Syntax

$(".selector").menu( "previousPage" );
19 Làm tươi()

Hành động này khởi tạo menu phụ và các mục menu chưa được khởi tạo. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - refresh()

Hành động này khởi tạo menu phụ và các mục menu chưa được khởi tạo. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").menu( "refresh" );
20 chọn ([sự kiện])

Hành động này chọn mục menu hiện đang hoạt động, thu gọn tất cả các menu phụ và kích hoạt sự kiện chọn của menu. Trường hợp sự kiện thuộc loạiEvent và đại diện cho những gì đã kích hoạt lựa chọn.

Action - select( [event ] )

Hành động này chọn mục menu hiện đang hoạt động, thu gọn tất cả các menu phụ và kích hoạt sự kiện chọn của menu. Trường hợp sự kiện thuộc loạiEvent và đại diện cho những gì đã kích hoạt lựa chọn.

Syntax

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

Hành động này trả về một đối tượng jQuery có chứa menu. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - widget()

Hành động này trả về một đối tượng jQuery có chứa menu. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

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

Các ví dụ sau đây trình bày cách sử dụng các hành động được cho trong bảng trên.

Sử dụng phương pháp vô hiệu hóa

Ví dụ sau minh họa việc sử dụng phương thức 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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML menuexample.htm và mở nó trong một trình duyệt tiêu chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau:

Trong ví dụ trên, bạn có thể thấy menu bị tắt.

Sử dụng tiêu điểm và thu gọn

Ví dụ sau minh họa việc sử dụng các phương thức focus () và sậpAll .

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

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML menuexample.htm và mở nó trong một trình duyệt tiêu chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau:

Trong ví dụ trên, bạn có thể thấy tiêu điểm nằm ở mục menu cuối cùng. Bây giờ hãy mở rộng menu con và khi chuột rời menu con, menu con sẽ đóng lại.

Quản lý sự kiện trên các phần tử menu

Ngoài phương thức menu (tùy chọn) mà chúng ta đã thấy trong các phần trước, JqueryUI cung cấp các phương thức sự kiện được kích hoạt cho một sự kiện cụ thể. Các phương thức sự kiện này được liệt kê bên dưới -

Sr.No. Phương pháp & Mô tả Sự kiện
1 mờ (sự kiện, ui)

Sự kiện này được kích hoạt khi menu mất tiêu điểm.

Event - blur(event, ui)

Sự kiện này được kích hoạt khi menu mất tiêu điểm. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng và đại diện cho mục menu hiện đang hoạt động.

Syntax

$( ".selector" ).menu({
   blur: function( event, ui ) {}
});
2 tạo (sự kiện, ui)

Sự kiện này được kích hoạt khi một menu được tạo.

Event - create(event, ui)

Sự kiện này được kích hoạt khi một menu được tạo. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Syntax

$( ".selector" ).menu({
   create: function( event, ui ) {}
});
3 tiêu điểm (sự kiện, ui)

Sự kiện này được kích hoạt khi một menu được lấy tiêu điểm hoặc khi bất kỳ mục nào trong menu được kích hoạt.

Event - focus(event, ui)

Sự kiện này được kích hoạt khi một menu được lấy tiêu điểm hoặc khi bất kỳ mục nào trong menu được kích hoạt. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng và đại diện cho mục menu hiện đang hoạt động.

Syntax

$( ".selector" ).menu({
   focus: function( event, ui ) {}
});
4 chọn (sự kiện, ui)

Sự kiện này được kích hoạt khi một mục menu được chọn.

Event - select(event, ui)

Sự kiện này được kích hoạt khi một mục menu được chọn. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng và đại diện cho mục menu hiện đang hoạt động.

Syntax

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

Thí dụ

Ví dụ sau minh họa việc sử dụng phương thức sự kiện cho chức năng tiện ích menu. Ví dụ này minh họa việc sử dụng tạo sự kiện , làm mờ và lấy nét .

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

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML menuexample.htm và mở nó trong một trình duyệt tiêu chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau:

Trong ví dụ trên, chúng tôi đang in các thông báo dựa trên các sự kiện được kích hoạt.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved