Bootstrap підтримує будь-яку кількість вкладок, в тому числі і випадне меню. Вкладені вкладки не підтримуються.

Як користуватися?

Кожен набір вкладок потрібно активувати через JavaScript таким чином:

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

Щоб показати певну вкладку, користуйтеся таким методом:

$('#my-tabs a[href="#life"]').tab('show') //селектор за іменем
$('#my-tabs a:first').tab('show') //вибір першої вкладки
$('#my-tabs a:last').tab('show') //остання вкладка
$('#my-tabs li:eq(2) a').tab('show') //вибір вкладки за номером

Зверніть увагу на останній рядок коду: нумерація вкладок починається з нуля, тому третя вкладка матиме індекс 2.

Налаштування

Класи .nav і .nav-tabs, які додаються до елементу списку ul, додають йому стилі вкладок Bootstrap. А класи .nav і .nav-pills використовують стилі кнопок.

Ви можете обійтися без JavaScript: для того, щоб таби почали працювати, досить додати атрибут data-toggle="tab" або data-toggle="pill" елементам.

Простий приклад: 

Відповідний код:
<div>
 <!-- Навігація -->
 <ul class="nav nav-tabs" role="tablist">
 <li class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Головна</a></li>
 <li><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Профіль</a></li>
 <li><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Повідомлення</a></li>
 <li><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Налаштування</a></li>
 </ul>
 <!-- Вміст вкладок -->
 <div class="tab-content">
 <div role="tabpanel" class="tab-pane active" id="home">
 Сторінка №1
 </div>
 <div role="tabpanel" class="tab-pane" id="profile">
 Сторінка №2
 </div>
 <div role="tabpanel" class="tab-pane" id="messages">
 Сторінка №3
 </div>
 <div role="tabpanel" class="tab-pane" id="settings">
 Сторінка №4
 </div>
 </div>
</div>

Плавна зміна вкладок

Щоб вкладки змінювалися не миттево, а плавно, додайте клас .fade до кожного елементу з класом .tab-pane. Перша вкладка повинна мати також клас .in, щоб її вміст був видимим при завантаженні сторінки.

<div class="tab-content">
 <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
 <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
 <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
 <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

Методи

$().Tab

Активує вкладку і контейнер для вмісту. Вкладка повинна мати або атрибут data-target, або href, який би вказував на селектор контейнера на сторінці. У прикладі вище всі вкладки зроблені за допомогою посилань <a> з атрибутами data-toggle = "tab".

.tab('show')

Змінює вкладку на зазначену і відображає її вміст. Будь-які інші вкладки стають неактивними, а їх вміст ховається.

$('#tab-01').tab('show')

Події

Часто буває необхідним виконувати ті чи інші дії за зміною вкладок. У цьому нам допомагають їх події. При показі нової вкладки, події відбуваються в такому порядку:

  • hide.bs.tab - на поточній вкладці
  • show.bs.tab - на тій, яка повинна відобразитися
  • hidden.bs.tab - на тій самій вкладці, що і hide.bs.tab
  • shown.bs.tab - на тільки-но показаній вкладці, тії, що у події show.bs.tab

Якщо до цього жодна з вкладок не була активна, то події hide.bs.tab і hidden.bs.tab не відбудуться.

Опис подій:

подія опис
show.bs.tab Подія відбувається при показі вкладки, але до того, як вона стає видимою. Змінні event.target і event.relatedTarget вказують на активну вкладку і на ту, яка була активна раніше (якщо така є).
shown.bs.tab Аналогічно першою подією, це спрацьовує при показі вкладки, але вже після того, як вона повністю стає видимою. Змінні event.target і event.relatedTarget  вказують на активну вкладку і на попередню активну.
hide.bs.tab Спрацьовує перед показом нової вкладки (і перед приховуванням попередньої активної). Event.target і event.relatedTarget вкажуть на поточну активну вкладку і ту, яка скоро стане активною.
hidden.bs.tab Спрацьовує після того, як нова вкладка стала активною, а попередня активна стала прихованою. Event.target і event.relatedTarget містять посилання на попередню активну і поточну активну вкладки.

Приклад події:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
 e.target // вкладка, яка стала активною
 e.relatedTarget // попередня активна вкладка
})

Перелік усіх уроків


 Похожие публикации
2016-05-31 • Просмотров [ 38 ]