Проверен лично мной. Модер, если в неправильном разделе разместил - плиз перетащи. Думаю здесь ему больше место подходит.
Spoiler (на jQuery)
JavaScript подключаем в шаблон headinclude:
Вставить код сразу над определением переменных yui:
Так что не забудьте, что jQuery мы уже подключили на всём форуме и если вы будете использовать ещё какие-нибудь "плюшки" использующие эту библиотеку, то повторно подключать jQuery (файл jquery.min.js) НЕ НУЖНО.
От себя добавлю, что я добавил весь код, однако указанного файла http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js не существует по указанному адресу. Тем не менее Вобла 4 сама подкидывает jQuery от Гугла по умолчанию, что соответственно можно задать в одной из основных настроек. Так что вот эта часть:
для вставки необязательна.
В Управление стилями - у выбранного стиля из выпадающего меню выбрать Основная таблица CSS - Дополнительные определения CSS
Примечание, для использования в vBulletin 4
CSS код вставлять в шаблон additional.css
Вставить следующий код (во второе поле):
Содержимое папки upload архива, закачать в корень форума.
Добавить новый BB код:
Заголовок: Спойлер
Название BB кода: spoiler
Замена:
Использовать опцию: Нет
Или если вы используете текст с комментарием к спойлеру
Тогда внизу просто включите
Использовать опцию: Да
Пример:
Или соответственно:
Описание: BB код скрытия/показа определенного контента в сообщении. По клику происходит плавное появление скрытой информации.
Изображение кнопки: images/editor/spoiler.png
Только его еще руками допиливать слегка надо в стилях CSS h2.trigger. width надо установить 100% а не 700px и margin нижний не 5, а где-то 15-20px. Ну и шрифт уменьшил с 2em до 1.5em .
И еще его почему-то в сложенном состоянии при вложенности в "цитату" последним она не воспринимает картинку спойлера как объект, хотя если под ним добавить строку текста, он оказывается полностью в теле цитаты. Не разобрался почему. При разворачивании все нормально.
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 .
И еще его почему-то в сложенном состоянии при вложенности в "цитату" последним она не воспринимает картинку спойлера как объект, хотя если под ним добавить строку текста, он оказывается полностью в теле цитаты. Не разобрался почему. При разворачивании все нормально.
Вложения
Последнее редактирование: