PWS Tabs jQuery Plugin - Табы со множеством вкладок на форуме

[in1975]

PWS Tabs jQuery Plugin

ИНСТРУКЦИЯ ПО КАСТОМИЗАЦИИ ВО ВКЛАДКАХ

Следует придумать название кастомной темы - theme: 'new_name', а в стиле [style] дописываем
это же название с точкой в начале, после .pws_tabs_container, вот так: .pws_tabs_container.new_name

PWS Tabs - адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3. Тыкаешь по закладочке и спойлер раскрывается. Очень компактно и красиво.
(readme.ru и примеры example.html внутри архива pwstabs.zip)

• PWS Tabs jQuery Plugin - плагин табов на оффсайте от автора Александр Чижов.
• GitHub - исходники и релизы новых версий на
• PWS Tabs PSPx - примеры использования.
• responsive

Синтаксис - если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу). Кнопки в расширенном режиме редактирования:

1. - TOPTIONS (указываем опции из таблицы)
2. - TNAME (указываем название табов и содержимое вкладки)
3. - TEND (указатель на то, что вкладки закончились)

[TOPTIONS="effect: 'scale', defaultTab: '1', containerWidth: '100%', tabsPosition: 'horizontal', horizontalPosition: 'top', verticalPosition: 'left', theme: 'pws_theme_grey'"]Уникальное_название_Таба_безпробелов[/TOPTIONS]
 
    [TNAME="Первый таб"]Здесь текст, содержимое первой вкладки[/TNAME]
    [TNAME="Второй таб"]Здесь текст, содержимое второй вкладки[/TNAME]
    [TNAME="Третий таб"]Здесь текст, содержимое третьей вкладки[/TNAME]

[TEND][/TEND]

После создания табов необходимо удалить все переносы на новую строку!

Как это выглядит:

Здесь текст, содержимое первой вкладки

Здесь текст, содержимое второй вкладки

Здесь текст, содержимое третьей вкладки

Еще примеры как это выглядит, в том числе и с декором можете посмотреть с сообщениях данной темы.

По таблице берём нужные функции и вписываем через запятую по очереди в TOPTIONS:

Опция	Умолчания	Описание	Параметр опции	Тип
theme:	' '	Уникальное имя_id темы	new_name Стандартные названия тем по умолчанию: 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	строка
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	строка
responsive:	'false'	!!BETA!! Включить вложения	true/false	строка
rtl:	'false'	По правому краю	true/false	строка

Если вы вкладываете ещё один "Таб" во вкладку, следует вставлять полный код Табов - toptions, tname, tend.
Не забывайте указывать уникальное имя ID нового таба new_name в названии новой темы и в стилях, иначе будет подхватываться настройка внешнего Таба.

Также можно воспользоваться онлайн-генераторами для создания закладок.

• maxzon.ru
• cssbuttongenerator.com
• webremeslennik.ru

Копируем получившийся код и редактируем под закладки:

1) .button заменяем на .pws_tabs_container.название-темы ul.pws_tabs_controll li a{и далее берем из кода...}
2) .button:hover заменяем на .pws_tabs_container.название-темы ul.pws_tabs_controll li a:hover {и далее берем из кода...}
3) .button:active заменяем на .pws_tabs_container.название-темы ul.pws_tabs_controll li a.pws_tab_active {и далее берем из кода...}

как выглядит результат

Так это выглядит

Довольно прикольно

Фон под текстом тоже можно менять, смотрите выше

Ещё пятёрка лучших онлайн-минифи-деминифи (Online JavaScript/CSS/HTML Compressor):

1. https://htmlcompressor.com/compressor/ - HTML Compressor
2. http://xn--h1aeef4ax.xn--p1ai/web_to...ssor/index.php - компрессор / декомпрессор CSS или JS
3. https://cssresizer.com/ru/ (компрессор / декомпрессор CSS)
4. http://refresh-sf.com/
5. http://csscompressor.com/

<!-- Глобальные параметры на весь контейнер -->

