Форумы xBB

Форумы xBB > BBCode и прочие языки упрощенной разметки

Как создать тег BBCode [spoiler]

Автор: dima. Последнее редактирование: 2011-04-22 12:37:13

Предварительное замечание:
Для лучшего понимания этого текста стоит прочесть главу документации по парсеру xBB – "API. Как создать тег", в которой описываются основы этого дела. Смотрите также список тегов BBCode, которые парсер xBB поддерживает по умолчанию.

Статья написана по просьбам пользователей xBB. Приведённые коды будут работать с xBB v 0.29.
 
Тег [spoiler] должен служить для публикации спрятанного текста. Примеры:
  1. Код [spoiler]первый пример[/spoiler] должен вывести следующее:
     

     
  2. Код [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;
}

Удачных экспериментов!

58 комментариев

29.09.2011 16:38:10 #
Google Chrome Гость Макс
спасибо огромное помогло!!!!!!!!
29.09.2011 16:49:59 #
Mozilla Firefox dima
Пожалуйста Well
28.11.2011 12:54:11 #
Google Chrome Гость Игорь
06.05.2013 05:30:38 #
Google Chrome Гость usr001
17.03.2015 22:00:42 #
Mozilla Firefox Grinn
Как сделать текст в спойлере понятно, спс. но как сделать второй текст при закрытии спойлера, например на форуме где есть кнопка спойлер, чтоб при закрытии был другой текст вместо hide spoiler? плиз, жду решения.[/img]
[/img]
19.03.2015 08:05:01 #
Mozilla Firefox Grinn
Неужель никто не знает?
21.03.2015 12:05:06 #
Mozilla Firefox Grinn
Впрочем я уже разобрался, что и как сделать.
02.11.2018 21:46:27 #
Google Chrome Гость тян
просто проверяю

Ответить:

Представиться как     Антибот:
   

Просьба не постить мусор. Пользуйтесь кнопкой предварительного просмотра на панели инструментов редактора.

Введите логин: и пароль: (

© 2007-2018, Дмитрий Скоробогатов.
Разрешается воспроизводить, распространять и/или изменять материалы сайта
в соответствии с условиями GNU Free Documentation License,
версии 1.2 или любой более поздней версии, опубликованной FSF,
если только иное не указано в самих материалах.