Форумы xBB
Форумы xBB > BBCode и прочие языки упрощенной разметки
Как создать тег BBCode [spoiler]
Автор: dima. Последнее редактирование: 2011-04-22 12:37:13
Предварительное замечание:
Для лучшего понимания этого текста стоит прочесть главу документации по парсеру xBB – "API. Как создать тег", в которой описываются основы этого дела. Смотрите также список тегов BBCode, которые парсер xBB поддерживает по умолчанию.
Статья написана по просьбам пользователей xBB. Приведённые коды будут работать с xBB v 0.29.
Тег
[spoiler] должен служить для публикации спрятанного текста. Примеры:- Код
[spoiler]первый пример[/spoiler]должен вывести следующее:
- Код
[spoiler=Заголовок]второй пример[/spoiler]должен вывести следующее:
Реализацию этого тега для xBB придумал Гость Алексей в мае прошлого года. Я лишь исправил его код так, чтобы он работал для xBB v 0.29.
Во первых, вы должны позаботиться о доступности следующего JavaScript'а. Вставите его в код HTML или будете грузить в отдельном файле или вместе с другим JS, работающем на вашем сайте, в контексте статьи неважно.
Javascript
function xbbSpoiler(obj){
var obj_content = obj.parentNode.parentNode.getElementsByTagName('div')[1];
var obj_text_show = obj.getElementsByTagName('span')[1];
var obj_text_hide = obj.getElementsByTagName('span')[0];
if (obj_content.style.display != '') {
obj_content.style.display = '';
obj_text_show.style.display = '';
obj_text_hide.style.display = 'none';
} else {
obj_content.style.display = 'none';
obj_text_show.style.display = 'none';
obj_text_hide.style.display = '';
}
return false;
}
Теперь создайте файл bbcode/Xbb/My/Spoiler.php и поместите в него следующий код:
PHP
<?php/* Класс для тега [spoiler] */
class Xbb_My_Spoiler extends bbcode
{
public $behaviour = 'div';
/* Описываем конвертацию в HTML */
function get_html() {
if (isset($this->attrib['spoiler']) && $this->attrib['spoiler']) {
$title = htmlspecialchars($this->attrib['spoiler']);
} else {
$title = 'скрытый текст';
}
$result = '<div class="bbSpoiler">'
. '<div class="bbSpoilerTitle">'
. '<a href="#" onclick="return xbbSpoiler(this)">'
. '<span><strong>[+] ' . $title . '</strong></span>'
. '<span style="display:none">'
. '<strong>[-] ' .$title . '</strong>'
. '</span>'
. '</a>'
. '</div>'
. '<div class="bbSpoilerText" style="display:none">'
. parent::get_html($this->tree)
. '</div>'
. '</div>';
return $result;
}
}
В файл bbcode/config/tags.php добавьте строчку соответствия:
PHP
'spoiler' => 'Xbb_My_Spoiler',Теперь пробуйте. Тег
[spoiler] должен работать. Будет красивее, если вы добавите в свою таблицу стилей стили для спойлера. Например такие:
CSS
.bbSpoiler {border: #d0d0d0 1px solid;
padding: 4px;
margin: 1em 0 0 .75em;
-moz-border-radius: 8px;
}
.bbSpoilerTitle a {
color: #666666;
font-weight: bold;
}
.bbSpoilerText {
border: #d0d0d0 1px solid;
padding: 5px;
margin-top: .5em;
-moz-border-radius: 4px;
}
Удачных экспериментов!
53 комментария
| 22.06.2009 10:27:18 | # |
dima
Всегда пожалуйста 
Давно хотел написать и, наконец, собрался. Надо бы еще теги offtop и hide сделать, - многие просят. Точно также несложно, но пока лень 
| 05.07.2009 21:14:27 | # |
Гость
а как сделать тоже самое для обычного сайта не понятно... есть универсальное что-то?
| 05.07.2009 22:32:25 | # |
dima
xBB вполне универсален. Его можно поставить на любой сайт, написанный на PHP. Как это сделать, написано здесь: http://xbb.uz/docs/start.bb
| 13.07.2009 10:06:17 | # |
Гость алексей
хм. а есть возможность ограничить размер спойлера (по вертикали-строк - например) ? если скажем у меня текст из 100 строк то на экране его неудобно читать..
| 13.07.2009 19:25:42 | # |
dima
хм. а есть возможность...
С текстом можно сделать все, что возможно средствами PHP. У вас есть текст: parent::get_html($this->tree). Преобразовывайте его как хотите.
| 28.08.2009 19:18:32 | # |
Гость dimka (UA)
А у меня почемуто неработает хотя зделал все как написали Нажимаю на [+] скрытый текст а оно место того чтобы открыть текс просто подымает меня на самый верх страницы.. Помогите плиз
| 29.08.2009 11:26:22 | # |
dima
Смотрите консоль ошибок. Скорее всего JavaScript недоступен (function xbbSpoiler(obj))
| 29.08.2009 12:39:29 | # |
Гость dimka (UA)
Так а куда засовывать?:Javascript
function xbbSpoiler(obj){
var obj_content = obj.parentNode.parentNode.getElementsByTagName('div')[1];
var obj_text_show = obj.getElementsByTagName('span')[1];
var obj_text_hide = obj.getElementsByTagName('span')[0];
if (obj_content.style.display != '') {
obj_content.style.display = '';
obj_text_show.style.display = '';
obj_text_hide.style.display = 'none';
} else {
obj_content.style.display = 'none';
obj_text_show.style.display = 'none';
obj_text_hide.style.display = '';
}
return false;
}
Я этот код засовывал в bbcode.lib.js