[style].pws_tabs_list{background:transparent}.pws_tabs_container.new_name{background-color:#61BEBC;border-radius:8px 8px 0 0}.pws_tabs_container.new_name ul.pws_tabs_controll{width:100%;text-align:center}.pws_tabs_list.new_name{background:transparent}[/style]

Расшифровка параметров:

.pws_tabs_container.new_name { /* Родительский элемент, отвечает за параметры контейнера, как "Декор" снаружи */
  background-color: #61BEBC;   /* Можно задать цвет общего фона, чтобы контейнер стал монолитным */
  border-radius: 8px 8px 0 0;  /* Закругляет края у самого контейнера, отсчёт с левого верхнего по часовой */
}
.pws_tabs_container.new_name ul.pws_tabs_controll { /* Дочерний элемент, отвечает за блок "Названия вкладок" */
  width: 100%;                 /* Расположение "Названий вкладок" во всю ширину контейнера */
  text-align: center;          /* Выравнивает "Названия вкладок" по центру, полезно, если всего одна вкладка */
}
.pws_tabs_list.new_name {      /* Отвечает за содержимое вкладки */
  background: transparent;     /* Делает бэкграунд содержимого прозрачным */
}

Дочерние элементы принимают свойства от Родительского. Если у родителя указаны параметры, то это распространяется на все дочерние, если у дочерних не указано иное. Все дочерние элементы считаются по иерархии и подчиняются по нарастающей, например:

.pws_tabs_container.new_name
.pws_tabs_container.new_name .pws_tabs_list
.pws_tabs_container.new_name ul.pws_tabs_controll
.pws_tabs_container.new_name ul.pws_tabs_controll li
.pws_tabs_container.new_name ul.pws_tabs_controll li a
.pws_tabs_container.new_name ul.pws_tabs_controll li a:hover
.pws_tabs_container.new_name ul.pws_tabs_controll li a.pws_tab_active

То есть, что написано в предыдущем уровне, то не нужно повторять в последующих, они подхватятся от Родителя. А если нужно что-то изменить, то в Дочернем уровне меняем, как например можно задать цвет сразу на активную и неактивную вкладки, а если у активной другой цвет, то там меняем на свой. иногда бывает, что Родительские настройки не меняются в дочерних, в таких случаях нужно насильно заставить это сделать, приписав к параметру !important;, вот так: background: #61BEBC !important;

<!-- Заголовок активной вкладки -->

[style].pws_tabs_container.new_name ul.pws_tabs_controll li a.pws_tab_active {background:#1C354A;color:#FAE4ED;text-shadow: 1px 1px 2px #730F34;font-size:16px;font-weight:700;padding:5px 20px;margin-right:10px;}[/style]

Расшифровка параметров:

{
   background: #1C354A;                // Цвет бэкграунда активной вкладки
   color: #FAE4ED;                     // Цвет шрифта
   text-shadow: 1px 1px 2px #730F34;   // Тень шрифта
   font-size: 16px;                    // Размер шрифта (если хотите изменить размер, отличный от родителя)
   font-weight: 700;                   // Насыщенность шрифта (400 - normal, 700 - bold)
   padding:5px 20px;                   // Значения полей от границ (5px - сверху-снизу, 20px - слева-справа)
   margin-right: 10px;                 // Отступ справа (расстояние между вкладками) по умолчанию 3px.
}

<!-- Содержимое открытой вкладки -->

[style].pws_tabs_container.new_name .pws_tabs_list {background:#1C354A;color:#fff;text-shadow: 1px 1px 2px #730F34;padding:10px;}[/style]

Расшифровка параметров:

{
   background: #1C354A;                // Цвет бэкграунда содержимого вкладки
   color: #fff;                        // Цвет шрифта
   text-shadow: 1px 1px 2px #730F34;   // Тень шрифта
   font-weight: 700;                   // Насыщенность шрифта (400 - normal (по умолчанию), 700 - bold)
   padding: 10px;                      // Значения полей от границ (10px - со всех сторон) по умолчанию 20px.
}

<!-- Заголовок неактивной вкладки -->

[style].pws_tabs_container.new_name ul.pws_tabs_controll li a {background:#274B69;color:white;font-size:0.9em;font-weight:700;padding:5px 5px;margin-right:20px}[/style]

Расшифровка параметров:

{
   background: #1C354A;                // Цвет бэкграунда активной вкладки
   color: #FAE4ED;                     // Цвет шрифта
   text-shadow: 1px 1px 2px #730F34;   // Тень шрифта
   font-weight: 700;                   // Насыщенность шрифта (400 - normal, 700 - bold)
   padding:5px 20px;                   // Значения полей от границ (5px - сверху-снизу, 20px - слева-справа)
   margin-right: 10px;                 // Отступ справа (расстояние между вкладками) по умолчанию 3px.
}

<!-- Заголовок при наведении --> - эту строчку просто копируем и вставляем стиль к вашему табу, этот текст написан для расширения строки, чтобы она не сужалась при открытии вкладки.
[style].pws_tabs_container.new_name ul.pws_tabs_controll li a:hover{background:#203F57;color:#fff}[/style]

Расшифровка параметров:

{
   background: #203F57;   // Цвет бэкграунда неактивной вкладки при наведении
   color: #fff;           // Цвет шрифта при наведении
}

PWS Tabs jQuery Plugin позволяет прикреплять иконки к названиям вкладок. Эта возможность появилась благодаря подключению другого популярного плагина веб-иконок Font Awesome. Подробнее об его функциях здесь.

Как подключить иконку к названию вкладки?

1. Подбираем иконку на Font Awesome, щёлкаем на иконку, откроется страница с иконкой разных размеров.
2. Под картинками мы видим её оригинальное название, а вот ниже имеется HTML ссылка этой иконки.
3. Копируем эту ссылку <i class="fa fa-font-awesome" aria-hidden="true"></i>
4. Удаляем ненужный хвостик aria-hidden="true" (не обязательно) и заменяем двойные кавычки на одинарные.
5. В результате должно получиться так: <i class='fa fa-font-awesome'></i>
6. Вставляем её перед "Названием вкладки" в TNAME без пробелов.

Это общий код стилей для всего Таба (без вложенных вкладок). В коде забиты практически все возможные параметры.
Стилей всего 4 - Активная, Содержимое, Неактивные, При наведении.
Не забываем изменять название темы .new_name в стилях вкладок.

[style].pws_tabs_container.new_name ul.pws_tabs_controll li a.pws_tab_active{background:#1C354A;color:#FAE4ED;text-shadow: 1px 1px 2px #730F34;font-weight:700;padding:5px 20px;margin-right:3px;}.pws_tabs_container.new_name .pws_tabs_list{background:#1C354A;color:#fff;text-shadow: 1px 1px 2px #730F34;padding:20px;}.pws_tabs_container.new_name ul.pws_tabs_controll li a{background:#2D5779;color:white;padding:5px 20px;margin-right:3px;}.pws_tabs_container.new_name ul.pws_tabs_controll li a:hover{background:#203F57;color:#fff;}[/style]

Так удобнее сразу скопировать весь код стилей и удалять ненужное или править, чем вспоминать и дописывать.
Так же в помощь онлайн-сервисы по подбору сочетаний цветов: paletton.com и sessions.edu

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

[Yoti]

Там, по идее, табы-вкладки.

[in1975]

Yoti, И так на многих сайтах, например тут. Для всякого софта табы-вкладки очень удобно и красиво.
Хотелось бы и тут.

[ErikPshat]

Вот типа такого скрипта https://goo.gl/zTwP2L

[in1975]

Сообщение от ErikPshat Вот типа такого скрипта https://goo.gl/zTwP2L

Ну да. Для софта такие закладки - самое оно. Куча информации в минимальном размере.

[ErikPshat]

Вот посмотрел ещё другие дизайны, остановился ещё на нескольких:

• PWS Tabs jQuery Plugin - мне он больше всех понравился, но дизайн беловат. В моей цитате выше тоже неплохой.
• Making Accordions with the Tabs(jquery) - в рейтинге самый первый, но это Аккордеон, типа спойлеров.
• 28 ТАБОВ И ВКЛАДОК ДЛЯ САЙТА НА JQUERY - устаревшая тема, но всё же там можно посмотреть на демо.

А это рейтинг табов: http://www.htmldrive.net/categorys/s...s?sort=popular

[vash]

Ну вы пля прям художники с навыками программистов.

[ErikPshat]

PWS Tabs jQuery Plugin

PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива pwstabs.zip)

• PWS Tabs jQuery Plugin - плагин табов на оффсайте от автора Александр Чижов из Екатеринбурга.
• Исходники и релизы новых версий на GitHub

PWS Tabs Plugin поддерживает Font Awesome...

По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:

Опция	По умолчанию	Описание	Доступные настройки	Тип
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	Выравнивание по правому краю	true/false	логически

Предварительно: если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу).

[tname="effect:scale, defaultTab:1, containerWidth:100%, tabsPosition:horizontal, horizontalPosition:top, verticalPosition:left, theme:pws_theme_grey"]

[tab-name="Название_вкладки_1"]Содержимое_вкладки_1[/tab-name]
[tab-name="Название_вкладки_2"]Содержимое_вкладки_2[/tab-name]
[tab-name="Название_вкладки_3"]Содержимое_вкладки_3[/tab-name]

[/tname]

После создания табов необходимо удалить все переносы на новую строку!

Font Awesome v4.7

• Font Awesome v4.7 - это такой шрифт, где вместо букв иконки в векторной графике SVG, не теряющие качества при масштабировании.
• Тут можно выбирать Названия иконок и тут Примеры их использования.
• Исходники и релизы новых версий на GitHub
• Здесь можно посмотреть всё то же самое на русском.

PWS Tabs jQuery Plugin

PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива pwstabs.zip)

• PWS Tabs jQuery Plugin - плагин табов на оффсайте от автора Александр Чижов из Екатеринбурга.
• Исходники и релизы новых версий на GitHub

Предварительно: если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу).

[tname="effect:scale, defaultTab:1, containerWidth:100%, tabsPosition:horizontal, horizontalPosition:top, verticalPosition:left, theme:pws_theme_grey"]

[tab-name="Название_вкладки_1"]Содержимое_вкладки_1[/tab-name]
[tab-name="Название_вкладки_2"]Содержимое_вкладки_2[/tab-name]
[tab-name="Название_вкладки_3"]Содержимое_вкладки_3[/tab-name]

[/tname]

После создания табов необходимо удалить все переносы на новую строку!

Font Awesome v4.7

• Font Awesome v4.7 - это такой шрифт, где вместо букв иконки в векторной графике SVG, не теряющие качества при масштабировании.
• Тут можно выбирать Названия иконок и тут Примеры их использования.
• Исходники и релизы новых версий на GitHub
• Здесь можно посмотреть всё то же самое на русском.

Не пойму, что не так?

[in1975]

ты про адаптивный?

[ErikPshat]

in1975, у меня так же было. Но когда я заполнил немного текстом первую вкладку Адаптивну, тогда эти выползающие надписи пропали.

Ну главное завелось и работает!
Теперь нужно только с функциями и оформлением разобраться. Что-то мне не нравится этот белый фон.

А потом придётся ещё попариться, нарисовать кнопки для панели редактирования, залить их, вставить коды в шаблоны и написать к кнопкам инструкцию по использованию

Смотри первый пункт. А кавычки одинарные нужны!

[in1975]

опять дело в уникальном имени?

Смотри первый пункт. А кавычки одинарные нужны!

[in1975]

ErikPshat, а если сослаться на несуществующую вкладку, то текста по умолчанию не будет.

[in1975]

PWS Tabs jQuery Plugin

PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива pwstabs.zip)

• PWS Tabs jQuery Plugin - плагин табов на оффсайте от автора Александр Чижов из Екатеринбурга.
• Исходники и релизы новых версий на GitHub

PWS Tabs Plugin поддерживает Font Awesome...

По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:

Опция	Умолчания	Описание	Доступные настройки	Тип
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_dark_violet pws_theme_green/pws_theme_dark_green pws_theme_yellow/pws_theme_dark_yellow pws_theme_gold/pws_theme_dark_gold pws_theme_orange/pws_theme_dark_orange pws_theme_red/pws_theme_dark_red pws_theme_purple/pws_theme_dark_purple pws_theme_grey/pws_theme_dark_grey	строка
responsive	false	!!БЕТА!! Адаптивные вкладки	true/false	строка
rtl	false	По правому краю	true/false	строка

Предварительно: если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу).

