Bootstrap - Thu gọn Plugin

Plugin thu gọn giúp dễ dàng thực hiện các phân chia thu gọn của trang. Cho dù bạn sử dụng nó để xây dựng một hộp điều hướng hoặc nội dung cho đàn accordion, nó cho phép rất nhiều tùy chọn nội dung.

Nếu bạn muốn bao gồm chức năng plugin này riêng lẻ, thì bạn sẽ cần collapse.js. Điều này cũng yêu cầu Plugin chuyển tiếp được bao gồm trong phiên bản Bootstrap của bạn. Khác, như đã đề cập trong chương Bootstrap Plugins Tổng quan , bạn có thể bao gồm các bootstrap.js hoặc minified bootstrap.min.js .

Bạn có thể sử dụng plugin thu gọn -

To create collapsible groups or accordion. Điều này có thể được tạo như trong ví dụ mẫu bên dưới:

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-default">
      
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
               Click me to expand. Click me again to collapse.Section 1
            </a>
         </h4>
      </div>
      
      <div id = "collapseOne" class = "panel-collapse collapse in">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
               nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-default">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse.Section 2
            </a>
         </h4>
      </div>

      <div id = "collapseTwo" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-default">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse.Section 3
            </a>
         </h4>
      </div>
     
      <div id = "collapseThree" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
     
   </div>
</div>

data-toggle = "collapse" được thêm vào liên kết mà bạn nhấp vào để mở rộng hoặc thu gọn thành phần.
href hoặc một data-targetthuộc tính được thêm vào thành phần mẹ, có giá trị là id của thành phần con.
data-parent thuộc tính được thêm vào để tạo hiệu ứng giống đàn accordion.

Để tạo có thể thu gọn đơn giản mà không cần đánh dấu đàn accordion - Có thể tạo điều này như trong ví dụ mẫu bên dưới -

<button type = "button" class = "btn btn-primary" data-toggle = "collapse" data-target = "#demo">
   simple collapsible
</button>

<div id = "demo" class = "collapse in">
   Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
      sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>

Như bạn có thể thấy trong ví dụ, chúng tôi đã tạo một thành phần có thể thu gọn đơn giản, không giống như đàn accordion, chúng tôi chưa thêm thuộc tính data-parent.

Sử dụng

Bảng sau liệt kê các lớp mà plugin thu gọn sử dụng để xử lý công việc nặng nhọc -

Sr.No.	Lớp & Mô tả
1	.collapse Ẩn nội dung.
2	.collapse.in Hiển thị nội dung.
3	.collapsing Được thêm vào khi quá trình chuyển đổi bắt đầu và bị xóa khi kết thúc.

Bạn có thể sử dụng plugin thu gọn theo hai cách:

Via data attributes - Thêm data-toggle = "collapse" và một data-targetcho phần tử để tự động gán quyền kiểm soát phần tử có thể thu gọn. Cácdata-targetthuộc tính sẽ chấp nhận một bộ chọn CSS để áp dụng tính năng thu gọn. Hãy chắc chắn thêm lớp.collapseđến phần tử có thể thu gọn. Nếu bạn muốn nó mở mặc định, hãy bao gồm lớp bổ sung.in.

Để thêm quản lý nhóm giống như đàn accordion vào điều khiển có thể thu gọn, hãy thêm thuộc tính dữ liệu data-parent = "#selector".
Via JavaScript - Phương thức thu gọn có thể được kích hoạt bằng JavaScript như hình dưới đây -

$('.collapse').collapse()

Tùy chọn

Có một số tùy chọn nhất định có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript được liệt kê trong bảng sau:

Tên tùy chọn	Loại / Giá trị mặc định	Tên thuộc tính dữ liệu	Sự miêu tả
cha mẹ	bộ chọn Mặc định - sai	dữ liệu-gốc	Nếu bộ chọn là false, thì tất cả các phần tử có thể thu gọn dưới phần tử gốc được chỉ định sẽ bị đóng (tương tự như hành vi của đàn accordion truyền thống - điều này phụ thuộc vào lớp nhóm accordion).
chuyển đổi	boolean Mặc định - true	chuyển đổi dữ liệu	Chuyển đổi phần tử có thể thu gọn khi gọi.

Phương pháp

Dưới đây là danh sách một số phương pháp hữu ích được sử dụng với các phần tử có thể thu gọn.

phương pháp	Sự miêu tả	Thí dụ
Options - .collapse (tùy chọn)	Kích hoạt nội dung của bạn dưới dạng phần tử có thể thu gọn. Chấp nhận một đối tượng tùy chọn tùy chọn.	`$('#identifier').collapse({ toggle: false })`
Toggle - .collapse ('chuyển đổi')	Chuyển đổi phần tử có thể thu gọn thành hiển thị hoặc ẩn.	`$('#identifier').collapse('toggle')`
Show - .collapse ('hiển thị')	Hiển thị một phần tử có thể thu gọn.	`$('#identifier').collapse('show')`
Hide - .collapse ('ẩn')	Ẩn một phần tử có thể thu gọn.	`$('#identifier').collapse('hide')`

Thí dụ

Ví dụ sau minh họa việc sử dụng các phương thức:

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-default">
      
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
               Click me to expand. Click me again to collapse. Section 1--hide method
            </a>
         </h4>
      </div>
      
      <div id = "collapseOne" class = "panel-collapse collapse in">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-success">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse. Section 2--show method
            </a>
         </h4>
      </div>
      
      <div id = "collapseTwo" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-info">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse. Section 3--toggle method
            </a>
         </h4>
      </div>
      
      <div id = "collapseThree" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
   </div>
   
   <div class = "panel panel-warning">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseFour">
               Click me to expand. Click me again to collapse. Section 4--options method
            </a>
         </h4>
      </div>
      
      <div id = "collapseFour" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
</div>

<script type = "text/javascript">
   $(function () { $('#collapseFour').collapse({
      toggle: false
   })});
  
   $(function () { $('#collapseTwo').collapse('show')});
   $(function () { $('#collapseThree').collapse('toggle')});
   $(function () { $('#collapseOne').collapse('hide')});
</script>

Sự kiện

Bảng sau liệt kê một số sự kiện có thể được sử dụng với chức năng thu gọn.

Biến cố	Sự miêu tả	Thí dụ
show.bs.collapse	Kích hoạt sau khi phương thức hiển thị được gọi.	`$('#identifier').on('show.bs.collapse', function () { // do something })`
show.bs.collapse	Sự kiện này được kích hoạt khi phần tử thu gọn hiển thị cho người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất).	`$('#identifier').on('shown.bs.collapse', function () { // do something })`
hide.bs.collapse	Kích hoạt khi phương thức ẩn đối tượng đã được gọi.	`$('#identifier').on('hide.bs.collapse', function () { // do something })`
hidden.bs.collapse	Sự kiện này được kích hoạt khi một phần tử thu gọn đã bị ẩn khỏi người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất).	`$('#identifier').on('hidden.bs.collapse', function () { // do something })`

Thí dụ

Ví dụ sau minh họa việc sử dụng các sự kiện:

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-info">
   
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseexample">
               Click me to expand. Click me again to collapse. Section --shown event
            </a>
         </h4>
      </div>
      
      <div id = "collapseexample" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
</div>

<script type = "text/javascript">
   $(function () { 
      $('#collapseexample').on('show.bs.collapse', function () {
         alert('Hey, this alert shows up when you expand it');
      })
   });
</script>