Вкладки были введены в главе « Элементы начальной загрузки» . Комбинируя несколько атрибутов данных, вы можете легко создать интерфейс с вкладками. С помощью этого плагина вы можете переходить через панели локального контента во вкладках или таблетках, даже через выпадающие меню.
Если вы хотите включить функциональность этого плагина индивидуально, вам понадобится tab.js. Иначе, как упоминалось в главе « Обзор плагинов Bootstrap» , вы можете включить bootstrap.js или минимизированный bootstrap.min.js .
использование
Вы можете включить вкладки двумя следующими способами:
-
Через атрибуты данных — вам нужно добавить data-toggle = «tab» или data-toggle = «pill» к якорям.
При добавлении классов nav и nav-tabs к вкладке ul будет применяться стиль вкладки Bootstrap, а при добавлении классов nav и nav-pills применяется стиль Pill .
Через атрибуты данных — вам нужно добавить data-toggle = «tab» или data-toggle = «pill» к якорям.
При добавлении классов nav и nav-tabs к вкладке ul будет применяться стиль вкладки Bootstrap, а при добавлении классов nav и nav-pills применяется стиль Pill .
<ul class = "nav nav-tabs"> <li><a href = "#identifier" data-toggle = "tab">Home</a></li> ... </ul>
-
С помощью JavaScript — вы можете включить вкладки, используя Javscript, как показано ниже —
С помощью 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 к каждой панели .tab . На первой панели вкладок также должен быть .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 = "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. 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 = "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>
методы
. $ (). 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 = "home">...</div>
.....
</div>
<script>
$(function () {
$('#myTab a:last').tab('show')
})
</script>
пример
В следующем примере показано использование метода плагина tab .tab . Вот в примере активирована вторая вкладка iOS —
<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. 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 = "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>
События
В следующей таблице перечислены события для работы с плагином вкладок. Это событие может быть использовано для подключения к функции.
| Событие | Описание | пример |
|---|---|---|
| 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
})
|
пример
В следующем примере показано использование событий плагина вкладки. Здесь в примере мы отобразим текущую и предыдущие посещенные вкладки —