[tname="effect:scale, defaultTab:1, containerWidth:100%, tabsPosition:horizontal, horizontalPosition:top, verticalPosition:left, theme:pws_theme_grey"]

[tab-name="Название_вкладки_1"]Содержимое_вкладки_1[/tab-name]
[tab-name="Название_вкладки_2"]Содержимое_вкладки_2[/tab-name]
[tab-name="Название_вкладки_3"]Содержимое_вкладки_3[/tab-name]

[/tname]

После создания табов необходимо удалить все переносы на новую строку!

Font Awesome v4.7

• Font Awesome v4.7 - это такой шрифт, где вместо букв иконки в векторной графике SVG, не теряющие качества при масштабировании.
• Тут можно выбирать Названия иконок и тут Примеры их использования.
• Исходники и релизы новых версий на GitHub
• Здесь можно посмотреть всё то же самое на русском.

PWS Tabs jQuery Plugin

PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива pwstabs.zip)

• PWS Tabs jQuery Plugin - плагин табов на оффсайте от автора Александр Чижов из Екатеринбурга.
• Исходники и релизы новых версий на GitHub

По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:

Опция	Умолчания	Описание	Доступные настройки	Тип
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_dark_violet pws_theme_green/pws_theme_dark_green pws_theme_yellow/pws_theme_dark_yellow pws_theme_gold/pws_theme_dark_gold pws_theme_orange/pws_theme_dark_orange pws_theme_red/pws_theme_dark_red pws_theme_purple/pws_theme_dark_purple pws_theme_grey/pws_theme_dark_grey	строка
responsive	false	!!БЕТА!! Адаптивные вкладки	true/false	строка
rtl	false	По правому краю	true/false	строка

