# [PWS Tabs jQuery Plugin](http://alexchizhov.com/pwstabs)^{[1.4.0](#%D0%92%D0%B5%D1%80%D1%81%D0%B8%D1%8F-140-06032016)} [![Build Status](https://travis-ci.org/alexchizhovcom/pwstabs.svg?branch=master)](https://travis-ci.org/alexchizhovcom/pwstabs) ####PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3. ## Вложенные вкладки^{новаяя возможность} PWS Tabs jQuery Plugin поддерживает вложенные вкладно неограниченной глубины. Вы можете добавлять неограниченное количество вкладок внутрь вкладок. ##PWS Tabs адаптивный! ![Preview](http://alexchizhov.com/pwstabs/screenshots/pwstabsresponsive600.jpg) ![Preview](http://alexchizhov.com/pwstabs/screenshots/pwstabsresponsive600menu.jpg) ## Установка с Bower `$ bower install pwstabs` ## Демо Онлайн демо(английский): [http://alexchizhov.com/pwstabs](http://alexchizhov.com/pwstabs) ![Preview](http://alexchizhov.com/pwstabs/screenshots/pwstabs1.2.0.jpg) ## Документация ### Начало работы 1) Подключите jQuery библиотеку и jQuery PWS Tabs плагин внутри `` секции. ```html ``` 2) Создайте вкладки используя HTML5 `data-pws-*` атрибут, чтобы указать ID и Название вкладок. ```html

Первая вкладка

Вторая вкладка

Третья вкладка

``` `data-pws-tab` используется для инициализация вкладки и указания ее ID. `data-pws-tab-name` используется для указания Заголовка вкладки. 3) Вызовете плагин на родительском элементе относительно вкладок со 100% шириной и эффектом 'scale'. ```js jQuery(document).ready(function($){ $('.hello_world').pwstabs(); }); ``` 4) Доступные параметры для настройки плагина. ```js jQuery(document).ready(function($){ $('.hello_world').pwstabs({ // scale / slideleft / slideright / slidetop / slidedown / none // slace - увеличение // 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, // Доступные темы: default: '' / 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: '', // Поддержка для языков читаемых справа налево (RTL): true / false rtl: false }); }); ```

5) PWS Tabs Plugin поддерживает Font Awesome 4.5.0

5.1) Подключите таблицы стилей Font Awesome из директории /assets:

```html ```

5.2) Используйте HTML5 data-pws-tab-icon атрибут, чтобы установить иконку. Названия иконок можно посмотреть здесь: Font Awesome Icons.

```html

Первая вкладка

Вторая вкладка

Третья вкладка

``` ## Настройки

Опция	Стандартно	Описание	Доступные настройки	Тип
effect	scale	Эффект переключения	scale / slideleft / slideright / slidetop / slidedown / none	строка
defaultTab	1	Выбранная по стандарту вкладка	ID вкладки, начинается с 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	Поддержка языков справа налево (RTL)	true / false	логическое

## История изменений ### Версия 1.4.0 (06.03.2016) 1) Вложенные вкладки - новая возможность
2) Прыгающий шрифт вкладок на iPhone исправлен
3) Позиционирование вкладок изменено с absolute на relative
4) Высота контейнера теперь контролируется CSS, а не jQuery
5) Font awesome обновлен до версии 4.5.0 ### Версия 1.3.0 (20.08.2015) 1) Основные CSS и JS файлы больше не включают номер версии в названии
2) Код почищен и переработан
3) Вкладки теперь имеют короткие классы pws_show и pws_hide взамен старых с названием эффекта
4) Классы стилей теперь применяются к контейнеру, а не вкладкам
5) Новая темная тема для сайтов с белым фоном
6) Исправлена ширина вертикальных вкладок с иконками
7) Исправлены отступы вкладок
8) Папка Font awesome переименована в /font-awesome/
9) Font awesome обновлен до версии 4.4.0 ### Версия 1.2.1 (23.01.2015) 1) Чтобы упростить работу со стилями плагина, добавлены SASS файлы в директорию /assets/sass/.
2) Основной файл стилей сгенерирован из нового SASS файла (пара изменений с предыдущей версии). ### Версия 1.2.0 (21.01.2015) 1) Адаптивность плагина.
2) Добавлены темы оформления. 9 цветов на выбор
3) Оптимизирован код плагина.
4) Добавлен файл responsive.html в директорию /examples/.
5) Добавлены примеры цветов в /examples/examples.html ### Версии 1.1.X 1) Базовый функционал плагина