Ariska
10 KiB
Executable File
10 KiB
Executable File
PWS Tabs jQuery Plugin1.4.0 
####PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
Вложенные вкладкиноваяя возможность
PWS Tabs jQuery Plugin поддерживает вложенные вкладно неограниченной глубины. Вы можете добавлять неограниченное количество вкладок внутрь вкладок.
##PWS Tabs адаптивный!
Установка с Bower
$ bower install pwstabs
Демо
Онлайн демо(английский): http://alexchizhov.com/pwstabs
Документация
Начало работы
- Подключите jQuery библиотеку и jQuery PWS Tabs плагин внутри
<head>секции.
<script src="https://code.jquery.com/jquery-1.12.1.min.js"</script>
<link type="text/css" rel="stylesheet" href="jquery.pwstabs.css">
<script src="jquery.pwstabs.js"></script>
- Создайте вкладки используя 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 используется для указания Заголовка вкладки.
- Вызовете плагин на родительском элементе относительно вкладок со 100% шириной и эффектом 'scale'.
jQuery(document).ready(function($){
$('.hello_world').pwstabs();
});
- Доступные параметры для настройки плагина.
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:
<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="anynameyouwant1" data-pws-tab-name="Название вкладки 1" data-pws-tab-icon="fa-heart">Первая вкладка</div>
<div data-pws-tab="anynameyouwant2" data-pws-tab-name="Название вкладки 2" data-pws-tab-icon="fa-star">Вторая вкладка</div>
<div data-pws-tab="anynameyouwant3" data-pws-tab-name="Название вкладки 3" data-pws-tab-icon="fa-map-marker">Третья вкладка</div>
</div>
Настройки
| Опция | Стандартно | Описание | Доступные настройки | Тип |
|---|---|---|---|---|
| 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)
- Вложенные вкладки - новая возможность
- Прыгающий шрифт вкладок на iPhone исправлен
- Позиционирование вкладок изменено с absolute на relative
- Высота контейнера теперь контролируется CSS, а не jQuery
- Font awesome обновлен до версии 4.5.0
Версия 1.3.0 (20.08.2015)
- Основные CSS и JS файлы больше не включают номер версии в названии
- Код почищен и переработан
- Вкладки теперь имеют короткие классы pws_show и pws_hide взамен старых с названием эффекта
- Классы стилей теперь применяются к контейнеру, а не вкладкам
- Новая темная тема для сайтов с белым фоном
- Исправлена ширина вертикальных вкладок с иконками
- Исправлены отступы вкладок
- Папка Font awesome переименована в /font-awesome/
- Font awesome обновлен до версии 4.4.0
Версия 1.2.1 (23.01.2015)
- Чтобы упростить работу со стилями плагина, добавлены SASS файлы в директорию /assets/sass/.
- Основной файл стилей сгенерирован из нового SASS файла (пара изменений с предыдущей версии).
Версия 1.2.0 (21.01.2015)
- Адаптивность плагина.
- Добавлены темы оформления. 9 цветов на выбор
- Оптимизирован код плагина.
- Добавлен файл responsive.html в директорию /examples/.
- Добавлены примеры цветов в /examples/examples.html
Версии 1.1.X
- Базовый функционал плагина