Bootstrap: Thẻ đóng/mở tab.js
Giải phóng thời gian, khai phóng năng lực
Các ví dụ
Thêm tính năng chuyển đổi qua lại giữa các vùng nội dung bằng thẻ động hoặc thậm chí là các menu sổ xuống một cách nhanh chóng.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Mở rộng thanh điều hướng dạng thẻ
Plugin này mở rộng thành phần điều hướng dạng thẻ để thêm vào các vùng tabbable.
Cách sử dụng
Kích hoạt các thẻ tabbable bằng JavaScript (mỗi thẻ cần phải được kích hoạt một cách riêng lẻ):
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
Bạn có thể kích hoạt các tab riêng lẻ bằng nhiều cách:
$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab a:first').tab('show') // Select first tab
$('#myTab a:last').tab('show') // Select last tab
$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
Markup
Bạn có thể kích hoạt thanh điều hướng dạng thẻ hoặc dạng viên thuốc mà không cần phải viết bất kỳ đoạn mã JavaScript nào bằng cách chỉ rõ data-toggle="tab" hoặc data-toggle="pill" trên một phần tử. Thêm các class nav và nav-tabs vào một thẻ ul sẽ áp dụng tab styling của BootStrap, trong khi đó việc thêm các class nav và nav-pills sẽ áp dụng pill styling.
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
<li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
Hiệu ứng mờ dần
Để tạo hiệu ứng mờ dần cho tab (fade), hãy thêm class .fade vào mỗi .tab-pane. .tab-pane đầu tiên cũng cần phải có .in để tạo hiệu ứng mờ ngay khi khởi tạo.
<div class="tab-content">
<div class="tab-pane fade in active" id="home">...</div>
<div class="tab-pane fade" id="profile">...</div>
<div class="tab-pane fade" id="messages">...</div>
<div class="tab-pane fade" id="settings">...</div>
</div>
Các phương thức
$().tab
Kích hoạt một phần tử dạng thẻ và một container nội dung. Thẻ sẽ phải có thuộc tính data-target hoặc href với đích đến là một nút container trong DOM.
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
<li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
<script>
$(function () {
$('#myTab a:last').tab('show')
})
</script>
Các sự kiện
| Loại sự kiện | Mô tả |
|---|---|
| show.bs.tab | Sự kiện này xảy ra khi nội dụng của một thẻ hiển thị, nhưng trước khi nội dung của một thẻ mới được hiển thị. Hãy sử dụng event.target và event.relatedTarget với đích đến là thẻ đang được kích hoạt và thẻ trước đó được kích hoạt (nếu có). |
| shown.bs.tab | Sự kiện này xảy ra khi nội dung của một thẻ hiện thị sau khi nội dung của một thẻ khác đã được hiển thị. Hãy sử dụng event.target và event.relatedTarget với đích đến là thẻ đang được kích hoạt và thẻ trước đó được kích hoạt (nếu có). |
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
})
Giải phóng thời gian, khai phóng năng lực