Предварительно: если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу).

[tname="effect:scale, defaultTab:1, containerWidth:100%, tabsPosition:horizontal, horizontalPosition:top, verticalPosition:left, theme:pws_theme_grey"]

[tab-name="Название_вкладки_1"]Содержимое_вкладки_1[/tab-name]
[tab-name="Название_вкладки_2"]Содержимое_вкладки_2[/tab-name]
[tab-name="Название_вкладки_3"]Содержимое_вкладки_3[/tab-name]

[/tname]

После создания табов необходимо удалить все переносы на новую строку!

Font Awesome v4.7

• Font Awesome v4.7 - это такой шрифт, где вместо букв иконки в векторной графике SVG, не теряющие качества при масштабировании.
• Тут можно выбирать Названия иконок и тут Примеры их использования.
• Исходники и релизы новых версий на GitHub
• Здесь можно посмотреть всё то же самое на русском.

На содержимое не смотри, как тебе общий фон? Вроде норм работает и декор и вкладки.

[ErikPshat]

А вообще в декоре тоже смотрится отлично, получается как одни моноблок.
Только декор думаю лучше скрывать, т.е. отступы от таба убирать. Ну это на вкус и цвет дизайнера.

Насчёт margin действительно в некоторых разделах форум игнорирует любые твои настройки.
Сделал ещё пару тем первых cyan и violet. Залить побаловаться?

