JqueryUI - Nút

jQueryUI cung cấp phương thức button () để chuyển đổi các phần tử HTML (như nút, đầu vào và neo) thành các nút có thể chủ đề, với tính năng quản lý tự động các chuyển động của chuột trên chúng, tất cả đều được quản lý minh bạch bởi jQuery UI.

Để nhóm các nút radio, Button cũng cung cấp một widget bổ sung, được gọi là Buttonset . Buttonset được sử dụng bằng cách chọn một phần tử vùng chứa (chứa các nút radio) và gọi .buttonset () .

Cú pháp

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

$ (bộ chọn, ngữ cảnh) .button (tùy chọn) Phương thức
$ (selector, context) .button ("action", params) Phương thức

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

Phương thức button (options) khai báo rằng một phần tử HTML nên được coi là button. Các tùy chọn tham số là một đối tượng mà quy định cụ thể các hành vi và sự xuất hiện của nút.

Cú pháp

$(selector, context).button (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).button({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 hủy kích hoạt nút được đặt thành true . Theo mặc định, giá trị của nó làfalse. Option - disabled Tùy chọn này hủy kích hoạt nút được đặt thành true . Theo mặc định, giá trị của nó làfalse. Syntax `$( ".selector" ).button({ disabled: true });`
2	biểu tượng Tùy chọn này chỉ định rằng một hoặc hai biểu tượng sẽ được hiển thị trong nút: biểu tượng chính ở bên trái, biểu tượng phụ ở bên phải. Biểu tượng chính được xác định bởi thuộc tính chính của đối tượng và biểu tượng phụ được xác định bởi thuộc tính phụ. Theo mặc định, giá trị của nó làprimary: null, secondary: null. Option - icons Tùy chọn này chỉ định rằng một hoặc hai biểu tượng sẽ được hiển thị trong nút: biểu tượng chính ở bên trái, biểu tượng phụ ở bên phải. Biểu tượng chính được xác định bởi thuộc tính chính của đối tượng và biểu tượng phụ được xác định bởi thuộc tính phụ. Theo mặc định, giá trị của nó làprimary: null, secondary: null. Syntax `$( ".selector" ).button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } });`
3	nhãn Tùy chọn này chỉ định văn bản để hiển thị trên nút ghi đè nhãn tự nhiên. Nếu bỏ qua, nhãn tự nhiên cho phần tử sẽ được hiển thị. Trong trường hợp các nút radio và hộp kiểm, nhãn tự nhiên là phần tử <label> được liên kết với điều khiển. Theo mặc định, giá trị của nó lànull. Option - label Tùy chọn này chỉ định văn bản để hiển thị trên nút ghi đè nhãn tự nhiên. Nếu bỏ qua, nhãn tự nhiên cho phần tử sẽ được hiển thị. Trong trường hợp các nút radio và hộp kiểm, nhãn tự nhiên là phần tử <label> được liên kết với điều khiển. Theo mặc định, giá trị của nó lànull. Syntax `$( ".selector" ).button({ label: "custom label" });`
4	bản văn Tùy chọn này chỉ định xem văn bản có được hiển thị trên nút hay không. Nếu được chỉ định là sai , văn bản sẽ bị chặn nếu (và chỉ khi) tùy chọn biểu tượng chỉ định ít nhất một biểu tượng. Theo mặc định, giá trị của nó làtrue. Option - text Tùy chọn này chỉ định xem văn bản có được hiển thị trên nút hay không. Nếu được chỉ định là sai , văn bản sẽ bị chặn nếu (và chỉ khi) tùy chọn biểu tượng chỉ định ít nhất một biểu tượng. Theo mặc định, giá trị của nó làtrue. Syntax `$( ".selector" ).button({ text: false });`

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 nút, không chuyển tham số nào cho button() phương pháp.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons 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>
      
      <script>
         $(function() {
            $( "#button-1, #button-2, #button-3, #button-4" ).button();
            $( "#button-5" ).buttonset();
         });
      </script>
   </head>
   
   <body>
      <button id = "button-1">A button element</button>
      <input id = "button-2" type = "submit" value = "A submit button">
      <a id = "button-3" href = "">An anchor</a>
      <input type = "checkbox"  id = "button-4" >
      <label for = "button-4">Toggle</label>
      <br><br>
      <div id = "button-5">
         <input type = "checkbox" id = "check1">
         <label for = "check1">Left</label>
         <input type = "checkbox" id = "check2">
         <label for = "check2">Middle</label>
         <input type = "checkbox" id = "check3">
         <label for = "check3">Right</label>
      </div>
   </body>
</html>

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

Ví dụ này minh họa đánh dấu có thể được sử dụng cho các nút: Một phần tử nút, một đầu vào của loại gửi và một liên kết.

Sử dụng các biểu tượng, văn bản và bị tắt

Ví dụ sau minh họa việc sử dụng hai tùy chọn icons, text và disabled trong chức năng nút của JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons 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>
      
      <script>
         $(function() {
            $( "#button-6" ).button({
               icons: {
                  primary: "ui-icon-locked"
               },
               text: false
            });
            $( "#button-7" ).button({
               disabled:true
            });
            $( "#button-8" ).button({
               icons: {
                  primary: "ui-icon-gear",
                  secondary: "ui-icon-triangle-1-s"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <button id = "button-6">
         Button with icon only
      </button>
      <button id = "button-7">
         Button Disabled
      </button>
      <button id = "button-8">
         Button with two icons
      </button>
   </body>
</html>

Tại đây bạn có thể thấy một nút chỉ có biểu tượng, một nút có hai biểu tượng và một nút bị vô hiệu hóa.

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

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

Cú pháp

$(selector, context).button ("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	hủy hoại Hành động này sẽ loại bỏ hoàn toàn chức năng nút của một phần tử. Các phần tử trở về 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 nút của một phần tử. Các phần tử trở về 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" ).button("destroy");`
2	vô hiệu hóa Hành động này vô hiệu hóa chức năng nút của một phần tử. 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 vô hiệu hóa chức năng nút của một phần tử. Phương pháp này không chấp nhận bất kỳ đối số nào. Syntax `$( ".selector" ).button("disable");`
3	kích hoạt Hành động này kích hoạt chức năng nút của một phần tử. 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 kích hoạt chức năng nút của một phần tử. Phương pháp này không chấp nhận bất kỳ đối số nào. Syntax `$( ".selector" ).button("enable");`
4	option (optionName) Hành động này truy xuất giá trị của tùy chọn được chỉ định trong optionName . Trong đó optionName là một chuỗi. Action - option( optionName ) Hành động này truy xuất giá trị của tùy chọn được chỉ định trong optionName . Trong đó optionName là một chuỗi. Syntax `var isDisabled = $( ".selector" ).button( "option", "disabled" );`
5	Lựa chọn Hành động này truy xuất 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 nút hiện tại. Action - option Hành động này truy xuất 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 nút hiện tại. Syntax `$( ".selector" ).button("option");`
6	option (optionName, value) Hành động này đặt giá trị của các tùy chọn nút liên quan đến việc xác định optionName . Action - option( optionName, value ) Hành động này đặt giá trị của các tùy chọn nút liên quan đến việc xác định optionName . Trong đó optionName là tên của tùy chọn để đặt và giá trị là giá trị để đặt cho tùy chọn. Syntax `$( ".selector" ).button( "option", "disabled", true );`
7	option (tùy chọn) Hành động này đặt một hoặc nhiều tùy chọn cho nút. Nơi các tùy chọn là 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 nút. Nơi các tùy chọn là bản đồ của các cặp tùy chọn-giá trị để đặt. Syntax `$( ".selector" ).button( "option", { disabled: true } );`
số 8	Làm tươi Hành động này làm mới màn hình của nút. Điều này hữu ích khi các nút được xử lý bởi chương trình và màn hình hiển thị không nhất thiết phải tương ứng với trạng thái bên trong. 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 làm mới màn hình của nút. Điều này hữu ích khi các nút được xử lý bởi chương trình và màn hình hiển thị không nhất thiết phải tương ứng với trạng thái bên trong. Phương pháp này không chấp nhận bất kỳ đối số nào. Syntax `$( ".selector" ).button("refresh");`
9	phụ tùng Hành động này trả về một đối tượng jQuery có chứa phần tử nút. 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 phần tử nút. Phương pháp này không chấp nhận bất kỳ đối số nào. Syntax `$( ".selector" ).button("widget");`

Thí dụ

Bây giờ chúng ta hãy xem một ví dụ sử dụng các hành động từ bảng trên. Ví dụ sau minh họa việc sử dụng các phương thức hủy () và vô hiệu hóa () .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons 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>
      
      <script>
         $(function() {
            $( "#button-9" ).button({
               text: false,
               icons: {
                  primary: "ui-icon-seek-start"
               }
            });
            $( "#button-9" ).button('destroy');
            $( "#button-10" ).button({
               icons: {
                  primary: "ui-icon-seek-prev"
               }
            });
            $( "#button-10" ).button('disable');
            $( "#button-11" ).button({
               text: false,
               icons: {
                  primary: "ui-icon-play"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <button id = "button-9">
         I'm destroyed
      </button>
      <button id = "button-10">   
         I'm disabled
      </button>
      <button id = "button-11">
         play
      </button>
   </body>
</html>

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

Quản lý sự kiện trên các nút

Ngoài phương thức nút (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	tạo (sự kiện, ui) Sự kiện này được kích hoạt khi nút được tạo. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Event - create(event, ui) Sự kiện này được kích hoạt khi phần tử nút được tạo. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Syntax `$( ".selector" ).button({ create: 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 nút. Ví dụ này minh họa việc sử dụng tạo sự kiện .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons 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>
      
      <style>
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#button-12" ).button({
               create: function() {
                  $("p#result").html ($("p#result")
                  .html () + "<b>created</b><br>");
               }
            });
         });
      </script>
   </head>
   
   <body>
      <button id = "button-12">
         A button element
      </button>
      <p class = "resultarea" id = result></p>
   </body>
</html>

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