Форумы 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;
}

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

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

22.06.2009 07:03:41 #
Opera Гость berl
22.06.2009 10:27:18 #
Iceweasel dima
Всегда пожалуйста Well Давно хотел написать и, наконец, собрался. Надо бы еще теги offtop и hide сделать, - многие просят. Точно также несложно, но пока лень Not so
05.07.2009 21:14:27 #
Mozilla Firefox Гость
а как сделать тоже самое для обычного сайта не понятно... есть универсальное что-то?
05.07.2009 22:32:25 #
Iceweasel dima
xBB вполне универсален. Его можно поставить на любой сайт, написанный на PHP. Как это сделать, написано здесь: http://xbb.uz/docs/start.bb
13.07.2009 10:06:17 #
Iceweasel Гость алексей
хм. а есть возможность ограничить размер спойлера (по вертикали-строк - например) ? если скажем у меня текст из 100 строк то на экране его неудобно читать..
13.07.2009 19:25:42 #
Iceweasel dima
хм. а есть возможность...

С текстом можно сделать все, что возможно средствами PHP. У вас есть текст: parent::get_html($this->tree). Преобразовывайте его как хотите.
28.08.2009 19:11:08 #
Opera Гость dimka (UA)
Спасиба Well а как я понял кнопки непоявляется? на панели(((
28.08.2009 19:18:32 #
Opera Гость dimka (UA)
А у меня почемуто неработает хотя зделал все как написали Not soNot so
Нажимаю на [+] скрытый текст а оно место того чтобы открыть текс просто подымает меня на самый верх страницы.. Помогите плиз
29.08.2009 11:26:22 #
Iceweasel dima
Смотрите консоль ошибок. Скорее всего JavaScript недоступен (function xbbSpoiler(obj))
29.08.2009 12:39:29 #
Opera Гость 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

Ответить:

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

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

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

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