Форумы xBB

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

BBCode [spoiler] с некоторыми улучшениями.

Автор: Nutty. Последнее редактирование: 2011-05-24 08:17:26

И так различение между моим споллером и споллером http://xbb.uz/forums/bbcode...ode_spoiler в том что мой вложенные в себя картинки не загружает при загрузке страницы и DOM элементов, все картинки в споллере содержатся в теге <var> который предназначен для выделения переменных компьютерных программ но его редко кто либо использует по этому он и был использован.
Для правильной установки ббкода читаем инструкцию.
Для начала делаем класс ббкода с именем spoiler.php который будет в кодировке UTF-8 без BOM с таким кодом.
PHP

class bb_Spoiler extends bbcode
{
     public $behaviour = 'spoiler';
     function get_html() {
                $this->autolinks=false;
               
         if (isset($this->attrib['spoiler']) && $this->attrib['spoiler']) {
             $title = htmlspecialchars($this->attrib['spoiler']);
         } else {
             $title = 'скрытый текст';
         }
                $bbcode_img_to_var = preg_replace('#\[img\](.*?)\[/img\]#si', '<var>\1</var>', parent::get_html($this->tree));
        $result = "<div class=\"bb_spoiler\"><div class=\"bb_spoiler_head\"><span onClick=\"if (this.parentNode.parentNode.getElementsByTagName('div')[1].style.display != '') {this.parentNode.parentNode.getElementsByTagName('div')[1].style.display = ''; this.innerHTML = '[-] <a href=\'#\' onClick=\'return false;\'>закрыть</a> ".$title."'; bb_spoiler(this); } else { this.parentNode.parentNode.getElementsByTagName('div')[1].style.display = 'none'; this.innerHTML = '[+] <a href=\'#\' onClick=\'return false;\'>открыть</a> ".$title."'; }\" />[+]<a href=\"#\" onClick=\"return false;\">открыть</a> ".$title."</span>"
."</div><div class=\"bb_spoiler_content\" style=\"display: none;\">".$bbcode_img_to_var."</div>
</div>"
;
         return $result;
     }
}
 
Далее идём в файл tags.php и редактируем его в массив $tags добавляем
Text

        'spoiler'      => 'bb_Spoiler',
 
Далее в том же файле редактируем массив $children в нём в ключи div и td добавляем spoiler у вас примерно получится так.
Text

'div'     => array('a','code','div','hr','img','p','pre','span','table','ul','spoiler'),
'td'      => array('a','code','div','hr','img','p','pre','span','table','ul','spoiler'),
 
дальше в тот же массив добавляем  
Text

'spoiler' => array('a','code','div','spoiler','hr','p','pre','span','table','ul')
 
В том же файле в массив $ends
Добавляем
Text

'spoiler' => array('li','tr','td')
 
сохраняем и в Css Стили добавляем
CSS

div.bb_spoiler {
     border: #d0d0d0 1px solid;
     padding: 4px;
     margin: 1em 0 0 .75em;
         border-radius: 8px;
     -moz-border-radius: 8px;
}
div.bb_spoiler_head {
     color: #666666;
     font-weight: bold;
}
div.bb_spoiler_content {
     color: #666666;
         font-size: 10pt;
         border: #d0d0d0 1px solid;
     padding: 5px;
     margin-top: .5em;
         border-radius: 4px;
     -moz-border-radius: 4px;
}
div.bb_spoiler_head span a{
        color: #666666;
    font-weight: bold;
        text-decoration: none;
}
div.bb_spoiler_content var{
 display: none;
}
 
И последние это JavaScript который оживляет наши теги <var> переделывая их в <img>.
Javascript

function bb_spoiler(obj){
var spoiler = obj.parentNode.parentNode.getElementsByTagName('div')[1];
 
 sr=spoiler.innerHTML
 while (sr.indexOf('<var>') != -1){ 
 sr=sr.replace('<var>','<img src="');
 sr=sr.replace('</var>','" alt=""/>')
 spoiler.innerHTML=sr; 
 } 
}
 

Dima Вопрос к правильно отключить автолинки в определённом ббкоде как отключить определённый ббкод я разобрался а вот как отключить автолинки нет Eyes in a heap.
 

3 комментария

23.05.2011 10:15:14 #
Mozilla Firefox dima
Вопрос к правильно отключить автолинки в определённом ббкоде

PHP
$this->autolinks = false;

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

PHP
unset($this->tags['img']);
$html = parent::get_html($this->tree);
24.05.2011 08:20:34 #
Opera Nutty
dima Спасибо.
 
P/s Споллер подправил теперь вроде всё как и задумано работает.
24.05.2011 09:08:53 #
Mozilla Firefox dima
Незачто Well

Ответить:

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

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

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

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