Изображение

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

CabinetAdmin 07 сен 2013, 06:29 Сообщение

Bukovka_
Если ничего не вставлено, ничего и не выводится:) Код может отказаться работать только от вложенных в него ббкодов, имеющих в своей структуре <div>'ы.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

CabinetAdmin

В том смысле, чтобы я не вставляла, просто текст или картинки, ничего нет, вернее есть, но просто все идет обычно в ряд, без всяких таблиц, сейчас покажу картинку.


:shock: Пошла в те сообщения, где вчера пыталась вставить таблицы и все стоит как надо. :shock: Почему же вчера не показывалось? :shock:
  • 0

CabinetAdmin 07 сен 2013, 13:14 Сообщение

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

ПитерПетр 26 ноя 2017, 03:19 Сообщение

Этот bbcode вообще "бомба" для моего форума. НАХОДКА!
Что самое интересное, что подсказка, с которой идет война в топике "подсказки" тут свободно выходит за пределы "блока", главное чтобы сверху было еще немного текста. И слева, и справа свободно выходит за кладки. Красота!
Один маленький минус. Он конфликтует с bbcode "center". "Жирный" текст, картинки (иконки), "жирный" текст, все хавает. Но как только пытаешься отцентровать текст, "слетает"
  • 0

CabinetAdmin 26 ноя 2017, 07:50 Сообщение

Центрировать можно с помощью стилей, а не ещё одного ббкода, добавить text-align: center; в .tabs_block .tabs_cont {.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 26 ноя 2017, 21:00 Сообщение

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

Картинки на всех вкладках одного размера. Списки (строки) могут доходить до тридцати и более. Впрочем это не важно.
Надо как-то сделать так, чтобы весь текст был выровнен по левой стороне,, но со сдвигом. Проще говоря, начало всех строк (цифры) не должны "гулять"
1
2
3
И так далее. Не знаю. Как то задать сдвиг и выравнивание left, но не по самому краю, а со сдвигом в процентах. А сколько процентов поставить, я уже поэкспериментирую. Примерно позиция, там где первая строка.
  • 0

CabinetAdmin 27 ноя 2017, 17:20 Сообщение

Как добавляете содержимое? Для картинки есть свой ббкод?
Отступ слева можно задать здесь:

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

.tabs_block .tabs_cont {
	border: 1px solid #999;
	padding: 5px;
	background-color: #fff;
}
Сейчас задано 5px со всех сторон, можно задать так padding: 5px 15px;. По горизонтали будет 15, по вертикали 5.

Если имеется в виду отступ на уровень после картинки, т.е. всё относительно картинки, то я бы лучше добавлял картинку на отдельной строке, а текст с новой строки. Поскольку для выравнивания опять таки используется overflow: hidden;, при условии, что у картинки в стилях указан float: left;, то, по понятным причинам, обрежет всплывающие подсказки.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 27 ноя 2017, 17:43 Сообщение

Каждая строка это целый "блок"
К примеру первая

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

[tt][b]1. It Walks By Night[/b][info=Harper & Bros; 1930][img]http://impossible-crimes.ru/Forum/styles/prosilver/theme/images/book_icon.png[/img][/info] — [url_loc=http://impossible-crimes.ru/index.php?It_Walks_by_Night]ПОД ПОКРОВОМ НОЧИ[/url_loc][info="Оно ходит по ночам"
1. Мастера остросюжетного детектива";  Центрполиграф; 2004
2. Классика детектива — Собрание сочинений Д.Д. Карра #28  Центрполиграф; 2009][img]http://impossible-crimes.ru/Forum/styles/prosilver/theme/images/book_icon.png[/img][/info][/tt]
Картинка вставлена обычным wrapimg=. И обтекающий текст. Естественно получается, что как только "действие" картинки заканчивается, текст "прижимается" к левому краю.
И как не сдвигай текст с помощью изменений в скрипте, ничего не поменяется). Просто сделал wrapimg=right и все.
  • 0

ПитерПетр 28 ноя 2017, 10:00 Сообщение

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

[hrc=#542e01]2[/hrc] 
это горизонтальная полоса по всей ширине.
А что-то подобное, но уже для вертикальной полосы, существует? Именно для phpBB?
Чтобы поставить после картинки и уже тогда весь текст, будет по краю полоски.

В принципе, можно использовать вариант ббсоде col, только чтобы делило не произвольно, а левая часть — фиксированная, а правая выравнивается уже к "линии разделения" |
Такой bbcode возможно сделать?
  • 0

CabinetAdmin 28 ноя 2017, 15:23 Сообщение

Да уж, просто жесть из ббкодов получается, ну раз уж и так куча ббкодов, можно тогда посоветовать таблицу http://cabinetadmina.ru/viewtopic.php?p=65179#p65179. Получается так: создаём внутри таблицу с двумя колонками, в первой картинка, во второй всё остальное содержимое:

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

[tab][tr]<td> - Колонка с картинкой - </td><td> - Колонка с текстом - </td>[/tr][/tab]
Если что, то можно указать точную ширину для колонки с картинкой.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 28 ноя 2017, 15:35 Сообщение

ббкод в ббкоде. Там даже 100 гр. не поможет))) Разве что бутылка. И не будут ли они (бб коды) конфликтовать.
В теме ББ код Таблица что то не совсем понятно. Где что — использование, замена и подсказка.
Можно чуть подробнее? С указанием ширины. Размеры я подберу опытным путем.
  • 0

CabinetAdmin 28 ноя 2017, 18:35 Сообщение

Ну, там же написано:
CabinetAdmin писал(а): (использование, замена и подсказка)

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

[tab]{TEXT}[/tab]
 
<table width="100%" cellpadding="5" border="1">{TEXT}</table>
 
Контейнер таблицы
По порядку использование, замена и подсказка.

Если нет задачи создавать сложные таблицы, то можно 4 ббкод не создавать, а 6 создать так:

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

[td={NUMBER}]{TEXT}[/td]
замена

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

<td style="width:{NUMBER}px;">{TEXT}</td>
Подсказка

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

Ячейка таблицы: [td=ширина ячейки] содержимое [/td]
И готовая таблица будет выглядеть уже так:

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

[tab][tr][td=100] - Колонка с картинкой - [/td][td] - Колонка с текстом - [/td][/tr][/tab]
Если всё получается и устраивает, то можно заниматься стилями. Но уже в той теме.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

CabinetAdmin 29 ноя 2017, 16:36 Сообщение

Сообщения отправлены в http://cabinetadmina.ru/viewtopic.php?p=74953#p74953
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 14 июл 2018, 13:52 Сообщение

Каким образом можно поменять цвет фона в таблицы с белого на другой?
background-color: #fff;
Указано значение в диез и три буквы. Это белый. А как указать другой цвет в такой кодировке? в фотошопе диез и шесть букв или цифровые значения.
Или я не там "копаю"?
  • 0

romaamor 14 июл 2018, 20:50 Сообщение

  • 2

Похожие темы