[in1975]

Сообщение от ErikPshat Залить побаловаться?

не стесняйся, потом все лишнее удалим

[ErikPshat]

pws_theme_cyan - в таблице этот цвет не был указан и в шаблоне его не было, добавлено.

PWS Tabs jQuery Plugin

PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива pwstabs.zip)

• PWS Tabs jQuery Plugin - плагин табов на оффсайте от автора Александр Чижов из Екатеринбурга.
• Исходники и релизы новых версий на GitHub

PWS Tabs Plugin поддерживает Font Awesome...

По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:

Опция	Умолчания	Описание	Доступные настройки	Тип
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_cyan/pws_theme_dark_cyan pws_theme_violet/pws_theme_dark_violet pws_theme_green/pws_theme_dark_green pws_theme_yellow/pws_theme_dark_yellow pws_theme_gold/pws_theme_dark_gold pws_theme_orange/pws_theme_dark_orange pws_theme_red/pws_theme_dark_red pws_theme_purple/pws_theme_dark_purple pws_theme_grey/pws_theme_dark_grey	строка
responsive	false	!!БЕТА!! Адаптивные вкладки	true/false	строка
rtl	false	По правому краю	true/false	строка

Предварительно: если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу).

[tname="effect:scale, defaultTab:1, containerWidth:100%, tabsPosition:horizontal, horizontalPosition:top, verticalPosition:left, theme:pws_theme_grey"]

[tab-name="Название_вкладки_1"]Содержимое_вкладки_1[/tab-name]
[tab-name="Название_вкладки_2"]Содержимое_вкладки_2[/tab-name]
[tab-name="Название_вкладки_3"]Содержимое_вкладки_3[/tab-name]

[/tname]

После создания табов необходимо удалить все переносы на новую строку!

Font Awesome v4.7

• Font Awesome v4.7 - это такой шрифт, где вместо букв иконки в векторной графике SVG, не теряющие качества при масштабировании.
• Тут можно выбирать Названия иконок и тут Примеры их использования.
• Исходники и релизы новых версий на GitHub
• Здесь можно посмотреть всё то же самое на русском.

PWS Tabs jQuery Plugin

PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива pwstabs.zip)

• PWS Tabs jQuery Plugin - плагин табов на оффсайте от автора Александр Чижов из Екатеринбурга.
• Исходники и релизы новых версий на GitHub

По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:

Опция	Умолчания	Описание	Доступные настройки	Тип
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_cyan/pws_theme_dark_cyan pws_theme_violet/pws_theme_dark_violet pws_theme_green/pws_theme_dark_green pws_theme_yellow/pws_theme_dark_yellow pws_theme_gold/pws_theme_dark_gold pws_theme_orange/pws_theme_dark_orange pws_theme_red/pws_theme_dark_red pws_theme_purple/pws_theme_dark_purple pws_theme_grey/pws_theme_dark_grey	строка
responsive	false	!!БЕТА!! Адаптивные вкладки	true/false	строка
rtl	false	По правому краю	true/false	строка

