jQuery PWSTabs плагин

Сегодня расскажем об удобном 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>

Доступные настройки

Официальная страница плагина с работающими примерами: http://alexchizhov.com/pwstabs/