Tabs BBCode. Вкладки в сообщении.

BBCode — это специальный вариант HTML
С помощью BBcode - вы сможете отформатировать текст в сообщении, вставить видео, картинки и многое другое.
Аватара пользователя
CabinetAdmin

Tabs BBCode. Вкладки в сообщении.

CabinetAdmin 04 май 2013, 10:07 Сообщение

Изображение


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;

Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Tabs BBCode. Вкладки в сообщении.

romaamor 04 май 2013, 11:44 Сообщение

А демо нету ? Интересно бы было посмотреть.

Аватара пользователя
CabinetAdmin

Re: Tabs BBCode. Вкладки в сообщении.

CabinetAdmin 04 май 2013, 12:38 Сообщение

Добавил демо.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Tabs BBCode. Вкладки в сообщении.

romaamor 04 май 2013, 12:40 Сообщение

CabinetAdmin писал(а):Добавил демо.

Ага. Прикольнинько. Можно и себе вставить.

Аватара пользователя
silver073000

Re: Tabs BBCode. Вкладки в сообщении.

silver073000 14 май 2013, 15:29 Сообщение

А если написать в таком виде, то содержимое вкладок не отображается

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

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

Добавлен ббкод code. У меня с ббкодом code не отображает содержимое вкладок.

Аватара пользователя
CabinetAdmin

Re: Tabs BBCode. Вкладки в сообщении.

CabinetAdmin 14 май 2013, 18:02 Сообщение

BOJIK писал(а):А если написать в таком виде, то содержимое вкладок не отображается

Хм... Скопировал пример, попробовал, работает. Возможно не работает из-за каких-то особенностей стиля!?...

зы. пробовал разные варианты, не захотел работать с цитатой внутри... Время появится, надо будет разобраться почему...
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
silver073000

Re: Tabs BBCode. Вкладки в сообщении.

silver073000 14 май 2013, 22:39 Сообщение

CabinetAdmin писал(а):Возможно не работает из-за каких-то особенностей стиля!?
Стиль subsilver2-modded. Какой-то проблемный он у меня :%)

Golden Year

Re: Tabs BBCode. Вкладки в сообщении.

Golden Year 11 авг 2013, 16:30 Сообщение

[quote="CabinetAdmin"]зы. пробовал разные варианты, не захотел работать с цитатой внутри... Время появится, надо будет разобраться почему...[/quote]
Здравствуйте.
Хотелось бы, чтобы Вы посмотрели ещё раз. Если вставлять во вкладки некоторые бб-коды (видео), то вкладки не работают.

Аватара пользователя
CabinetAdmin

Re: Tabs BBCode. Вкладки в сообщении.

CabinetAdmin 11 авг 2013, 17:29 Сообщение

Возможно причина не работы кроется во вложенности тегов, скорее всего из-за дивов, победить наверно можно, доработав или переписав функцию onclick...
Сырой какой-то ббкод
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Uzanka

Re: Tabs BBCode. Вкладки в сообщении.

Uzanka 04 сен 2013, 19:54 Сообщение

На самом деле, очень полезный код. С удовольствием установила и используем. Большое спасибо! :Rose:
Форум Science-Леди www.scienceclub.listbb.ru

Bukovka_

Re: Tabs BBCode. Вкладки в сообщении.

Bukovka_ 06 сен 2013, 10:11 Сообщение

CabinetAdmin
а количество вкладок ограничено?
Uzanka » 04 сен 2013, 18:54 писал(а):С удовольствием установила и используем


Как раз в раздумьях, для чего он мне сильно нужен. :oooo:

Bukovka_

Re: Tabs BBCode. Вкладки в сообщении.

Bukovka_ 06 сен 2013, 13:14 Сообщение

А у меня совсем не работает. :( Наверное потому, что у меня шаблон на дивах.

Аватара пользователя
CabinetAdmin

Re: Tabs BBCode. Вкладки в сообщении.

CabinetAdmin 06 сен 2013, 14:08 Сообщение

Я только на четырёх пробовал. По сути, скорее всего, не должно быть ограничений, только ограничение ширины страницы, которое визуально поломает порядок вкладок.
У меня только с цитатой не захотел работать. То есть если вкладывать только текст да картинки, то код отлично работает и его можно использовать.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Uzanka

Re: Tabs BBCode. Вкладки в сообщении.

Uzanka 06 сен 2013, 14:41 Сообщение

Bukovka_
Bukovka_ писал(а):Как раз в раздумьях, для чего он мне сильно нужен.

у меня есть каталоги полезных ссылок, например, по поиску конференций. Очень удобно разбить их еще по категориям. И место сокращает :D
Форум Science-Леди www.scienceclub.listbb.ru

Bukovka_

Re: Tabs BBCode. Вкладки в сообщении.

Bukovka_ 06 сен 2013, 23:27 Сообщение

Uzanka » Сегодня, 13:41 писал(а):Очень удобно разбить их еще по категориям. И место сокращает Tabs BBCode. Вкладки в сообщении.

:cry:
CabinetAdmin » Сегодня, 13:08 писал(а):То есть если вкладывать только текст да картинки, то код отлично работает и его можно использовать.


У меня он не работает вообще. Т.е. даже ничего не вставляя. :(



Похожие темы

Вернуться в «Пользовательские BBCode для phpBB»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость