Изображение


BBCode представляет собой разделённое по смыслу сообщение, заключённое в разные блоки, открывающиеся по клику на соответствующий заголовок. Принцип как в администраторском разделе.

Для начала нам нужно создать наши bbcode, наш код состоит из двух частей.

1 bbcode [tabs]

Использование BBCode:

Код: Выделить всё

[tabs]{TEXT}[/tabs]


Замена HTML:

Код: Выделить всё

<div class="tabs_block">
   {TEXT}
   <span class="tab-menu" style="float: right;" onclick="this.parentNode.getElementsByTagName('div')[0].innerHTML='&nbsp;';" title="Закрыть">X</span>
   <div class="tabs_cont">&nbsp;</div>
</div>


Подсказка:

Код: Выделить всё

Контейнер [tabs][tab=Заголовок]Содержимое[/tab][/tabs]



2 bbcode [tabs=]

Использование BBCode:

Код: Выделить всё

[tab={TEXT1}]{TEXT2}[/tab]


Замена HTML:

Код: Выделить всё

<span class="tab-menu" onclick="this.parentNode.getElementsByTagName('div')[0].innerHTML=this.getElementsByTagName('span')[0].innerHTML;">
<span>{TEXT2}</span>{TEXT1}</span>


Подсказка:

Код: Выделить всё

[tab=Заголовок]Содержимое[/tab]



Чтобы наш bbcode правильно отображался в сообщении, при его составлении не должно быть пробелов между:

Код: Выделить всё

[tab=][/tab][tab=][/tab]


Пример правильно составленного кода:

Код: Выделить всё

[tabs][tab=Заголовок 1]Содержимое[/tab][tab=Заголовок 2]Содержимое в котором могут быть

переносы слов, изображения и всё что вы захотите[/tab][tab=Заголовок 3]Содержимое[/tab][/tabs]



Последнее что нам требуется для работы, добавить CSS, открываем тему вашего стиля и в самый конец добавляем:

Код: Выделить всё

.tabs_block {
   max-width: 95%;
   margin: 2px auto;
}
.tabs_block .tabs_cont {
   border: 1px solid #999;
   padding: 5px;
   background-color: #fff;
}
.tabs_block span.tab-menu {
   background: url("{T_THEME_PATH}/images/bg_button.gif") repeat 0 0;
   border: 1px solid #999;
   display: inline-block;
   font-size: 0.9em;
   font-weight: bold;
   font-family: Verdana, Helvetica, Arial, sans-serif;
   color: #536482;
   margin: 0 0 -1px;
   padding: 2px 10px;
   cursor: pointer;
}
.tabs_block span.tab-menu:hover {
   background-position: 0 23px;
   color: #000;
}
.tabs_block span.tab-menu span {
   display: none;
}



При открытии страницы все вкладки по умолчанию скрыты, показывается пустое поле, чтобы добавить туда свой текст в первом bbcode [tabs] найдите:

Код: Выделить всё

<div class="tabs_cont">&nbsp;</div>


и укажите свой текст вместо: &nbsp;

Комментарии: 31

CabinetAdmin 15 июл 2018, 08:32 Сообщение

Питер, в hex коде цвет может состоять как из 3, так и из 6 символов. А вот фотошопы и др. предлагают только коды из шести символов.
А так никакой разницы, можно даже в rgb rgb(255, 255, 255).
  • 0
Хочешь поблагодарить? Есть способы - Поддержать проект

LEOPARD 15 май 2019, 21:32 Сообщение

Очень классный и полезный ббкод!
Жаль, что спойлеры не обрабатывает.
  • 0

Похожие темы