MooTools - Accordion

Accordion là plugin phổ biến nhất mà MooTools cung cấp. Nó giúp ẩn và tiết lộ dữ liệu. Hãy để chúng tôi thảo luận thêm về nó.

Tạo đàn accordion mới

Các yếu tố cơ bản mà một đàn accordion yêu cầu là các cặp chuyển đổi và nội dung của chúng. Hãy để chúng tôi tạo các cặp tiêu đề và nội dung của html.

<h3 class = "togglers">Toggle 1</h3>
<p class = "elements">Here is the content of toggle 1</p>
<h3 class = "togglers">Toggle 2</h3>
<p class = "elements">Here is the content of toggle 2</p>

Hãy xem cú pháp sau để hiểu cách tạo đàn accordion dựa trên cấu trúc HTML ở trên.

Cú pháp

var toggles = $$('.togglers');
var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles, content);

Thí dụ

Hãy để chúng tôi lấy một ví dụ xác định chức năng cơ bản của Accordion. Hãy xem đoạn mã sau.

<!DOCTYPE html>
<html>

   <head>
      <style>
         .togglers {
            padding: 4px 8px;
            color: #fff;
            cursor: pointer;
            list-style: none;
            width: 300px;
            background-color: #222;
            border: 1px solid;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var toggles = $$('.togglers');
            var content = $$('.elements');
            var AccordionObject = new Fx.Accordion(toggles, content);
         });
      </script>
   </head>
   
   <body>
      <h3 class = "togglers">Toggle 1</h3>
      <p class = "elements">Here is the content of toggle 1</p>
      <h3 class = "togglers">Toggle 2</h3>
      <p class = "elements">Here is the content of toggle 2</p>
      <h3 class = "togglers">Toggle 3</h3>
      <p class = "elements">Here is the content of toggle 3</p>
   </body>
   
</html>

Bạn sẽ nhận được kết quả sau:

Đầu ra

Tùy chọn Accordion

Accordion cung cấp các tính năng to lớn. Các tính năng này giúp điều chỉnh các tùy chọn để đưa ra đầu ra tùy chỉnh.

trưng bày

Tùy chọn này xác định phần tử nào hiển thị khi tải trang. Giá trị mặc định được đặt thành 0, vì vậy phần tử đầu tiên sẽ hiển thị. Để đặt một phần tử khác, chỉ cần đặt một số nguyên khác tương ứng với chỉ số của nó. Không giống như "hiển thị", hiển thị sẽ chuyển đổi phần tử đang mở.

Syntax

var AccordionObject = new Accordion(toggles, content {
   display: 0 //default is 0
});

chỉ

Giống như “display”, show xác định phần tử nào sẽ mở khi trang tải, nhưng thay vì chuyển đổi, “show” sẽ chỉ hiển thị nội dung khi tải mà không có bất kỳ chuyển đổi nào.

Syntax

var AccordionObject = new Accordion(toggles, content {
   show: 0 //default is 0
});

Chiều cao

Khi được đặt thành true, hiệu ứng chuyển đổi độ cao sẽ diễn ra khi chuyển đổi giữa các phần tử được hiển thị .. Đây là cài đặt đàn accordion tiêu chuẩn mà bạn thấy ở trên.

Syntax

var AccordionObject = new Accordion(toggles, content {
   height: true //default is true
});

chiều rộng

Điều này hoạt động giống như heightLựa chọn. Tuy nhiên, thay vì chuyển đổi chiều cao để hiển thị nội dung, điều này sẽ giúp chuyển đổi chiều rộng. Nếu bạn sử dụng "chiều rộng" với thiết lập tiêu chuẩn, như chúng tôi đã sử dụng ở trên, thì khoảng cách giữa nút chuyển đổi tiêu đề sẽ giữ nguyên, dựa trên chiều cao của nội dung. Sau đó div “nội dung” sẽ chuyển từ trái sang phải để hiển thị trong không gian đó.

Syntax

var AccordionObject = new Accordion(toggles, content {
   width: false //default is false
});

sự mờ đục

Tùy chọn này xác định có hay không hiển thị hiệu ứng chuyển đổi độ mờ khi bạn ẩn hoặc hiển thị một số nội dung. Vì chúng tôi đang sử dụng các tùy chọn mặc định ở trên, bạn có thể thấy hiệu ứng ở đó.

Syntax

var AccordionObject = new Accordion(toggles, content {
   opacity: true //default is true
});

fixedHeight

Để đặt chiều cao cố định, bạn cần sửa một số nguyên (ví dụ: bạn có thể đặt 100 cho nội dung cao 100px). Điều này sẽ được sử dụng với một số loại thuộc tính tràn CSS nếu bạn đang có kế hoạch có chiều cao cố định nhỏ hơn chiều cao tự nhiên của nội dung.

Syntax

var AccordionObject = new Accordion(toggles, content {
   fixedHeight: false //default is false
});

chiều rộng cố định

Cũng giống như “fixedHeight” ở trên, điều này sẽ đặt chiều rộng nếu bạn cung cấp cho tùy chọn này một số nguyên.

Syntax

var AccordionObject = new Accordion(toggles, content {
   fixedWidth: false //default is false
});

luôn luôn ẩn

Tùy chọn này cho phép bạn thêm điều khiển bật tắt vào tiêu đề. Với giá trị này được đặt thành true, khi bạn nhấp vào tiêu đề nội dung đang mở, phần tử nội dung sẽ tự động đóng mà không cần mở bất kỳ thứ gì khác. Bạn có thể thấy việc thực thi trong ví dụ sau.

Syntax

var AccordionObject = new Accordion(toggles, content {
   alwaysHide: false //default is false
});

