JqueryUI - Accordion

Accordion Widget trong jQueryUI là trình chứa nội dung có thể mở rộng và thu gọn dựa trên jQuery được chia thành nhiều phần và có thể trông giống như các tab. jQueryUI cung cấp phương thức accordion () để đạt được điều này.

Cú pháp

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

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

  • $ (bộ chọn, ngữ cảnh) .accordion ("action", params) Phương thức

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

Phương thức accordion (options) 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ý như các menu accordion. 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 đơn liên quan.

Cú pháp

$(selector, context).accordion (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).accordion({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 hoạt động

Cho biết chỉ mục của menu được mở khi trang được truy cập lần đầu tiên. Theo mặc định, giá trị của nó là0, tức là menu đầu tiên.

Option - active

Cho biết chỉ mục của menu được mở khi trang được truy cập lần đầu tiên. Theo mặc định, giá trị của nó là0, tức là menu đầu tiên.

Điều này có thể thuộc loại -

  • Boolean- Nếu đặt thành false sẽ thu gọn tất cả các bảng. Điều này yêu cầu tùy chọn thu gọn phải đúng .

  • Integer- Chỉ số dựa trên 0 của bảng đang hoạt động (mở). Giá trị âm sẽ chọn các bảng đi lùi từ bảng cuối cùng.

Syntax

$( ".selector" ).accordion(
   { active: 2 }
);
2 hoạt hình

Tùy chọn này được sử dụng để đặt cách tạo hiệu ứng cho các bảng thay đổi. Theo mặc định, giá trị của nó là{}.

Option - animate

Tùy chọn này được sử dụng để đặt cách tạo hiệu ứng cho các bảng thay đổi. Theo mặc định, giá trị của nó là{}.

Điều này có thể thuộc loại -

  • Boolean- Giá trị false sẽ vô hiệu hóa hoạt ảnh.

  • Number - Đây là thời lượng tính bằng mili giây

  • String - Tên của thời hạn sử dụng với thời lượng mặc định.

  • Object - Cài đặt hoạt ảnh với các thuộc tính tốc độ và thời lượng.

Syntax

$( ".selector" ).accordion(
   { animate: "bounceslide" }
);
3 có thể thu gọn

Tùy chọn này khi được đặt thành true , nó cho phép người dùng đóng menu bằng cách nhấp vào nó. Theo mặc định, các nhấp chuột vào tiêu đề của bảng điều khiển mở không có tác dụng. Theo mặc định, giá trị của nó làfalse.

Option - collapsible

Tùy chọn này khi được đặt thành true , nó cho phép người dùng đóng menu bằng cách nhấp vào nó. Theo mặc định, các nhấp chuột vào tiêu đề của bảng điều khiển mở không có tác dụng. Theo mặc định, giá trị của nó làfalse.

Syntax

$( ".selector" ).accordion(
   { collapsible: true }
);
4 tàn tật

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

Option - disabled

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

Syntax

$( ".selector" ).accordion(
   { disabled: true }
);
5 biến cố

Tùy chọn này chỉ định sự kiện được sử dụng để chọn một tiêu đề đàn accordion. Theo mặc định, giá trị của nó làclick.

Option - event

Tùy chọn này chỉ định sự kiện được sử dụng để chọn một tiêu đề đàn accordion. Theo mặc định, giá trị của nó làclick.

Syntax

$( ".selector" ).accordion(
   { event: "mouseover" }
);
6 tiêu đề

Tùy chọn này chỉ định một bộ chọn hoặc phần tử để ghi đè mẫu mặc định để xác định các phần tử tiêu đề. Theo mặc định, giá trị của nó là> li > :first-child,> :not(li):even.

Option - header

Tùy chọn này chỉ định một bộ chọn hoặc phần tử để ghi đè mẫu mặc định để xác định các phần tử tiêu đề. Theo mặc định, giá trị của nó là> li > :first-child,> :not(li):even.

Syntax

$( ".selector" ).accordion(
   { header: "h3" }
);
7 chiều cao

Tùy chọn này được sử dụng để kiểm soát chiều cao của đàn accordion và các tấm. Theo mặc định, giá trị của nó làauto.

Option - heightStyle

Tùy chọn này được sử dụng để kiểm soát chiều cao của đàn accordion và các tấm. Theo mặc định, giá trị của nó làauto.

Giá trị có thể là -

  • auto - Tất cả các bảng sẽ được đặt bằng chiều cao của bảng cao nhất.

  • fill - Mở rộng đến chiều cao có sẵn dựa trên chiều cao mẹ của đàn accordion.

  • content - Mỗi bảng điều khiển sẽ chỉ cao bằng nội dung của nó.

Syntax

$( ".selector" ).accordion(
   { heightStyle: "fill" }
);
số 8 biểu tượng

Tùy chọn này là một đối tượng xác định các biểu tượng để sử dụng ở bên trái của văn bản tiêu đề cho các bảng mở và đóng. Biểu tượng để sử dụng cho các bảng đóng được chỉ định dưới dạng thuộc tính có tên là tiêu đề , trong khi biểu tượng để sử dụng cho các bảng mở được chỉ định là thuộc tính có tên headerSelected . Theo mặc định, giá trị của nó là{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }.

Option - icons

Tùy chọn này là một đối tượng xác định các biểu tượng để sử dụng ở bên trái của văn bản tiêu đề cho các bảng mở và đóng. Biểu tượng để sử dụng cho các bảng đóng được chỉ định dưới dạng thuộc tính có tên là tiêu đề , trong khi biểu tượng để sử dụng cho các bảng mở được chỉ định là thuộc tính có tên headerSelected . Theo mặc định, giá trị của nó là{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }.

Syntax

$( ".selector" ).accordion(
   { icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } }
);

Phần sau đây sẽ cho bạn thấy một vài ví dụ hoạt động của chức năng tiện ích đàn accordion.

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 accordion, không truyền tham số nào cho accordion() phương pháp.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </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() {
            $( "#accordion-1" ).accordion();
         });
      </script>
      
      <style>
         #accordion-1{font-size: 14px;}
      </style>
   </head>

   <body>
      <div id = "accordion-1">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco 
               laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco 
               laboris nisi ut aliquip ex ea commodo consequat.     
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco 
               laboris nisi ut aliquip ex ea commodo consequat.     
            </p>
         </div>
      </div>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML accordionexample.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ả -