Предварительно: если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу).

[tname="effect:scale, defaultTab:1, containerWidth:100%, tabsPosition:horizontal, horizontalPosition:top, verticalPosition:left, theme:pws_theme_grey"]

[tab-name="Название_вкладки_1"]Содержимое_вкладки_1[/tab-name]
[tab-name="Название_вкладки_2"]Содержимое_вкладки_2[/tab-name]
[tab-name="Название_вкладки_3"]Содержимое_вкладки_3[/tab-name]

[/tname]

После создания табов необходимо удалить все переносы на новую строку!

Font Awesome v4.7

• Font Awesome v4.7 - это такой шрифт, где вместо букв иконки в векторной графике SVG, не теряющие качества при масштабировании.
• Тут можно выбирать Названия иконок и тут Примеры их использования.
• Исходники и релизы новых версий на GitHub
• Здесь можно посмотреть всё то же самое на русском.

PWS Tabs jQuery Plugin

PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива pwstabs.zip)

• PWS Tabs jQuery Plugin - плагин табов на оффсайте от автора Александр Чижов из Екатеринбурга.
• Исходники и релизы новых версий на GitHub

PWS Tabs Plugin поддерживает Font Awesome...

По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:

Опция	Умолчания	Описание	Доступные настройки	Тип
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_cyan/pws_theme_dark_cyan pws_theme_violet/pws_theme_dark_violet pws_theme_green/pws_theme_dark_green pws_theme_yellow/pws_theme_dark_yellow pws_theme_gold/pws_theme_dark_gold pws_theme_orange/pws_theme_dark_orange pws_theme_red/pws_theme_dark_red pws_theme_purple/pws_theme_dark_purple pws_theme_grey/pws_theme_dark_grey	строка
responsive	false	!!БЕТА!! Адаптивные вкладки	true/false	строка
rtl	false	По правому краю	true/false	строка

Предварительно: если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу).

[tname="effect:scale, defaultTab:1, containerWidth:100%, tabsPosition:horizontal, horizontalPosition:top, verticalPosition:left, theme:pws_theme_grey"]

[tab-name="Название_вкладки_1"]Содержимое_вкладки_1[/tab-name]
[tab-name="Название_вкладки_2"]Содержимое_вкладки_2[/tab-name]
[tab-name="Название_вкладки_3"]Содержимое_вкладки_3[/tab-name]

[/tname]

После создания табов необходимо удалить все переносы на новую строку!

Font Awesome v4.7

• Font Awesome v4.7 - это такой шрифт, где вместо букв иконки в векторной графике SVG, не теряющие качества при масштабировании.
• Тут можно выбирать Названия иконок и тут Примеры их использования.
• Исходники и релизы новых версий на GitHub
• Здесь можно посмотреть всё то же самое на русском.

PWS Tabs jQuery Plugin

PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива pwstabs.zip)

• PWS Tabs jQuery Plugin - плагин табов на оффсайте от автора Александр Чижов из Екатеринбурга.
• Исходники и релизы новых версий на GitHub

По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:

Опция	Умолчания	Описание	Доступные настройки	Тип
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_cyan/pws_theme_dark_cyan pws_theme_violet/pws_theme_dark_violet pws_theme_green/pws_theme_dark_green pws_theme_yellow/pws_theme_dark_yellow pws_theme_gold/pws_theme_dark_gold pws_theme_orange/pws_theme_dark_orange pws_theme_red/pws_theme_dark_red pws_theme_purple/pws_theme_dark_purple pws_theme_grey/pws_theme_dark_grey	строка
responsive	false	!!БЕТА!! Адаптивные вкладки	true/false	строка
rtl	false	По правому краю	true/false	строка

Предварительно: если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу).

[tname="effect:scale, defaultTab:1, containerWidth:100%, tabsPosition:horizontal, horizontalPosition:top, verticalPosition:left, theme:pws_theme_grey"]

[tab-name="Название_вкладки_1"]Содержимое_вкладки_1[/tab-name]
[tab-name="Название_вкладки_2"]Содержимое_вкладки_2[/tab-name]
[tab-name="Название_вкладки_3"]Содержимое_вкладки_3[/tab-name]

[/tname]

После создания табов необходимо удалить все переносы на новую строку!

Font Awesome v4.7