Sự kiện Accordion

Những sự kiện này cho phép bạn tạo chức năng của mình cho mọi hành động của Accordion.

onActive

Điều này sẽ thực thi khi bạn chuyển đổi mở một phần tử. Nó sẽ chuyển phần tử điều khiển bật tắt và phần tử nội dung đang mở và cả các tham số.

Syntax

var AccordionObject = new Accordion(toggles, content {
   onActive: function(toggler, element) {
      toggler.highlight('#76C83D'); //green
      element.highlight('#76C83D');
   }
});

onBackground

Điều này thực thi khi một phần tử bắt đầu ẩn và chuyển tất cả các phần tử khác đang đóng, nhưng không mở.

Syntax

var AccordionObject = new Accordion(toggles, content {
   onBackground: function(toggler, element) {
      toggler.highlight('#DC4F4D'); //red
      element.highlight('#DC4F4D');
   }
});

onComplete

Đây là sự kiện onComplete tiêu chuẩn của bạn. Nó chuyển một biến có chứa phần tử nội dung.

Syntax

var AccordionObject = new Accordion(toggles, content {
   onComplete: function(one, two, three, four){
      one.highlight('#5D80C8'); //blue
      two.highlight('#5D80C8');
      three.highlight('#5D80C8');
      four.highlight('#5D80C8');
   }
});

Phương pháp Accordion

Các phương pháp này giúp bạn tạo và thao tác các Phần của Accordion.

addSection ()

Với phương pháp này, bạn có thể thêm một phần (một cặp phần tử chuyển đổi / nội dung). Nó hoạt động giống như nhiều phương pháp khác mà chúng tôi đã thấy. Trước tiên, hãy tham khảo đối tượng accordion, sử dụng .addSection, sau đó bạn có thể gọi id của tiêu đề, id của nội dung và cuối cùng nêu rõ bạn muốn nội dung mới xuất hiện ở vị trí nào (0 là vị trí đầu tiên).

Syntax

AccordionObject.addSection('togglersID', 'elementsID', 2);

Note- Khi bạn thêm một phần như thế này, mặc dù nó sẽ hiển thị ở vị trí của chỉ mục 2, chỉ mục thực tế sẽ được +1 chỉ mục cuối cùng. Vì vậy, nếu bạn có 5 mục trong mảng của mình (0-4) và bạn thêm mục thứ 6 , chỉ mục của nó sẽ là 5 bất kể bạn thêm nó vào đâu với .addSection ();

trưng bày()

Điều này cho phép bạn mở một phần tử nhất định. Bạn có thể chọn phần tử theo chỉ mục của nó (vì vậy nếu bạn đã thêm một cặp phần tử và bạn muốn hiển thị nó, bạn sẽ có một chỉ mục khác ở đây so với cách bạn sử dụng ở trên.

Syntax

AccordionObject.display(5); //would display the newly added element

Example

Ví dụ sau giải thích tính năng Accordion với một vài hiệu ứng. Hãy xem đoạn mã sau.

<!DOCTYPE html>
<html>

   <head>
      <style>
         .togglers {
            color: #222;
            margin: 0;
            padding: 2px 5px;
            background: #EC7063;
            border-bottom: 1px solid #ddd;
            border-right: 1px solid #ddd;
            border-top: 1px solid #f5f5f5;
            border-left: 1px solid #f5f5f5;
            font-size: 15px;
            font-weight: normal;
            font-family: 'Andale Mono', sans-serif;
         }
         
         .ind {
            background: #2E86C1;
            border-bottom: 1px solid #ddd;
            border-right: 1px solid #ddd;
            border-top: 1px solid #f5f5f5;
            border-left: 1px solid #f5f5f5;
            font-size: 20px;
            color: aliceblue;
            font-weight: normal;
            font-family: 'Andale Mono', sans-serif;
            width: 200px;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var toggles = $$('.togglers');
            var content = $$('.elements');
            
            var AccordionObject = new Fx.Accordion(toggles, content, {
               show: 0,
               height : true,
               width : false,
               opacity: true,
               fixedHeight: false,
               fixedWidth: false,
               alwaysHide: true,
               
               onActive: function(toggler, element) {
                  toggler.highlight('#DC7633'); //green
                  element.highlight('#DC7633');
                  $('active').highlight('#DC7633');
               },
               
               onBackground: function(toggler, element) {
                  toggler.highlight('#AED6F1'); //red
                  element.highlight('#AED6F1');
                  $('background').highlight('#F4D03F');
               }
            });
            $('display_section').addEvent('click', function(){
               AccordionObject.display(4);
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "active" class = "ind">onActive</div>
      <div id = "background" class = "ind">onBackground</div>
      
      <div id = "accordion_wrap">
         <p class = "togglers">Toggle 1: click here</p>
         <p class = "elements">Here is the content of toggle 1 Here is the content of
            toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here
            is the content of toggle 1 Here is the content of toggle 1 Here is the content
            of toggle 1 Here is the content of toggle 1</p>
         <p class = "togglers">Toggle 2: click here</p>
         <p class = "elements">Here is the content of toggle 2</p>
         <p class = "togglers">Toggle 3: click here</p>
         <p class = "elements">Here is the content of toggle 3</p>
         <p class = "togglers">Toggle 4: click here</p>
         <p class = "elements">Here is the content of toggle 4</p>
      </div>
      
      <p>
         100
         <button id = "display_section" class = "btn btn-primary">
            display section
         </button>
      </p>
      
   </body>
</html>

Output

Nhấp vào từng phần Toggle, sau đó bạn sẽ tìm thấy dữ liệu ẩn và các chỉ báo sự kiện cho mọi hành động.