BB-code SPOILER для vBulletin 4.2

AlexMSQ

Пользователь
Регистрация
30.05.12
Сообщения
13
Реакции
10
Баллы
3
Проверен лично мной. Модер, если в неправильном разделе разместил - плиз перетащи. Думаю здесь ему больше место подходит.

Spoiler (на jQuery)



JavaScript подключаем в шаблон headinclude:

Вставить код сразу над определением переменных yui:

Код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ $(".toggle_container").hide(); $("h2.trigger").click(function(){ $(this).toggleClass("active").next().slideToggle("slow"); return false; });
});
</script>

Так что не забудьте, что jQuery мы уже подключили на всём форуме и если вы будете использовать ещё какие-нибудь "плюшки" использующие эту библиотеку, то повторно подключать jQuery (файл jquery.min.js) НЕ НУЖНО.

От себя добавлю, что я добавил весь код, однако указанного файла http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js не существует по указанному адресу. Тем не менее Вобла 4 сама подкидывает jQuery от Гугла по умолчанию, что соответственно можно задать в одной из основных настроек. Так что вот эта часть:

Код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

для вставки необязательна.

В Управление стилями - у выбранного стиля из выпадающего меню выбрать Основная таблица CSS - Дополнительные определения CSS
Примечание, для использования в vBulletin 4
CSS код вставлять в шаблон additional.css


Вставить следующий код (во второе поле):

Код:
h2.trigger { padding: 0 0 0 50px; margin: 0 0 5px 0; background: url(images/misc/h2_trigger_a.gif) no-repeat; height: 46px; line-height: 46px; width: 700px; font-size: 2em; font-weight: normal; float: left;
}
h2.trigger a { color: #F4E7CE; text-decoration: none; display: block; text-shadow: 0px 1px 1px #000000;
}
h2.trigger a:hover { color: #ffffff; border-bottom: 0px dotted #000000; text-shadow: 0px 1px 1px #000000;}
h2.active {background-position: left bottom;} 
.toggle_container { margin: 0 0 5px; padding: 0; border-top: 1px solid #d6d6d6; background: #f0f0f0 url(images/misc/toggle_block_stretch.gif) repeat-y left top; overflow: hidden; width: 700px; clear: both;
}
.toggle_container .block { padding: 10px 6px;  background: url(images/misc/toggle_block_btm.gif) no-repeat left bottom; 
}

Содержимое папки upload архива, закачать в корень форума.

Добавить новый BB код:

Заголовок: Спойлер

Название BB кода: spoiler

Замена:

Код:
<h2 class="trigger"><a href="#">Посмотреть/скрыть содержимое</a></h2>
<div class="toggle_container"> <div class="block"> {param} </div>
</div>

Использовать опцию: Нет

Или если вы используете текст с комментарием к спойлеру

Код:
<h2 class="trigger"><a href="#">"{option}"</a></h2>
<div class="toggle_container"> <div class="block"> {param} </div>
</div>

Тогда внизу просто включите

Использовать опцию: Да

Пример:

Код:
[spoiler]Тут есть скрытый текст[/spoiler]

Или соответственно:

Код:
[spoiler="Текст"]Тут есть скрытый текст[/spoiler]

Описание: BB код скрытия/показа определенного контента в сообщении. По клику происходит плавное появление скрытой информации.

Изображение кнопки: images/editor/spoiler.png

Только его еще руками допиливать слегка надо в стилях CSS h2.trigger. width надо установить 100% а не 700px и margin нижний не 5, а где-то 15-20px. Ну и шрифт уменьшил с 2em до 1.5em .
И еще его почему-то в сложенном состоянии при вложенности в "цитату" последним она не воспринимает картинку спойлера как объект, хотя если под ним добавить строку текста, он оказывается полностью в теле цитаты. Не разобрался почему. При разворачивании все нормально.
 

Вложения

  • Spoiler-JQuery-vB4.zip
    13.5 KB · Просмотры: 92
Последнее редактирование:

Wmboard

Пользователь
Регистрация
01.01.70
Сообщения
9.274
Реакции
2.665
Баллы
28
Адрес
На wmboard
AlexMSQ, спасибо. Так гляди общими усилиями и раздел четверки будет постепенно развиваться на общее благо всех.
 

dstranger1

Пользователь
Регистрация
14.08.13
Сообщения
1
Реакции
0
Баллы
1
Господа, Здравствуйте, подскажите пожалуйста,подойдет ли данное решение для vbuletin 4.1.7?
И сразу еще вопрос: в какой именно части происходит определение переменных yui?
 

Статистика форума

Темы
200.635
Сообщения
380.523
Пользователи
327.873
Новый пользователь
lightnight
Сверху Снизу