• Font Awesome v4.7 - это такой шрифт, где вместо букв иконки в векторной графике SVG, не теряющие качества при масштабировании.
• Тут можно выбирать Названия иконок и тут Примеры их использования.
• Исходники и релизы новых версий на GitHub
• Здесь можно посмотреть всё то же самое на русском.

---

pws_theme_dark_cyan - в таблице этот цвет не был указан, добавлено.

PWS Tabs jQuery Plugin

PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива pwstabs.zip)

• PWS Tabs jQuery Plugin - плагин табов на оффсайте от автора Александр Чижов из Екатеринбурга.
• Исходники и релизы новых версий на GitHub

PWS Tabs Plugin поддерживает Font Awesome...

По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:

Опция	Умолчания	Описание	Доступные настройки	Тип
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_cyan/pws_theme_dark_cyan pws_theme_violet/pws_theme_dark_violet pws_theme_green/pws_theme_dark_green pws_theme_yellow/pws_theme_dark_yellow pws_theme_gold/pws_theme_dark_gold pws_theme_orange/pws_theme_dark_orange pws_theme_red/pws_theme_dark_red pws_theme_purple/pws_theme_dark_purple pws_theme_grey/pws_theme_dark_grey	строка
responsive	false	!!БЕТА!! Адаптивные вкладки	true/false	строка
rtl	false	По правому краю	true/false	строка

Предварительно: если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу).

[tname="effect:scale, defaultTab:1, containerWidth:100%, tabsPosition:horizontal, horizontalPosition:top, verticalPosition:left, theme:pws_theme_grey"]

[tab-name="Название_вкладки_1"]Содержимое_вкладки_1[/tab-name]
[tab-name="Название_вкладки_2"]Содержимое_вкладки_2[/tab-name]
[tab-name="Название_вкладки_3"]Содержимое_вкладки_3[/tab-name]

[/tname]

После создания табов необходимо удалить все переносы на новую строку!

Font Awesome v4.7

• Font Awesome v4.7 - это такой шрифт, где вместо букв иконки в векторной графике SVG, не теряющие качества при масштабировании.
• Тут можно выбирать Названия иконок и тут Примеры их использования.
• Исходники и релизы новых версий на GitHub
• Здесь можно посмотреть всё то же самое на русском.

PWS Tabs jQuery Plugin

PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива pwstabs.zip)

• PWS Tabs jQuery Plugin - плагин табов на оффсайте от автора Александр Чижов из Екатеринбурга.
• Исходники и релизы новых версий на GitHub

По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:

Опция	Умолчания	Описание	Доступные настройки	Тип
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_cyan/pws_theme_dark_cyan pws_theme_violet/pws_theme_dark_violet pws_theme_green/pws_theme_dark_green pws_theme_yellow/pws_theme_dark_yellow pws_theme_gold/pws_theme_dark_gold pws_theme_orange/pws_theme_dark_orange pws_theme_red/pws_theme_dark_red pws_theme_purple/pws_theme_dark_purple pws_theme_grey/pws_theme_dark_grey	строка
responsive	false	!!БЕТА!! Адаптивные вкладки	true/false	строка
rtl	false	По правому краю	true/false	строка

Предварительно: если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу).

[tname="effect:scale, defaultTab:1, containerWidth:100%, tabsPosition:horizontal, horizontalPosition:top, verticalPosition:left, theme:pws_theme_grey"]

[tab-name="Название_вкладки_1"]Содержимое_вкладки_1[/tab-name]
[tab-name="Название_вкладки_2"]Содержимое_вкладки_2[/tab-name]
[tab-name="Название_вкладки_3"]Содержимое_вкладки_3[/tab-name]

[/tname]

После создания табов необходимо удалить все переносы на новую строку!

Font Awesome v4.7

• Font Awesome v4.7 - это такой шрифт, где вместо букв иконки в векторной графике SVG, не теряющие качества при масштабировании.
• Тут можно выбирать Названия иконок и тут Примеры их использования.
• Исходники и релизы новых версий на GitHub
• Здесь можно посмотреть всё то же самое на русском.

PWS Tabs jQuery Plugin

PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива pwstabs.zip)

• PWS Tabs jQuery Plugin - плагин табов на оффсайте от автора Александр Чижов из Екатеринбурга.
• Исходники и релизы новых версий на GitHub

PWS Tabs Plugin поддерживает Font Awesome...

По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:

