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 використовують стилі кнопок.
Простий приклад:
<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 // попередня активна вкладка })