BB-коды форума Здесь всё, что касается оформления форума, тем и сообщений.
04.05.2017, 06:28
Сообщение: #1 (1114697)
Модель консоли: PS3 SS
Прошивка: HFW 4.91.2
Регистрация: 10.04.2016
Возраст: 48
Сообщений: 26,796
Вы сказали Спасибо: 10,071
Поблагодарили 14,029 раз(а) в 6,277 сообщениях
Сила репутации:
10 Репутация: 13917  
(репутация неоспорима)
PWS Tabs jQuery Plugin - Табы со множеством вкладок на форуме
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 )
Синтаксис - если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу). Кнопки в расширенном режиме редактирования:
- TOPTIONS (указываем опции из таблицы)
- TNAME (указываем название табов и содержимое вкладки)
- 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 в названии новой темы и в стилях , иначе будет подхватываться настройка внешнего Таба.
Также можно воспользоваться
онлайн-генераторами для создания закладок.
Копируем получившийся код и редактируем под закладки:
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 {и далее берем из кода...}
как выглядит результат
Так это выглядит
Довольно прикольно
Фон под текстом тоже можно менять, смотрите выше
<!-- Глобальные параметры на весь контейнер -->
[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. Подробнее об его функциях
здесь .
Как подключить иконку к названию вкладки? Подбираем иконку на Font Awesome , щёлкаем на иконку, откроется страница с иконкой разных размеров.
Под картинками мы видим её оригинальное название, а вот ниже имеется HTML ссылка этой иконки.
Копируем эту ссылку <i class="fa fa-font-awesome" aria-hidden="true"></i>
Удаляем ненужный хвостик aria-hidden="true" (не обязательно) и заменяем двойные кавычки на одинарные.
В результате должно получиться так: <i class='fa fa-font-awesome'></i>
Вставляем её перед "Названием вкладки" в 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
Вложения
Чтобы загружать вложения у Вас должно быть больше, чем 0 сообщений. А у Вас 0 сообщений.
Последний раз редактировалось ErikPshat; 22.10.2020 в 04:52 .
Эти 5 пользователя(ей) сказали Спасибо in1975 за это полезное сообщение:
04.05.2017, 12:03
Сообщение: #2 (1114702)
Модель консоли: PSP-1004
Прошивка: 6.61 PROMOD-C2p
Другие консоли: Все PSP, все PSV, SCPH-1002, SCPH-102, SCPH-77008, CECH-4208C, SCPH-1000R
Регистрация: 19.03.2008
Адрес: Россия
Сообщений: 5,734
Вы сказали Спасибо: 819
Поблагодарили 3,835 раз(а) в 2,013 сообщениях
Сила репутации:
1 Репутация: 3835  
(репутация неоспорима)
Там, по идее, табы-вкладки.
04.05.2017, 12:31
Сообщение: #3 (1114704)
Модель консоли: PS3 SS
Прошивка: HFW 4.91.2
Регистрация: 10.04.2016
Возраст: 48
Сообщений: 26,796
Вы сказали Спасибо: 10,071
Поблагодарили 14,029 раз(а) в 6,277 сообщениях
Сила репутации:
10 Репутация: 13917  
(репутация неоспорима)
Yoti , И так на многих сайтах,
например тут . Для всякого софта табы-вкладки очень удобно и красиво.
Хотелось бы и тут.
04.05.2017, 17:41
Сообщение: #4 (1114711)
Модель консоли: PSP-1004
Прошивка: 6.60 PROMOD
Другие консоли: iPad 3 WiFi
Регистрация: 18.12.2006
Адрес: Москва
Возраст: 57
Сообщений: 46,263
Вы сказали Спасибо: 27,000
Поблагодарили 42,549 раз(а) в 12,174 сообщениях
Сила репутации:
10 Репутация: 41744  
(репутация неоспорима)
Последний раз редактировалось ErikPshat; 22.05.2017 в 04:55 .
Этот пользователь сказал Спасибо ErikPshat за это полезное сообщение:
05.05.2017, 04:55
Сообщение: #5 (1114752)
Модель консоли: PS3 SS
Прошивка: HFW 4.91.2
Регистрация: 10.04.2016
Возраст: 48
Сообщений: 26,796
Вы сказали Спасибо: 10,071
Поблагодарили 14,029 раз(а) в 6,277 сообщениях
Сила репутации:
10 Репутация: 13917  
(репутация неоспорима)
Сообщение от
ErikPshat
Ну да. Для софта такие закладки - самое оно. Куча информации в минимальном размере.
05.05.2017, 20:16
Сообщение: #6 (1114799)
Модель консоли: PSP-1004
Прошивка: 6.60 PROMOD
Другие консоли: iPad 3 WiFi
Регистрация: 18.12.2006
Адрес: Москва
Возраст: 57
Сообщений: 46,263
Вы сказали Спасибо: 27,000
Поблагодарили 42,549 раз(а) в 12,174 сообщениях
Сила репутации:
10 Репутация: 41744  
(репутация неоспорима)
Последний раз редактировалось ErikPshat; 22.05.2017 в 04:56 .
08.05.2017, 07:19
Сообщение: #7 (1114870)
Модель консоли: PSP-1008
Прошивка: 6.60 ME-1.8
Другие консоли: Тетрис, пятнашки, кубики...
Регистрация: 02.02.2008
Адрес: Нижний Новгород
Сообщений: 5,697
Вы сказали Спасибо: 3,370
Поблагодарили 2,027 раз(а) в 1,314 сообщениях
Сила репутации:
1 Репутация: 2020  
(репутация неоспорима)
Ну вы пля прям художники с навыками программистов.
09.05.2017, 16:03
Сообщение: #8 (1114930)
Модель консоли: PSP-1004
Прошивка: 6.60 PROMOD
Другие консоли: iPad 3 WiFi
Регистрация: 18.12.2006
Адрес: Москва
Возраст: 57
Сообщений: 46,263
Вы сказали Спасибо: 27,000
Поблагодарили 42,549 раз(а) в 12,174 сообщениях
Сила репутации:
10 Репутация: 41744  
(репутация неоспорима)
PWS Tabs jQuery Plugin
PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива
pwstabs.zip )
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]
После создания табов необходимо удалить все переносы на новую строку!
PWS Tabs jQuery Plugin
PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива
pwstabs.zip )
Предварительно: если не писать параметр, то будет автоматически применяться параметр по умолчанию (см. таблицу).
[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]
После создания табов необходимо удалить все переносы на новую строку!
Не пойму, что не так?
Последний раз редактировалось ErikPshat; 11.05.2017 в 09:49 .
09.05.2017, 16:04
Сообщение: #9 (1114931)
Модель консоли: PS3 SS
Прошивка: HFW 4.91.2
Регистрация: 10.04.2016
Возраст: 48
Сообщений: 26,796
Вы сказали Спасибо: 10,071
Поблагодарили 14,029 раз(а) в 6,277 сообщениях
Сила репутации:
10 Репутация: 13917  
(репутация неоспорима)
09.05.2017, 16:34
Сообщение: #10 (1114935)
Модель консоли: PSP-1004
Прошивка: 6.60 PROMOD
Другие консоли: iPad 3 WiFi
Регистрация: 18.12.2006
Адрес: Москва
Возраст: 57
Сообщений: 46,263
Вы сказали Спасибо: 27,000
Поблагодарили 42,549 раз(а) в 12,174 сообщениях
Сила репутации:
10 Репутация: 41744  
(репутация неоспорима)
in1975 , у меня так же было. Но когда я заполнил немного текстом первую вкладку Адаптивну, тогда эти выползающие надписи пропали.
Ну главное завелось и работает!
Теперь нужно только с функциями и оформлением разобраться. Что-то мне не нравится этот белый фон.
А потом придётся ещё попариться, нарисовать кнопки для панели редактирования, залить их, вставить коды в шаблоны и написать к кнопкам инструкцию по использованию
Смотри первый пункт. А кавычки одинарные нужны!
Последний раз редактировалось ErikPshat; 11.05.2017 в 09:47 .
Этот пользователь сказал Спасибо ErikPshat за это полезное сообщение:
10.05.2017, 03:22
Сообщение: #11 (1114958)
Модель консоли: PS3 SS
Прошивка: HFW 4.91.2
Регистрация: 10.04.2016
Возраст: 48
Сообщений: 26,796
Вы сказали Спасибо: 10,071
Поблагодарили 14,029 раз(а) в 6,277 сообщениях
Сила репутации:
10 Репутация: 13917  
(репутация неоспорима)
опять дело в уникальном имени?
Смотри первый пункт. А кавычки одинарные нужны!
Последний раз редактировалось ErikPshat; 11.05.2017 в 09:41 .
10.05.2017, 11:00
Сообщение: #12 (1114963)
Модель консоли: PS3 SS
Прошивка: HFW 4.91.2
Регистрация: 10.04.2016
Возраст: 48
Сообщений: 26,796
Вы сказали Спасибо: 10,071
Поблагодарили 14,029 раз(а) в 6,277 сообщениях
Сила репутации:
10 Репутация: 13917  
(репутация неоспорима)
ErikPshat , а если сослаться на несуществующую вкладку, то текста по умолчанию не будет.
10.05.2017, 15:00
Сообщение: #13 (1114974)
Модель консоли: PS3 SS
Прошивка: HFW 4.91.2
Регистрация: 10.04.2016
Возраст: 48
Сообщений: 26,796
Вы сказали Спасибо: 10,071
Поблагодарили 14,029 раз(а) в 6,277 сообщениях
Сила репутации:
10 Репутация: 13917  
(репутация неоспорима)
PWS Tabs jQuery Plugin
PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива
pwstabs.zip )
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]
После создания табов необходимо удалить все переносы на новую строку!
PWS Tabs jQuery Plugin
PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива
pwstabs.zip )
По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:
Опция
Умолчания
Описание
Доступные настройки
Тип
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]
После создания табов необходимо удалить все переносы на новую строку!
На содержимое не смотри, как тебе общий фон? Вроде норм работает и декор и вкладки.
Последний раз редактировалось ErikPshat; 12.05.2017 в 05:24 .
10.05.2017, 16:12
Сообщение: #14 (1114979)
Модель консоли: PSP-1004
Прошивка: 6.60 PROMOD
Другие консоли: iPad 3 WiFi
Регистрация: 18.12.2006
Адрес: Москва
Возраст: 57
Сообщений: 46,263
Вы сказали Спасибо: 27,000
Поблагодарили 42,549 раз(а) в 12,174 сообщениях
Сила репутации:
10 Репутация: 41744  
(репутация неоспорима)
А вообще в декоре тоже смотрится отлично, получается как одни моноблок.
Только декор думаю лучше скрывать, т.е. отступы от таба убирать. Ну это на вкус и цвет дизайнера.
Насчёт margin действительно в некоторых разделах форум игнорирует любые твои настройки.
Сделал ещё пару тем первых cyan и violet. Залить побаловаться?
Этот пользователь сказал Спасибо ErikPshat за это полезное сообщение:
10.05.2017, 16:13
Сообщение: #15 (1114980)
Модель консоли: PS3 SS
Прошивка: HFW 4.91.2
Регистрация: 10.04.2016
Возраст: 48
Сообщений: 26,796
Вы сказали Спасибо: 10,071
Поблагодарили 14,029 раз(а) в 6,277 сообщениях
Сила репутации:
10 Репутация: 13917  
(репутация неоспорима)
Сообщение от
ErikPshat
Залить побаловаться?
не стесняйся, потом все лишнее удалим
10.05.2017, 16:56
Сообщение: #16 (1114982)
Модель консоли: PSP-1004
Прошивка: 6.60 PROMOD
Другие консоли: iPad 3 WiFi
Регистрация: 18.12.2006
Адрес: Москва
Возраст: 57
Сообщений: 46,263
Вы сказали Спасибо: 27,000
Поблагодарили 42,549 раз(а) в 12,174 сообщениях
Сила репутации:
10 Репутация: 41744  
(репутация неоспорима)
pws_theme_cyan - в таблице этот цвет не был указан и в шаблоне его не было, добавлено.
PWS Tabs jQuery Plugin
PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива
pwstabs.zip )
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]
После создания табов необходимо удалить все переносы на новую строку!
PWS Tabs jQuery Plugin
PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива
pwstabs.zip )
По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:
Опция
Умолчания
Описание
Доступные настройки
Тип
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]
После создания табов необходимо удалить все переносы на новую строку!
PWS Tabs jQuery Plugin
PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива
pwstabs.zip )
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]
После создания табов необходимо удалить все переносы на новую строку!
PWS Tabs jQuery Plugin
PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива
pwstabs.zip )
По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:
Опция
Умолчания
Описание
Доступные настройки
Тип
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]
После создания табов необходимо удалить все переносы на новую строку!
pws_theme_dark_cyan - в таблице этот цвет не был указан, добавлено.
PWS Tabs jQuery Plugin
PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива
pwstabs.zip )
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]
После создания табов необходимо удалить все переносы на новую строку!
PWS Tabs jQuery Plugin
PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива
pwstabs.zip )
По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:
Опция
Умолчания
Описание
Доступные настройки
Тип
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]
После создания табов необходимо удалить все переносы на новую строку!
PWS Tabs jQuery Plugin
PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива
pwstabs.zip )
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]
После создания табов необходимо удалить все переносы на новую строку!
PWS Tabs jQuery Plugin
PWS Tabs адаптивный, функциональный jQuery плагин, с интересными эффектами переключения вкладок выполненных с CSS3.
(readme.ru внутри архива
pwstabs.zip )
По таблице берём нужные функции и вписываем через запятую по очереди во второй тег:
Опция
Умолчания
Описание
Доступные настройки
Тип
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]
После создания табов необходимо удалить все переносы на новую строку!
Вложения
Чтобы загружать вложения у Вас должно быть больше, чем 0 сообщений. А у Вас 0 сообщений.
Последний раз редактировалось ErikPshat; 23.05.2017 в 23:51 .
Этот пользователь сказал Спасибо ErikPshat за это полезное сообщение:
10.05.2017, 17:36
Сообщение: #17 (1114984)
Модель консоли: PS3 SS
Прошивка: HFW 4.91.2
Регистрация: 10.04.2016
Возраст: 48
Сообщений: 26,796
Вы сказали Спасибо: 10,071
Поблагодарили 14,029 раз(а) в 6,277 сообщениях
Сила репутации:
10 Репутация: 13917  
(репутация неоспорима)
циан норм, а вот виолет мне кажется немного глаза режет. Может потемнее?
10.05.2017, 17:56
Сообщение: #18 (1114985)
Модель консоли: PSP-1004
Прошивка: 6.60 PROMOD
Другие консоли: iPad 3 WiFi
Регистрация: 18.12.2006
Адрес: Москва
Возраст: 57
Сообщений: 46,263
Вы сказали Спасибо: 27,000
Поблагодарили 42,549 раз(а) в 12,174 сообщениях
Сила репутации:
10 Репутация: 41744  
(репутация неоспорима)
in1975 , то есть, цвет фона сделать цветом вкладок, а вкладки сделать цветом фона.
Добавил выше для сравнения стандартный Light Cyan и Light Violet. Они на белом фоне.
А декор мне понравился, он ещё не даёт разъезжаться адаптивной вкладке.
10.05.2017, 17:58
Сообщение: #19 (1114986)
Модель консоли: PS3 SS
Прошивка: HFW 4.91.2
Регистрация: 10.04.2016
Возраст: 48
Сообщений: 26,796
Вы сказали Спасибо: 10,071
Поблагодарили 14,029 раз(а) в 6,277 сообщениях
Сила репутации:
10 Репутация: 13917  
(репутация неоспорима)
Сообщение от
ErikPshat
in1975, то есть, цвет фона сделать цветом вкладок, а вкладки сделать цветом фона.
да, попробуй
Светлые темы с белым нормально выглядят.
Этот пользователь сказал Спасибо in1975 за это полезное сообщение:
11.05.2017, 08:35
Сообщение: #20 (1115008)
Модель консоли: PSP-1004
Прошивка: 6.60 PROMOD
Другие консоли: iPad 3 WiFi
Регистрация: 18.12.2006
Адрес: Москва
Возраст: 57
Сообщений: 46,263
Вы сказали Спасибо: 27,000
Поблагодарили 42,549 раз(а) в 12,174 сообщениях
Сила репутации:
10 Репутация: 41744  
(репутация неоспорима)
in1975 , ну просто у нас вначале было всё логично. Один тег мы вставляем несколько раз между другим тегом, как и должно быть.
А теперь у нас получается нелогично, хотя более проще. Это мы с тобой понимаем, а вот vash придёт и нифига не поймёт, не говоря уже о простоюзерах
Ты сам хоть пробовал конструкцию и понял, как она работает и удобно ли?
Ну ладно, тогда теперь переименовываем теги так:
toptions - так и остаётся.
tname - теперь на втором месте.
tend или theend или tclose - будет последней пустышкой. Думаю первое.
Потом придётся все наши табы подправлять, иначе развалются. В tid удалять все ID.
А я ещё не спал и сделал все DARK темы и ещё добавил тему BLACK
залью попозже...
Этот пользователь сказал Спасибо ErikPshat за это полезное сообщение:
Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения
HTML код Выкл.
Текущее время: 03:33 . Часовой пояс GMT +3.
Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2024, vBulletin Solutions, Inc. Перевод:
zCarot
PSPx Forum - Сообщество фанатов игровых консолей.