Nhấp vào tiêu đề (Tab 1, Tab 2, Tab 3) để mở rộng / thu gọn nội dung được chia thành các phần hợp lý, giống như tab.

Sử dụng có thể thu gọn

Ví dụ sau minh họa việc sử dụng ba tùy chọn collapsible trong tiện ích đàn accordion của JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </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() {
            $( "#accordion-2" ).accordion({
               collapsible: true
            });
         });
      </script>
      
      <style>
         #accordion-2{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <div id = "accordion-2">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat.      
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat.      
            </p>
            <ul>
               <li>List item one</li>
               <li>List item two</li>
               <li>List item three</li>
            </ul>
         </div>
      </div>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML accordionexample.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ả -

Ở đây chúng tôi đã đặt có thể thu gọn thành true . Nhấp vào tiêu đề đàn accordion, điều này cho phép thu gọn phần đang hoạt động.

Sử dụng chiều cao

Ví dụ sau minh họa việc sử dụng ba tùy chọn heightStyle trong tiện ích đàn accordion của JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </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() {
            $( "#accordion-3" ).accordion({
               heightStyle: "content"
            });
            $( "#accordion-4" ).accordion({
               heightStyle: "fill"
            });
         });
      </script>
      
      <style>
         #accordion-3, #accordion-4{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <h3>Height style-content</h3>
      <div style = "height:250px">
         <div id = "accordion-3">
            <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua.
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
                  <li>List item four</li>
                  <li>List item five</li>
               </ul>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua.
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua. 
               </p>
            </div>
         </div>
      </div><br><br>
      
      <h3>Height style-Fill</h3>
      <div style = "height:250px">
         <div id = "accordion-4">
            <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua.
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
                  <li>List item four</li>
                  <li>List item five</li>
               </ul>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua.
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua. 
               </p>
            </div>
         </div>
      </div>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML accordionexample.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ả -

