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 elementExample
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.