Сегодня расскажем об удобном jQuery плагине PWS Tabs. Плагин позволяет настраивать переключающиеся вкладки с широким набором настроек. Реализована возможность выбора анимации, реализованной при помощи CSS3. Настройка позиционирования вкладок позволяет настраивать вкладки как сверху, так и слева, снизу и справа от части контента. Плагин поддерживает функцию мульти вкладок, а именно позволяет создавать вкладки внутри вкладок. Функция очень востребована среди пользователей Индии и Японии.
Преимуществом плагина PWS Tabs можно назвать его гибкость в настройке, наличие нескольких включенных в набор цветовых решений вкладок, а также адаптивность под различные устройства. Несомненно плагин является существенным конкурентом для платных аналогов, хотя распространяется совершенно бесплатно.
Документация
1) Подключаем библиотеку jQuery и файлы плагина:
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="jquery.pwstabs.css">
<script src="jquery.pwstabs.js"></script>
2) Создайте вкладки и используйте HTML5 атрибут data-pws-* чтобы задать ID и Название вкладок.
<div class="hello_world">
<div data-pws-tab="anynameyouwant1" data-pws-tab-name="Заголовок вкладки 1">Содержимое первой вкладки</div>
<div data-pws-tab="anynameyouwant2" data-pws-tab-name="Заголовок вкладки 2">Содержимое второй вкладки</div>
<div data-pws-tab="anynameyouwant3" data-pws-tab-name="Заголовок вкладки 3">Содержимое третьей вкладки</div>
</div>
data-pws-tab используется для инициализации вкладки, а также как ID вкладки.
data-pws-tab-name используется для отображения заголовка вкладки.
data-pws-tab-icon используется для добавления иконки вкладки. Использует Font Awesome для отображения иконок.
3) Инициализация плагина на контейнере вкладок, для создания стандартного интерфейса вкладок со 100% шириной и эффектом переключения 'scale'
jQuery(document).ready(function($){
$('.hello_world').pwstabs();
});
4) Доступные параметры для настройки плагина вкладок.
jQuery(document).ready(function($){
$('.hello_world').pwstabs({
// scale / slideleft / slideright / slidetop / slidedown / none
effect: 'scale',
// Открытая по стандарту вкладка
defaultTab: 1,
// Установка произвольной ширины контейнера
// Любое значение величины (1,2,3.. / px,pt,em,%,cm..)
containerWidth: '100%',
// Позиция вкладок: horizontal / vertical
tabsPosition: 'horizontal',
// Горизонтальная позиция вкладок: top / bottom
horizontalPosition: 'top',
// Вертикальная позиция вкладок: left / right
verticalPosition: 'left',
// Адаптивность вкладок : true / false
responsive: false,
// Доступные темы: По стандарту: '' / pws_theme_violet / pws_theme_green / pws_theme_yellow / pws_theme_gold /
// pws_theme_orange / pws_theme_red / pws_theme_purple / pws_theme_grey
theme: '',
// Поддержка текстов справа налево : true/ false
rtl: false
});
});
5) Плагин PWS Tabs поддерживает Font Awesome 4.5.0
5.1) Подключите таблицу стилей Font Awesome из директории:
<link type="text/css" rel="stylesheet" href="../assets/font-awesome/css/font-awesome.min.css">
5.2) Используйте HTML5 атрибут data-pws-tab-icon для установки иконки. Название иконки вы можете найти здесь: Font Awesome Icons.
<div class="hello_world">
<div data-pws-tab="name1" data-pws-tab-name="Вкладка 1" data-pws-tab-icon="fa-heart">Содержимое первой вкладки</div>
<div data-pws-tab="name2" data-pws-tab-name="Вкладка 2" data-pws-tab-icon="fa-star">Содержимое второй вкладки</div>
<div data-pws-tab="name3" data-pws-tab-name="Вкладка 3" data-pws-tab-icon="fa-map-marker">Содержимое третьей вкладки</div>
</div>
Доступные настройки
Настройка | Стандартно | Описание | Доступные параметры | Тип |
---|---|---|---|---|
effect | scale | Эффект переключения (анимация) | scale / slideleft / slideright / slidetop / slidedown / none | строка |
defaultTab | 1 | Активная вкладка по стандарту | Tab ID number starts with 1 (1,2,3..) | число |
containerWidth | 100% | Ширина контейнера | Любое значение размера (1,2,3.. / px,pt,em,%,cm..) | строка |
tabsPosition | horizontal | Позиция вкладок | horizontal / vertical | строка |
horizontalPosition | top | Горизонтальная позиция вкладок | top / bottom | строка |
verticalPosition | left | Вертикальная позиция вкладок | left / right | строка |
theme | '' |
Выбор темы плагина, можно добавлять свои темы и указывать название класса |
pws_theme_violet / pws_theme_green pws_theme_yellow / pws_theme_gold pws_theme_orange / pws_theme_red pws_theme_purple / pws_theme_grey pws_theme_dark_violet / pws_theme_dark_green pws_theme_dark_yellow / pws_theme_dark_gold pws_theme_dark_orange / pws_theme_dark_red pws_theme_dark_purple / pws_theme_dark_grey |
строка |
responsive | false | Включить адаптивность | true / false | логический |
rtl | false | Поддержка языков справа налево | true / false | логический |
Официальная страница плагина с работающими примерами: http://alexchizhov.com/pwstabs/