Изображение

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

Далее представлен новый вариант двойного ббкода, старый, если вдруг он вам нужен, можно найти под спойлером в конце поста.

Табы состоят из двух ббкодов.

1 bbcode [tabs]

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

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

[tabs]{TEXT}[/tabs]
Замена HTML:

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

<div class="tabs_block">
	<div id="tabs" class="tabs">
		<ul>
			{TEXT}
			<li class="tab" style="float: right;" onclick="this.closest('.tabs_block').querySelector('.tabs_cont').innerHTML='&nbsp;';" title="Закрыть" data-skip-responsive="true"><a href="#" onclick="return false"><span>&#215;</span></a></li>
		</ul>
	</div>
	<div class="tabs_cont panel">&nbsp;</div>
</div>
Подсказка:

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

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

2 bbcode [tabs=]

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

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

[tab={TEXT1}]{TEXT2}[/tab]
Замена HTML:

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

<li class="tab" onclick="this.closest('.tabs_block').querySelector('.tabs_cont').innerHTML=this.querySelector('.tab-html').innerHTML;">
	<a href="#" onclick="return false"><span>{TEXT1}</span></a>
	<div class="tab-html" style="display: none;">{TEXT2}</div>
</li>
Подсказка:

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

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

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

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

[tab=][/tab][tab=][/tab]
Пример правильно составленного кода:

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

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

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

Стили.
В новой модификации практически все стили стандартные, но есть несколько элементов для стилизации.

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

.tabs_block {
	max-width: 95%;
	margin: 2px auto;
}
.tabs_block .tabs_cont {
	padding: 8px 10px;
}
.tabs_block .tabs_cont { - это фон блоков. По умолчанию в качестве фона используется цвет класса panel. Если нужно, сюда можно задать собственный цвет.
Так же можно совсем не добавлять стили и обойтись стандартными форумными.


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

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

<div class="tabs_cont">&nbsp;</div>
и укажите свой текст вместо: &nbsp;

Отличия от старого ббкода.
  • Стилизация ббкода подогнана под стиль. Табы имеют стили других табов используемых на форуме.
  • Вложенность других ббкодов. В любой таб можно добавлять другие ббкоды (за исключением конечно Tabs BBCode): спойлеры, стилизованные блоки и тп.
  • Ббкод одинаково работает на всех версиях phpbb. В новых версиях табы так же сворачиваются, но не открываются с тех, что находятся во всплывающем окне (возможно позже починю, если будет нужно).
+Старый вариант ббкода
Комментарии: 42

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

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

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

Добавил демо.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

CabinetAdmin писал(а):Добавил демо.
Ага. Прикольнинько. Можно и себе вставить.
  • 0

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

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

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

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

    переносы слов, изображения и всё что вы захотите
[/tab]Содержимое
[/tabs][/code]
Добавлен ббкод code. У меня с ббкодом code не отображает содержимое вкладок.
  • 0

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

BOJIK писал(а):А если написать в таком виде, то содержимое вкладок не отображается
Хм... Скопировал пример, попробовал, работает. Возможно не работает из-за каких-то особенностей стиля!?...

зы. пробовал разные варианты, не захотел работать с цитатой внутри... Время появится, надо будет разобраться почему...
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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

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

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

Возможно причина не работы кроется во вложенности тегов, скорее всего из-за дивов, победить наверно можно, доработав или переписав функцию onclick...
Сырой какой-то ббкод
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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

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

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

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

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

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

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

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

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

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

Похожие темы