Selector — скрипт, позволяющий создать аналог табберу с пользовательскими кнопками и контентом; отображение контента срабатывает при наведении. Скрипт поддерживает функции
on_click (класс CSS cc-["число"]) или on_hover (класс CSS hh-["число"]).
Installation
- 1. Import the script
- 2. CSS
- 3. Вики-разметка
<div class="hh-1 sy">Ваша кнопка</div> <!-- активная кнопка -->
<div class="hh-2 sn">Ваша кнопка</div> <!-- normal button, triggered on hover -->
<div class="cc-3 sn">Ваша кнопка</div> <!-- normal button, triggered on click -->
<div class="zz-1">Ваш контент 1</div> <!-- 1 вкладка (отображается по умолчанию) -->
<div class="zz-2" style="display: none;">Ваш контент 2</div> <!-- 2 вкладка -->
<div class="zz-3" style="display: none;">Your content 3</div> <!-- third tab -->
Цифра в классе соответствует кнопке и вкладке, которую она показывает при наведении.
P.S. In the future support is expected for selection of display (when active or hover).
4. Дополнительно: Использование 2 селекторов на 1 странице.
Оберните селекторы в div
с параметром data-tab-group="group1" data-tab-group="group2"
<div data-tab-group="group1">
<div class="hh-1 sy">Ваша кнопка</div> <!-- активная кнопка -->
<div class="hh-2 sn">Ваша кнопка</div> <!-- normal button, triggered on hover -->
<div class="cc-3 sn">Ваша кнопка</div> <!-- normal button, triggered on click -->
<div class="zz-1">Ваш контент 1</div> <!-- 1 вкладка (отображается по умолчанию) -->
<div class="zz-2" style="display: none;">Ваш контент 2</div> <!-- 2 вкладка -->
<div class="zz-3" style="display: none;">Your content 3</div> <!-- third tab -->
</div>
<div data-tab-group="group2">
<div class="hh-1 sy">Ваша кнопка</div> <!-- активная кнопка -->
<div class="hh-2 sn">Ваша кнопка</div> <!-- normal button, triggered on hover -->
<div class="cc-3 sn">Ваша кнопка</div> <!-- normal button, triggered on click -->
<div class="zz-1">Ваш контент 1</div> <!-- 1 вкладка (отображается по умолчанию) -->
<div class="zz-2" style="display: none;">Ваш контент 2</div> <!-- 2 вкладка -->
<div class="zz-3" style="display: none;">Your content 3</div> <!-- third tab -->
</div>