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