PSPx форум
Страница 3 из 3 1 2 3
Показывать 40 сообщений этой темы на одной странице

PSPx форум (https://www.pspx.ru/forum/index.php)
-   BB-коды форума (https://www.pspx.ru/forum/forumdisplay.php?f=424)
-   -   PWS Tabs jQuery Plugin - Табы со множеством вкладок на форуме (https://www.pspx.ru/forum/showthread.php?t=106817)

ErikPshat 19.05.2017 21:58
Ещё тройка лучших онлайн-минифи-деминифи (Online JavaScript/CSS/HTML Compressor):
  1. https://cssresizer.com/ru/ (для вставки кода CSS нажимаем "Сжать текст", но там счётчик ожидания, чтобы сделать ещё раз)
  2. http://refresh-sf.com/
  3. http://csscompressor.com/

Цитата:
Сообщение от ErikPshat (Сообщение 1115352)
При желании, возможно темы на странице можно подключить как шрифты через стиль:
Код:
[style]@import url('attachment.php?attachmentid=12840');[/style]
Да, сейчас проверил, отлично работает в теме Font Awesome

in1975 20.05.2017 07:17
ErikPshat, ну да, темы нам не нужны.
Убрал из шапки ссылки на темы.
исходник, мало ли что

Опция
Умолчания
Описание
Параметр опции
Тип
theme:'pws_theme_cyan'Темы оформления вкладокLIGHT THEMES
pws_theme_cyan/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_black

PSPx THEMES
pws_theme_pspx_cyan/pws_theme_pspx_violet
pws_theme_pspx_green/pws_theme_pspx_yellow
pws_theme_pspx_gold/pws_theme_pspx_orange
pws_theme_pspx_red/pws_theme_pspx_purple
pws_theme_pspx_grey/pws_theme_pspx_black

DARK THEMES
pws_theme_dark_cyan/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/pws_theme_dark_black		строка

ErikPshat 24.05.2017 04:36
Вложений: 1
Theme "vertical dark grey"
[TOPTIONS="effect:'slideleft',tabsPosition:'vertical',theme:'vertical_dark_grey'"]VerticalGrayTheme[/TOPTIONS]
[TNAME="<i class='fa fa-home fa-lg fa-fw'></i>TOPTIONS"]Содержимое[/TNAME]
[TNAME="<i class='fa fa-bars fa-lg fa-fw'></i>TNAME"]Содержимое[/TNAME]
[TNAME="<i class='fa fa-cubes fa-lg fa-fw'></i>Style minify"]Содержимое[/TNAME]
[TNAME="<i class='fa fa-css3 fa-lg fa-fw'></i>Style CSS"]Содержимое[/TNAME]
[TNAME="<i class='fa fa-codepen fa-lg fa-fw'></i>Источник"]Содержимое[/TNAME]
[style].pws_tabs_container.vertical_dark_grey ul.pws_tabs_controll{background:#364150;width:15%!important}.pws_tabs_container. vertical_dark_grey .pws_tabs_list{padding:5px 15px;width:85%!important;background:transparent}.pws_tabs_container.vertical_dar k_grey ul.pws_tabs_controll li a.pws_tab_active{background:#2B3643}.pws_tabs_container.vertical_dark_grey ul.pws_tabs_controll li a:hover{background:#2B3643}.pws_tabs_container.vertical_dark_grey ul.pws_tabs_controll li a{background:#364150;margin:0;border-top:1px solid #3d4957;color:#b4bcc8;font-weight:300;font:14px 'Open Sans',sans-serif}[/style]
Используйте минификацию для удаления комментариев, переносов и лишних пробелов: https://cssresizer.com/ru/
Код:
/**
* ###########################
* vertical dark grey
* ###########################
*/

/* Глобальные параметры на весь контейнер, отвечает за Блок "Названия вкладок */
.pws_tabs_container.vertical_dark_grey ul.pws_tabs_controll {
  background: #364150;
  width: 15% !important;
}
/* Содержимое открытой вкладки */
.pws_tabs_container.vertical_dark_grey .pws_tabs_list {
  padding: 10px 15px;
  width: 85%!important;
  background: transparent;
}
/* Заголовок неактивной вкладки */
.pws_tabs_container.vertical_dark_grey ul.pws_tabs_controll li a {
  background: #364150;
  margin: 0;
  border-top: 1px solid #3d4957;
  color: #b4bcc8;
  font-weight: 300;
  font: 14px 'Open Sans',sans-serif;
}
/* Заголовок при наведении */
.pws_tabs_container.vertical_dark_grey ul.pws_tabs_controll li a:hover {
  background:#2B3643;
}
/* Заголовок активной вкладки */
.pws_tabs_container.vertical_dark_grey ul.pws_tabs_controll li a.pws_tab_active {
  background:#2B3643;
}

in1975 25.05.2017 12:38
Вложений: 5
примеры стилей для оформления тем (для импорта):

Вложение 12879 - тема
Вложение 12880 - тема
Вложение 12882 - тема
Вложение 12883 - тема
Вложение 12881 - тема

ErikPshat 25.05.2017 12:46
Вложений: 1
Тема "FAQ" by in1975


tabsPosition:'vertical',theme:'faq'
<i class='fa fa-folder-open-o'></i>Название вкладки
[style].pws_tabs_container.faq{margin:0 20px}.pws_tabs_container.faq ul.pws_tabs_controll{width:20%!important}.pws_tabs_container.faq .pws_tabs_list{width:80%!important;background:transparent;padding:5px 20px}.pws_tabs_container.faq ul.pws_tabs_controll li a{color:white;border-top:1px solid #96d1f8;background:-webkit-gradient(linear,left top,left bottom,from(#194c6e),to(#65a9d7));background:-moz-linear-gradient(top,#194c6e,#65a9d7);padding:5px 10px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:rgba(0,0,0,1)0 1px 0;-moz-box-shadow:rgba(0,0,0,1)0 1px 0;box-shadow:rgba(0,0,0,1)0 1px 0;text-shadow:rgba(0,0,0,.4)0 1px 0;font-size:14px;font-family:Georgia,Serif}.pws_tabs_container.faq ul.pws_tabs_controll li a:hover{color:white;background:#0061A8;border-top-color:#28597a}.pws_tabs_container.faq ul.pws_tabs_controll li a.pws_tab_active{color:yellow;background:#0061B8;border-top-color:#1b435e}[/style]
Код:
/**
* ###########################
* FAQ by in1975
* ###########################
*/

/* Отвечает за блок Контейнера снаружи */
.pws_tabs_container.faq {
  margin: 0 20px; /* отступ контейнера от края форума на 20px слева-справа */
}
/* Отвечает за Блок "Названия вкладок */
.pws_tabs_container.faq ul.pws_tabs_controll {
  width: 20% !important;
}
/* Содержимое открытой вкладки */
.pws_tabs_container.faq .pws_tabs_list {
  width: 80%!important;
  background: transparent;
  padding: 5px 20px;
}
/* Заголовок при наведении */
.pws_tabs_container.faq ul.pws_tabs_controll li a:hover {
  color: white;
  background: #0061A8;
  border-top-color: #28597a;
}
/* Заголовок активной вкладки */
.pws_tabs_container.faq ul.pws_tabs_controll li a.pws_tab_active {
  color: yellow;
  background: #0061B8;
  border-top-color: #1b435e;
}
/* Заголовок неактивной вкладки */
.pws_tabs_container.faq ul.pws_tabs_controll li a {
  color: white;
  border-top: 1px solid #96d1f8;
  background: -webkit-gradient(linear, left top, left bottom, from(#194c6e), to(#65a9d7));
  background: -moz-linear-gradient(top, #194c6e, #65a9d7);
  padding: 5px 10px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
  -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
  box-shadow: rgba(0,0,0,1) 0 1px 0;
  text-shadow: rgba(0,0,0,.4) 0 1px 0;
  font-size: 14px;
  font-family: Georgia, Serif;
}
Содержимое...
Содержимое...
Содержимое...

ErikPshat 01.06.2017 08:30
Можно к иконкам подвешивать всплывающие подсказки. Но подсказка будет показываться только при наведении на иконку.
Например, вставляешь в опцию TNAME иконку, а далее пишешь подсказку через параметр title='Подсказка'. Результат вот типа так:
  • <i class='fa fa-folder-open-o' title='Это всплывающая подсказка'></i>Название_Вкладки
А якорь не работает.
Код:
              _/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
            _/                                                          _/
            _/  _/_/_/_/_/  _/_/_/_/_/  _/_/_/_/_/                  _/
          _/  _/      _/  _/          _/      _/  _/    _/        _/
          _/  _/_/_/_/_/  _/_/_/_/_/  _/_/_/_/_/    _/_/          _/
        _/  _/                  _/  _/            _/_/          _/
        _/  _/          _/_/_/_/_/  _/          _/    _/        _/
      _/                                                          _/
      _/  _/_/_/_/_/  _/_/_/_/_/      _/      __/      __/  _/
    _/      _/      _/              _/_/      _/_/    _/_/  _/
    _/      _/      _/_/_/_/_/    _/  _/    _/ _/  _/ _/  _/
  _/      _/      _/            _/_/_/_/    _/  _/ _/  _/  _/
  _/      _/      _/_/_/_/_/  _/      _/  _/  __/  _/  _/
 _/                                                          _/
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

ErikPshat 08.06.2017 20:40
  • Добавил к тегу [ANCHOR=""]Ссылка на якорь[/ANCHOR] класс class="anchor"
  • Добавил к тегу [DECOR=""]Текст содержимого[/DECOR] класс class="decor"
  • Добавил к тегу [TABLE=""]Текст содержимого[/TABLE] класс class="table-pspx"
  • Добавил к тегу [TR=""]Текст содержимого[/TR] класс class="tr-pspx"
  • Добавил к тегу [TD=""]Текст содержимого[/TD] класс class="td-pspx"
  • Добавил к тегу [SPAN=""]Текст содержимого[/SPAN] класс class="span-pspx"
  • Добавил к тегу [COLSPAN=""]Текст содержимого[/COLSPAN] класс class="colspan-pspx"
Это для того, чтобы к ним можно было отдельно стили писать, начиная с точки. Пример:
  • [STYLE].anchor{background:#fff}[/STYLE] или [STYLE].decor{background:#fff}[/STYLE]


Кстати, наверное будет полезно упомянуть про стандартное использование стилей:
  • Если в теге HTML присутствует класс class="bla-bla-bla", то стили к нему пишутся с точки в начале (.bla-bla-bla)
  • Если в теге HTML присутствует ID id="yah-hah-hah", то стили к нему пишутся с решётки в начале (#yah-hah-hah)
  • Если в теге HTML нету ничего, например: <table>, <div>, <img>, тогда стили к нему нужно задавать просто по имени тега без всяких префиксов, например: table{стили} или div{стили} или img{стили} или a{стили}
  • Один общий стиль можно применять сразу к нескольким классам или id, либо тегам, тогда их нужно перечислять через запятую, например: .bla-bla-bla, #yah-hah-hah, table {background: #fff}
Пример использования по ID, например: куда делись последние 6 сообщений на этой странице?

in1975 18.01.2018 09:07
Добавил еще 2 более опциональных CSS онлайн генератора кнопок, поправил синтаксис на замену, тег [style] нам не нужен, мы его добавляем при импорте.

ErikPshat 18.01.2018 22:15
Цитата:
Сообщение от in1975 (Сообщение 1126568)
поправил синтаксис на замену, тег [style] нам не нужен, мы его добавляем при импорте.
Ты в ББ-коде что-то поправил? Зайти посмотреть лень, ибо нужно запускать тормознутый ТОР.

in1975 18.01.2018 22:26
ErikPshat, не, в шапке, там описание неправильное было. Сделал так:

Также можно воспользоваться онлайн-генераторами для создания закладок. Копируем получившийся код и редактируем под закладки:
Код:
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 {и далее берем из кода...}

ErikPshat 19.01.2018 00:19
in1975, а, то есть ты имеешь в виду, что без стилей просто использовать в табах.
А причём тут тогда упоминание "тег [style] нам не нужен"?

P.S. Ппц, я уже запарился, как будто кто-то специально мне ошибки в тексте ставит. Я обычно быстро набираю текст и очень редко было, чтобы я буквы путал, случайно не ту букву нажимал. А сейчас каждый раз как-ьудто мне кто-то исправляет текст и практически в каждом собщении подставляет ошибки.

Вот тебе и наглядный пример - в последнем сообщении выше.
как-ьудто - 100% сягкий знак вместо Б я не нажимал :)
собщении - тут уж точно 2 "о" я набирал.
И ещё все предложения с маленькой буквы мне подставляют, хотя точно уж знаю, что шифт держу в начале предложений.

in1975 19.01.2018 02:03
ErikPshat, там было
Код:
1) .button заменяем на [style].pws_tabs_container.название-темы ul.pws_tabs_controll li a{и далее берем из кода...}[/style]
и так в каждой строчке.

З.ы. ты по соседним кнопкам попадаешь просто.

in1975 10.07.2018 20:21


Живой пример.



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

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

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




Код:
[style].pws_tabs_container.re ul.pws_tabs_controll{text-align:center}.pws_tabs_list{width:100%!important;background:transparent}.pws_tabs_container{background:transpsrent;margin:1px 1px}.pws_tabs_container.re ul.pws_tabs_controll li a{color:#fff;border-top: 10px transparent; margin-bottom: 3px; background:-webkit-gradient(linear,left top,left bottom,from(#1b3b1a),to(#117c0f));background:-moz-linear-gradient(top,#117c0f,#117c0f);padding:5px 10px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:rgba(0,0,0,1)0 1px 0;-moz-box-shadow:rgba(2,0,2,1)0 1px 0;box-shadow:rgba(0,0,0,1)0 1px 0;text-shadow:rgba(1,0,0,.4)0 1px 0;font-size:16px;font-family:Xbold,Xbox;text-decoration:none}.pws_tabs_container.re ul.pws_tabs_controll li a:hover{background:#117c0f;color:#fff}.pws_tabs_container.re ul.pws_tabs_controll li a.pws_tab_active{background:#1b3b1a;color:#ff0}[/style]

ErikPshat 10.07.2018 20:28
in1975, что ты такое постоянно делаешь, что постоянно у тебя табы к левому краю прижимаются, вернее с правого края обрезаются.
И все строки в тексте справа не вмещаются в строку и, не доходя до правого края, переносятся на новую строку..

Посмотри на шапку, как всё съехало влево.
На предыдузих страницах всё нормально, на 100% ширину.

in1975 10.07.2018 20:34
ErikPshat, процитировал стиль

ErikPshat 10.07.2018 20:51
in1975, ширину нужно делать 100%, а не 90.
И название re должно быть уникальным, а не совпадать с тем что между тегами OPTIONS.

in1975 13.07.2019 10:35
ErikPshat, в новую тему? https://www.pspx.ru/forum/forumdisplay.php?f=424


Текущее время: 17:19. Часовой пояс GMT +3.
Страница 3 из 3 1 2 3
Показывать 40 сообщений этой темы на одной странице

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2025, vBulletin Solutions, Inc. Перевод: zCarot
PSPx Forum - Сообщество фанатов игровых консолей.