Страница 1 из 3
Tabs BBCode. Вкладки в сообщении.
Добавлено: 04 май 2013, 10:07
CabinetAdmin
BBCode представляет собой разделённое по смыслу сообщение, заключённое в разные блоки, открывающиеся по клику на соответствующий заголовок. Принцип как в личном разделе или при создании сообщения через форму ответа.
Далее представлен новый вариант двойного ббкода, старый, если вдруг он вам нужен, можно найти под спойлером в конце поста.
Табы состоят из двух ббкодов.
1 bbcode [tabs]
Использование BBCode:
Замена 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=' ';" title="Закрыть" data-skip-responsive="true"><a href="#" onclick="return false"><span>×</span></a></li>
</ul>
</div>
<div class="tabs_cont panel"> </div>
</div>
Подсказка:
Код: Выделить всё
Контейнер [tabs][tab=Заголовок]Содержимое[/tab][/tabs]
2 bbcode [tabs=]
Использование BBCode:
Замена 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>
Подсказка:
Чтобы наш bbcode правильно отображался в сообщении, при его составлении не должно быть пробелов между:
Пример правильно составленного кода:
Код: Выделить всё
[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]
найдите:
и укажите свой текст вместо:
Отличия от старого ббкода.
- Стилизация ббкода подогнана под стиль. Табы имеют стили других табов используемых на форуме.
- Вложенность других ббкодов. В любой таб можно добавлять другие ббкоды (за исключением конечно Tabs BBCode): спойлеры, стилизованные блоки и тп.
- Ббкод одинаково работает на всех версиях phpbb. В новых версиях табы так же сворачиваются, но не открываются с тех, что находятся во всплывающем окне (возможно позже починю, если будет нужно).
+Старый вариант ббкода
Для начала нам нужно создать наши bbcode, наш код состоит из двух частей.
1 bbcode [tabs]
Использование BBCode:
Замена HTML:
Код: Выделить всё
<div class="tabs_block">
{TEXT}
<span class="tab-menu" style="float: right;" onclick="this.parentNode.getElementsByTagName('div')[0].innerHTML=' ';" title="Закрыть">X</span>
<div class="tabs_cont"> </div>
</div>
Подсказка:
Код: Выделить всё
Контейнер [tabs][tab=Заголовок]Содержимое[/tab][/tabs]
2 bbcode [tabs=]
Использование BBCode:
Замена HTML:
Код: Выделить всё
<span class="tab-menu" onclick="this.parentNode.getElementsByTagName('div')[0].innerHTML=this.getElementsByTagName('span')[0].innerHTML;">
<span>{TEXT2}</span>{TEXT1}</span>
Подсказка:
Последнее что нам требуется для работы, добавить 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;
}
[ Свернуть ]
Re: Tabs BBCode. Вкладки в сообщении.
Добавлено: 04 май 2013, 11:44
romaamor
А демо нету ? Интересно бы было посмотреть.
Re: Tabs BBCode. Вкладки в сообщении.
Добавлено: 04 май 2013, 12:38
CabinetAdmin
Добавил демо.
Re: Tabs BBCode. Вкладки в сообщении.
Добавлено: 04 май 2013, 12:40
romaamor
CabinetAdmin писал(а):Добавил демо.
Ага. Прикольнинько. Можно и себе вставить.
Re: Tabs BBCode. Вкладки в сообщении.
Добавлено: 14 май 2013, 15:29
silver073000
А если написать в таком виде, то содержимое вкладок не отображается
Код: Выделить всё
[tabs][tab=Заголовок 1]Содержимое[/tab][tab=Заголовок 2][code]Содержимое в котором могут быть
переносы слов, изображения и всё что вы захотите
[/tab]
[/tabs][/code]
Добавлен ббкод code. У меня с ббкодом code не отображает содержимое вкладок.
Re: Tabs BBCode. Вкладки в сообщении.
Добавлено: 14 май 2013, 18:02
CabinetAdmin
BOJIK писал(а):А если написать в таком виде, то содержимое вкладок не отображается
Хм... Скопировал пример, попробовал, работает. Возможно не работает из-за каких-то особенностей стиля!?...
зы. пробовал разные варианты, не захотел работать с цитатой внутри... Время появится, надо будет разобраться почему...
Re: Tabs BBCode. Вкладки в сообщении.
Добавлено: 14 май 2013, 22:39
silver073000
CabinetAdmin писал(а):Возможно не работает из-за каких-то особенностей стиля!?
Стиль subsilver2-modded. Какой-то проблемный он у меня
Re: Tabs BBCode. Вкладки в сообщении.
Добавлено: 11 авг 2013, 16:30
Golden Year
[quote="CabinetAdmin"]зы. пробовал разные варианты, не захотел работать с цитатой внутри... Время появится, надо будет разобраться почему...[/quote]
Здравствуйте.
Хотелось бы, чтобы Вы посмотрели ещё раз. Если вставлять во вкладки некоторые бб-коды (видео), то вкладки не работают.
Re: Tabs BBCode. Вкладки в сообщении.
Добавлено: 11 авг 2013, 17:29
CabinetAdmin
Возможно причина не работы кроется во вложенности тегов, скорее всего из-за дивов, победить наверно можно, доработав или переписав функцию onclick...
Сырой какой-то ббкод
Re: Tabs BBCode. Вкладки в сообщении.
Добавлено: 04 сен 2013, 19:54
Uzanka
На самом деле, очень полезный код. С удовольствием установила и используем. Большое спасибо!
Re: Tabs BBCode. Вкладки в сообщении.
Добавлено: 06 сен 2013, 10:11
Bukovka_
CabinetAdmin
а количество вкладок ограничено?
Как раз в раздумьях, для чего он мне сильно нужен.
Re: Tabs BBCode. Вкладки в сообщении.
Добавлено: 06 сен 2013, 13:14
Bukovka_
А у меня совсем не работает.
Наверное потому, что у меня шаблон на дивах.
Re: Tabs BBCode. Вкладки в сообщении.
Добавлено: 06 сен 2013, 14:08
CabinetAdmin
Я только на четырёх пробовал. По сути, скорее всего, не должно быть ограничений, только ограничение ширины страницы, которое визуально поломает порядок вкладок.
У меня только с цитатой не захотел работать. То есть если вкладывать только текст да картинки, то код отлично работает и его можно использовать.
Re: Tabs BBCode. Вкладки в сообщении.
Добавлено: 06 сен 2013, 14:41
Uzanka
Bukovka_
Bukovka_ писал(а):Как раз в раздумьях, для чего он мне сильно нужен.
у меня есть каталоги полезных ссылок, например, по поиску конференций. Очень удобно разбить их еще по категориям. И место сокращает
Re: Tabs BBCode. Вкладки в сообщении.
Добавлено: 06 сен 2013, 23:27
Bukovka_
Uzanka » Сегодня, 13:41 писал(а):Очень удобно разбить их еще по категориям. И место сокращает Tabs BBCode. Вкладки в сообщении.
У меня он не работает вообще. Т.е. даже ничего не вставляя.