Вкладки были описаны ранее в статье Bootstrap - Элементы навигации. Объединив несколько атрибутов данных, вы можете легко создать интерфейс с вкладками. С помощью этого плагина вы можете переходить через панели локального контента на вкладках или таблетках, даже с помощью выпадающих меню.
Если вы хотите включить эту функциональность плагина индивидуально, вам понадобится tab.js, после включения bootstrap.js или bootstrap.min.js.
Применение Tab
Вы можете включить вкладки двумя способами:
- Через атрибуты данных - вам необходимо добавить
data-toggle = "tab" или data-toggle = "pill" к якорям ссылок. Добавление классов nav и nav-tabs на вкладке ul будет применять стиль закладки Bootstrap, в то время как добавление классов nav и nav-pills будет применяться к стилю таблетирования.
<ul class = "nav nav-tabs">
<li><a href = ".identifier" data-toggle = "tab">Home</a></li>
...
</ul>
- Через JavaScript - вы можете активировать вкладки с помощью Javscript, как показано ниже:
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
- Вот пример различных способов активации отдельных вкладок -
// 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')
Эффект Fade
Чтобы получить эффект затухания для вкладок, добавьте .fade в каждую .tab-pane. Первая панель вкладок также должна иметь класс .in, чтобы правильно исчезать в исходном содержимом -
<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>
Пример плагина табуляции с использованием атрибутов данных и эффекта затухания показан в следующем примере -
<ul id = ".myTab0" class = "nav nav-tabs">
<li class = "active">
<a href = ".home1" 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 = "home2">
<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. You also have a
<b>tryit</b> editor, wherein you can edit your code and
try out different possibilities of the examples.</p>
</div>
<div class = "tab-pane fade" id = "ios1">
<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 = ".jmeter2">
<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>
Методы Tab
.$().tab - Этот метод активирует элемент табуляции и контейнер содержимого. Вкладка должна иметь либо data-target или в href ориентации узла контейнера в 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 = "home3">...</div>
.....
</div>
<script>
$(function () {
$('#myTab1 a:last').tab('show')
})
</script>
В следующем примере показано использование метода плагинов табов .tab. Здесь, в примере, активируется вторая вкладка iOS -
<ul id = "myTab1" class = "nav nav-tabs">
<li class = "active">
<a href = ".home4" data-toggle = "tab">
Tutorial Point Home
</a>
</li>
<li><a href = ".ios2" data-toggle = "tab">iOS</a></li>
<li class = "dropdown">
<a href = "#" id = "myTabDrop2" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop2">
<li>
<a href = ".jmeter" tabindex = "-1" data-toggle = "tab">
jmeter
</a>
</li>
<li>
<a href = ".ejb1" tabindex = "-1" data-toggle = "tab">
ejb
</a>
</li>
</ul>
</li>
</ul>
<div id = "myTabContent1" class = "tab-content">
<div class = "tab-pane fade in active" id = "home5">
<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. You also have a
<b>tryit</b> editor, wherein you can edit your code and try
out different possibilities of the examples.</p>
</div>
<div class = "tab-pane fade" id = "ios3">
<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 = ".jmeter3">
<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 = "ejb1">
<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 () {
$('#myTab1 li:eq(1) a').tab('show');
});
</script>
События в Tab
В следующей таблице перечислены события для работы с плагином табуляции. Это событие может использоваться для подключения к функции.
| Событие | Описание | Пример |
| show.bs.tab | Это событие срабатывает при показе вкладок, но до того, как будет показана новая вкладка. Используйте event.target и event.relatedTarget для таргетинга активной вкладки и предыдущей активной вкладки (если есть) соответственно. |
$('a[data-toggle = "tab"]').on('show.bs.tab', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
})
|
| shown.bs.tab | Это событие срабатывает при показе вкладок после показа вкладки. Используйте event.target и event.relatedTarget для таргетинга активной вкладки и предыдущей активной вкладки (если есть) соответственно. |
$('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
})
|
В следующем примере показано использование событий плагина табуляции. Здесь в примере мы отобразим текущие и предыдущие посещенные вкладки -
<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 = "myTab2" class = "nav nav-tabs">
<li class = "active">
<a href = ".home6" data-toggle = "tab">
Tutorial Point Home
</a>
</li>
<li><a href = ".ios4" data-toggle = "tab">iOS</a></li>
<li class = "dropdown">
<a href = "#" id = "myTabDrop3" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop3">
<li>
<a href = ".jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a>
</li>
<li>
<a href = ".ejb2" tabindex = "-1" data-toggle = "tab">ejb</a>
</li>
</ul>
</li>
</ul>
<div id = "myTabConten2" class = "tab-content">
<div class = "tab-pane fade in active" id = "home7">
<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. You also have a
<b>tryit</b> editor, wherein you can edit your code and try
out different possibilities of the examples.</p>
</div>
<div class = "tab-pane fade" id = "ios5">
<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 = ".jmeter4">
<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 = "ejb2">
<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>
Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!