Опция	Умолчания	Описание	Доступные настройки	Тип
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_cyan/pws_theme_dark_cyan pws_theme_violet/pws_theme_dark_violet pws_theme_green/pws_theme_dark_green pws_theme_yellow/pws_theme_dark_yellow pws_theme_gold/pws_theme_dark_gold pws_theme_orange/pws_theme_dark_orange pws_theme_red/pws_theme_dark_red pws_theme_purple/pws_theme_dark_purple pws_theme_grey/pws_theme_dark_grey	строка
responsive	false	!!БЕТА!! Адаптивные вкладки	true/false	строка
rtl	false	По правому краю	true/false	строка

Предварительно: если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу).

[tname="effect:scale, defaultTab:1, containerWidth:100%, tabsPosition:horizontal, horizontalPosition:top, verticalPosition:left, theme:pws_theme_grey"]

[tab-name="Название_вкладки_1"]Содержимое_вкладки_1[/tab-name]
[tab-name="Название_вкладки_2"]Содержимое_вкладки_2[/tab-name]
[tab-name="Название_вкладки_3"]Содержимое_вкладки_3[/tab-name]

[/tname]

После создания табов необходимо удалить все переносы на новую строку!

Font Awesome v4.7

• Font Awesome v4.7 - это такой шрифт, где вместо букв иконки в векторной графике SVG, не теряющие качества при масштабировании.
• Тут можно выбирать Названия иконок и тут Примеры их использования.
• Исходники и релизы новых версий на GitHub
• Здесь можно посмотреть всё то же самое на русском.

PWS Tabs jQuery Plugin

PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива pwstabs.zip)

• PWS Tabs jQuery Plugin - плагин табов на оффсайте от автора Александр Чижов из Екатеринбурга.
• Исходники и релизы новых версий на GitHub

По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:

Опция	Умолчания	Описание	Доступные настройки	Тип
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_cyan/pws_theme_dark_cyan pws_theme_violet/pws_theme_dark_violet pws_theme_green/pws_theme_dark_green pws_theme_yellow/pws_theme_dark_yellow pws_theme_gold/pws_theme_dark_gold pws_theme_orange/pws_theme_dark_orange pws_theme_red/pws_theme_dark_red pws_theme_purple/pws_theme_dark_purple pws_theme_grey/pws_theme_dark_grey	строка
responsive	false	!!БЕТА!! Адаптивные вкладки	true/false	строка
rtl	false	По правому краю	true/false	строка

Предварительно: если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу).

[tname="effect:scale, defaultTab:1, containerWidth:100%, tabsPosition:horizontal, horizontalPosition:top, verticalPosition:left, theme:pws_theme_grey"]

[tab-name="Название_вкладки_1"]Содержимое_вкладки_1[/tab-name]
[tab-name="Название_вкладки_2"]Содержимое_вкладки_2[/tab-name]
[tab-name="Название_вкладки_3"]Содержимое_вкладки_3[/tab-name]

[/tname]

После создания табов необходимо удалить все переносы на новую строку!

Font Awesome v4.7

• Font Awesome v4.7 - это такой шрифт, где вместо букв иконки в векторной графике SVG, не теряющие качества при масштабировании.
• Тут можно выбирать Названия иконок и тут Примеры их использования.
• Исходники и релизы новых версий на GitHub
• Здесь можно посмотреть всё то же самое на русском.

[in1975]

циан норм, а вот виолет мне кажется немного глаза режет. Может потемнее?

[ErikPshat]

in1975, то есть, цвет фона сделать цветом вкладок, а вкладки сделать цветом фона.

Добавил выше для сравнения стандартный Light Cyan и Light Violet. Они на белом фоне.
А декор мне понравился, он ещё не даёт разъезжаться адаптивной вкладке.

[in1975]

Сообщение от ErikPshat in1975, то есть, цвет фона сделать цветом вкладок, а вкладки сделать цветом фона.

да, попробуй

Светлые темы с белым нормально выглядят.

[ErikPshat]

in1975, ну просто у нас вначале было всё логично. Один тег мы вставляем несколько раз между другим тегом, как и должно быть.
А теперь у нас получается нелогично, хотя более проще. Это мы с тобой понимаем, а вот vash придёт и нифига не поймёт, не говоря уже о простоюзерах Ты сам хоть пробовал конструкцию и понял, как она работает и удобно ли?

Ну ладно, тогда теперь переименовываем теги так:

• toptions - так и остаётся.
• tname - теперь на втором месте.
• tend или theend или tclose - будет последней пустышкой. Думаю первое.

Потом придётся все наши табы подправлять, иначе развалются. В tid удалять все ID.
А я ещё не спал и сделал все DARK темы и ещё добавил тему BLACK залью попозже...