Bootstrap - Tab Plugin

Các tab đã được giới thiệu trong chương Phần tử điều hướng Bootstrap . Bằng cách kết hợp một vài thuộc tính dữ liệu, bạn có thể dễ dàng tạo giao diện theo thẻ. Với plug-in này, bạn có thể chuyển đổi qua các ngăn nội dung cục bộ trong các tab hoặc viên thuốc, thậm chí thông qua menu thả xuống.

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 tab.js. Khác, như đã đề cập trong chương Bootstrap Plugins Tổng quan , bạn có thể đưa bootstrap.js hoặc minified bootstrap.min.js .

Sử dụng

Bạn có thể bật tab theo hai cách sau:

Via data attributes - bạn cần thêm data-toggle = "tab" hoặc là data-toggle = "pill" đến các mỏ neo.

Thêm nav và nav-tabs các lớp vào tab ulsẽ áp dụng kiểu tab Bootstrap , trong khi thêmnav và nav-pillscác lớp học sẽ áp dụng kiểu viên thuốc .

<ul class = "nav nav-tabs">
   <li><a href = "#identifier" data-toggle = "tab">Home</a></li>
   ...
</ul>

Via JavaScript - bạn có thể bật các tab bằng Javscript như bên dưới -

$('#myTab a').click(function (e) {
   e.preventDefault()
   $(this).tab('show')
})

Dưới đây là một ví dụ về các cách khác nhau để kích hoạt các tab riêng lẻ -

// Select tab by name
$('#myTab a[href = "#profile"]').tab('show')
 
// Select first tab
$('#myTab a:first').tab('show') 

// Select last tab
$('#myTab a:last').tab('show') 

// Select third tab (0-indexed)
$('#myTab li:eq(2) a').tab('show')

Hiệu ứng mờ dần

Để có hiệu ứng mờ dần cho các tab, hãy thêm .fade cho mỗi .tab-pane. Ngăn tab đầu tiên cũng phải có.in để làm mờ dần nội dung ban đầu -

<div class = "tab-content">
   <div class = "tab-pane fade in active" id = "home">...</div>
   <div class = "tab-pane fade" id = "svn">...</div>
   <div class = "tab-pane fade" id = "ios">...</div>
   <div class = "tab-pane fade" id = "java">...</div>
</div>

Thí dụ

Ví dụ về plugin tab sử dụng thuộc tính dữ liệu và hiệu ứng mờ dần như được hiển thị trong ví dụ sau:

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>
   
   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>
	
   <li class = "dropdown">
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java 
         <b class = "caret"></b>
      </a>
      
      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li><a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a></li>
         <li><a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a></li>
      </ul>
   </li>
</ul>

<div id = "myTabContent" class = "tab-content">

   <div class = "tab-pane fade in active" id = "home">
      <p>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of
         the technology with simple examples.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed 
         by Apple Inc. Originally released in 2007 for the iPhone, iPod Touch,
         and Apple TV. iOS is derived from OS X, with which it shares the 
         Darwin foundation. iOS is Apple's mobile version of the OS X 
         operating system used on Apple computers.</p>
   </div>
   
   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for 
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
   </div>
   
</div>

Phương pháp

.$().tab- Phương thức này kích hoạt phần tử tab và vùng chứa nội dung. Tab phải có mộtdata-target hoặc một href nhắm mục tiêu một nút vùng chứa trong DOM.

<ul class = "nav nav-tabs" id = "myTab">
   <li class = "active"><a href = "#identifier" data-toggle = "tab">Home</a></li>
   .....
</ul>

<div class = "tab-content">
   <div class = "tab-pane active" id = "home">...</div>
   .....
</div>

<script>
   $(function () {
      $('#myTab a:last').tab('show')
   })
</script>

Thí dụ

Ví dụ sau cho thấy việc sử dụng phương pháp plugin tab .tab. Ở đây trong ví dụ, tab thứ hai iOS được kích hoạt -

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>
   
   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>
	
   <li class = "dropdown">
	
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java 
         <b class = "caret"></b>
      </a>
      
      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li>
            <a href = "#jmeter" tabindex = "-1" data-toggle = "tab">
               jmeter
            </a>
         </li>
         
         <li>
            <a href = "#ejb" tabindex = "-1" data-toggle = "tab">
               ejb
            </a>
         </li>
      </ul>
   </li>
</ul>

<div id = "myTabContent" class = "tab-content">

   <div class = "tab-pane fade in active" id = "home">
      <p>Tutorials Point is a place for beginners in all technical areas. 
         This website covers most of the latest technologies and explains each of 
         the technology with simple examples.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed by 
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
         Apple TV. iOS is derived from OS X, with which it shares the Darwin 
         foundation. iOS is Apple's mobile version of the OS X operating system 
         used on Apple computers.</p>
   </div>
   
   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for 
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, 
         Web Logic etc.</p>
   </div>
   
</div>

<script>
   $(function () {
      $('#myTab li:eq(1) a').tab('show');
   });
</script>

Sự kiện

Bảng sau liệt kê các sự kiện để làm việc với plugin tab. Sự kiện này có thể được sử dụng để nối vào hàm.

Biến cố	Sự miêu tả	Thí dụ
show.bs.tab	Sự kiện này kích hoạt trên chương trình tab, nhưng trước khi tab mới được hiển thị. Sử dụngevent.target và event.relatedTarget để nhắm mục tiêu tab đang hoạt động và tab đang hoạt động trước đó (nếu có) tương ứng.	`$('a[data-toggle = "tab"]').on('show.bs.tab', function (e) { e.target // activated tab e.relatedTarget // previous tab })`
show.bs.tab	Sự kiện này kích hoạt trên hiển thị tab sau khi một tab được hiển thị. Sử dụngevent.target và event.relatedTarget để nhắm mục tiêu tab đang hoạt động và tab đang hoạt động trước đó (nếu có) tương ứng.	`$('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) { e.target // activated tab e.relatedTarget // previous tab })`

Thí dụ

Ví dụ sau cho thấy việc sử dụng các sự kiện plugin tab. Ở đây trong ví dụ, chúng tôi sẽ hiển thị các tab đã truy cập hiện tại và trước đó -

<hr>
<p class = "active-tab"><strong>Active Tab</strong>: <span></span></p>
<p class = "previous-tab"><strong>Previous Tab</strong>: <span></span></p>
<hr>

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>
   
   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>
	
   <li class = "dropdown">
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java 
         <b class = "caret"></b>
      </a>
      
      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li>
            <a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a>
         </li>
         
         <li>
            <a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a>
         </li>
      </ul>
   </li>
</ul>

<div id = "myTabContent" class = "tab-content">

   <div class = "tab-pane fade in active" id = "home">
      <p>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of 
         the technology with simple examples.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed by 
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
         Apple TV. iOS is derived from OS X, with which it shares the Darwin
         foundation. iOS is Apple's mobile version of the OS X operating system
         used on Apple computers.</p>
   </div>
   
   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
   </div>
</div>

<script>
   $(function(){
      $('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
         // Get the name of active tab
         var activeTab = $(e.target).text(); 
         
         // Get the name of previous tab
         var previousTab = $(e.relatedTarget).text(); 
         
         $(".active-tab span").html(activeTab);
         $(".previous-tab span").html(previousTab);
      });
   });
</script>