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

[in1975]

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]

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

1. https://cssresizer.com/ru/ (для вставки кода CSS нажимаем "Сжать текст", но там счётчик ожидания, чтобы сделать ещё раз)
2. http://refresh-sf.com/
3. http://csscompressor.com/

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

Да, сейчас проверил, отлично работает в теме Font Awesome

[ErikPshat]

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;
}

www.shareicon.net

[in1975]

примеры стилей для оформления тем (для импорта):

faq.css - тема
webman.css - тема
xmb.css - тема
xmbpd.css - тема
menu.css - тема

[ErikPshat]

Тема "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;
}

FAQ по взлому PlayStation 3 by in1975

Содержимое...

Содержимое...

Содержимое...

[ErikPshat]

Можно к иконкам подвешивать всплывающие подсказки. Но подсказка будет показываться только при наведении на иконку.
Например, вставляешь в опцию TNAME иконку, а далее пишешь подсказку через параметр title='Подсказка'. Результат вот типа так:

• <i class='fa fa-folder-open-o' title='Это всплывающая подсказка'></i>Название_Вкладки

А якорь не работает.

              _/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
             _/                                                          _/
            _/   _/_/_/_/_/   _/_/_/_/_/   _/_/_/_/_/                   _/
           _/   _/      _/   _/           _/      _/   _/    _/        _/
          _/   _/_/_/_/_/   _/_/_/_/_/   _/_/_/_/_/     _/_/          _/
         _/   _/                   _/   _/             _/_/          _/
        _/   _/           _/_/_/_/_/   _/           _/    _/        _/
       _/                                                          _/
      _/   _/_/_/_/_/   _/_/_/_/_/       _/       __/       __/   _/
     _/       _/       _/              _/_/      _/_/     _/_/   _/
    _/       _/       _/_/_/_/_/     _/  _/     _/ _/   _/ _/   _/
   _/       _/       _/            _/_/_/_/    _/  _/ _/  _/   _/
  _/       _/       _/_/_/_/_/   _/      _/   _/   __/   _/   _/
 _/                                                          _/
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

[ErikPshat]

• Добавил к тегу [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]

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

[ErikPshat]

Сообщение от in1975 поправил синтаксис на замену, тег [style] нам не нужен, мы его добавляем при импорте.

Ты в ББ-коде что-то поправил? Зайти посмотреть лень, ибо нужно запускать тормознутый ТОР.

[in1975]

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

---

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

• 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 {и далее берем из кода...}

[ErikPshat]

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

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

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

[in1975]

ErikPshat, там было

1) .button заменяем на [style].pws_tabs_container.название-темы ul.pws_tabs_controll li a{и далее берем из кода...}[/style]

и так в каждой строчке.

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

[in1975]

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

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

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

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

[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]

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

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

[in1975]

ErikPshat, процитировал стиль

[ErikPshat]

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

[in1975]

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