Ở đây chúng ta có hai đàn accordion, cái đầu tiên có tùy chọn heightStyle được đặt thành nội dung , cho phép các tấm đàn accordion giữ nguyên chiều cao của chúng. Đàn accordion thứ hai có tùy chọn heightStyle được đặt để lấp đầy , tập lệnh sẽ tự động đặt kích thước của đàn accordion bằng chiều cao của thùng chứa mẹ của nó.

$ (bộ chọn, ngữ cảnh) .accordion ("action", params) Phương thức

Phương thức accordion ("action", params) có thể thực hiện một hành động trên các phần tử của đàn accordion, chẳng hạn như chọn / bỏ chọn menu accordion. 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" vô hiệu hóa tất cả các menu). Kiểm tra các hành động có thể được thông qua, trong bảng sau.

Cú pháp

$(selector, context).accordion ("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 phá hủy hoàn toàn chức năng đàn accordion của một phần tử. Các phần tử trở lại trạng thái pre-init của chúng.

Action - destroy

Hành động này phá hủy hoàn toàn chức năng đàn accordion của một phần tử. Các phần tử trở lại trạng thái pre-init của chúng.

Syntax

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

Hành động này vô hiệu hóa tất cả các menu. Không có nhấp chuột sẽ được tính đến. 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 tất cả các menu. Không có nhấp chuột sẽ được tính đến. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").accordion("disable");
3 kích hoạt

Hành động này kích hoạt lại tất cả các menu. Các nhấp chuột lại được xem xé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 lại tất cả các menu. Các nhấp chuột lại được xem xét. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").accordion("enable");
4 option (optionName)

Hành động này nhận giá trị của phần tử accordion hiện được liên kết với optionName được chỉ định . Điều này nhận một giá trị Chuỗi làm đối số.

Action - option( optionName )

Hành động này nhận giá trị của phần tử accordion hiện được liên kết với optionName được chỉ định . Điều này nhận một giá trị Chuỗi làm đối số.

Syntax

var isDisabled = $( ".selector" ).accordion( "option", "disabled" );
5 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 accordion 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 accordion hiện tại.

Syntax

var options = $( ".selector" ).accordion( "option" );
6 option (optionName, value)

Hành động này đặt giá trị của tùy chọn accordion được liên kết với optionName được chỉ định.

Action - option( optionName, value )

Hành động này đặt giá trị của tùy chọn accordion được liên kết với optionName được chỉ định.

Syntax

$( ".selector" ).accordion( "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 accordion.

Action - option( options )

Hành động này đặt một hoặc nhiều tùy chọn cho đàn accordion. Trong đó các tùy chọn là một bản đồ của các cặp giá trị tùy chọn cần đặt.

Syntax

$( ".selector" ).accordion( "option", { disabled: true } );
số 8 Làm tươi

Hành động này xử lý mọi tiêu đề và bảng điều khiển đã được thêm vào hoặc xóa trực tiếp trong DOM. Sau đó, nó tính toán lại chiều cao của các tấm đàn accordion. Kết quả phụ thuộc vào nội dung và tùy chọn heightStyle. 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 xử lý mọi tiêu đề và bảng điều khiển đã được thêm vào hoặc xóa trực tiếp trong DOM. Sau đó, nó tính toán lại chiều cao của các tấm đàn accordion. Kết quả phụ thuộc vào nội dung và tùy chọn heightStyle. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").accordion("refresh");
9 phụ tùng

Hành động này trả về phần tử widget accordion; cái được chú thích bằng tên lớp ui-accordion .

Action - widget

Hành động này trả về phần tử widget accordion; cái được chú thích bằng tên lớp ui-accordion .

Syntax

var widget = $( ".selector" ).accordion( "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 phương thức option (optionName, value) .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </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() {
            $( "#accordion-5" ).accordion({
               disabled: false
            });
            $("input").each(function () {
               $(this).change(function () {
                  if ($(this).attr("id") == "disableaccordion") {
                     $("#accordion-5").accordion("option", "disabled", true);
                  } else {
                     $("#accordion-5").accordion("option", "disabled", false);
                  }
               });
            });
         });
      </script>
      
      <style>
         #accordion-5{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <div id = "accordion-5">
         <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud 
                  exercitation ullamco laboris nisi ut aliquip ex ea 
                  commodo consequat. 
               </p>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud 
                  exercitation ullamco laboris nisi ut aliquip ex ea 
                  commodo consequat.      
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud 
                  exercitation ullamco laboris nisi ut aliquip ex ea 
                  commodo consequat.      
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
               </ul>
            </div>
         </div>
         <div style = "margin-top:30px">
            <input type = "radio" name = "disable" id = "disableaccordion"  
               value = "disable">Disable accordion
            <input type = "radio" name = "disable" id = "enableaccordion" checked 
               value = "enable">Enable accordion
         </div>
     </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML accordionexample.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:

Ở đây chúng tôi chứng minh việc kích hoạt và vô hiệu hóa đàn accordion. Chọn các nút radio tương ứng để kiểm tra từng thao tác.

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

Ngoài phương thức accordion (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 kích hoạt (sự kiện, ui)

Sự kiện này được kích hoạt khi một menu được kích hoạt. Sự kiện này chỉ được kích hoạt khi kích hoạt bảng điều khiển, nó không được kích hoạt cho bảng điều khiển ban đầu khi tiện ích đàn accordion được tạo.

Event - activate(event, ui)

Sự kiện này được kích hoạt khi một menu được kích hoạt. Sự kiện này chỉ được kích hoạt khi kích hoạt bảng điều khiển, nó không được kích hoạt cho bảng điều khiển ban đầu khi tiện ích đàn accordion được tạo. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • newHeader - Một đối tượng jQuery đại diện cho tiêu đề vừa được kích hoạt.

  • oldHeader - Một đối tượng jQuery đại diện cho tiêu đề vừa bị hủy kích hoạt.

  • newPanel - Một đối tượng jQuery đại diện cho bảng điều khiển vừa được kích hoạt.

  • oldPanel - Một đối tượng jQuery đại diện cho bảng điều khiển vừa được hủy kích hoạt.

Syntax

$( ".selector" ).accordion({
   activate: function( event, ui ) {}
});
2 beforeActivate (sự kiện, ui)

Sự kiện này được kích hoạt trước khi một bảng được kích hoạt. Sự kiện này có thể bị hủy để ngăn kích hoạt bảng điều khiển.

Event - beforeActivate(event, ui)

Sự kiện này được kích hoạt trước khi một bảng được kích hoạt. Sự kiện này có thể bị hủy để ngăn kích hoạt bảng điều khiển. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • newHeader - Một đối tượng jQuery đại diện cho tiêu đề sắp được kích hoạt.

  • oldHeader - Một đối tượng jQuery đại diện cho tiêu đề sắp bị hủy kích hoạt.

  • newPanel - Một đối tượng jQuery đại diện cho bảng điều khiển sắp được kích hoạt.

  • oldPanel - Một đối tượng jQuery đại diện cho bảng điều khiển sắp bị hủy kích hoạt.

Syntax

$( ".selector" ).accordion({
   beforeActivate: function( event, ui ) {}
});
3 tạo (sự kiện, ui)

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

Event - create(event, ui)

Sự kiện này được kích hoạt khi đàn accordion được tạo. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • header - Một đối tượng jQuery đại diện cho tiêu đề hoạt động.

  • panel - Một đối tượng jQuery đại diện cho bảng hoạt động.

Syntax

$( ".selector" ).accordion({
   create: function( event, ui ) {}
});

Thí dụ

Ví dụ sau minh họa cách sử dụng phương thức sự kiện trong các vật dụng đàn accordion. Ví dụ này minh họa việc sử dụng các sự kiện được tạo , beforeActive và active .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </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() {
            $( "#accordion-6" ).accordion({
               create: function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     "<b>Created</b><br>");
               },
					
               beforeActivate : function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     ", <b>beforeActivate</b><br>");
               },
					
               activate: function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     "<b>activate</b><br>");
               }
            });
         });
      </script>
      
      <style>
         #accordion-6{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <div id = "accordion-6">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore 
               magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea 
               commodo consequat. 
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore 
               magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea 
               commodo consequat.    
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore 
               magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea 
               commodo consequat.    
            </p>
            <ul>
               <li>List item one</li>
               <li>List item two</li>
               <li>List item three</li>
            </ul>
         </div>
      </div>
      <hr />
      <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 accordionexample.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:

Ở đây chúng tôi đang hiển thị một văn bản ở dưới cùng, dựa trên các sự kiện.

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