Форум твоего направления - BB код Spoiler (на jQuery)

- BB коды (http://pcvector.ru/f157)

- - BB код Spoiler (на jQuery) (http://pcvector.ru/t2457)

Spoiler (на jQuery)

BB код Спойлера использующего jQuery библиотеку

http://pcvector.ru/imagehosting/2011...1db657dd5c.png

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

Вставить код:

PHP код:


		
			
<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) НЕ НУЖНО.

В Управление стилями - у выбранного стиляиз выпадающего меню выбрать Основная таблица CSS - Дополнительные определения CSS

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

PHP код:


		
			
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;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/
.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; /*--Padding of Container--*/
    background: url(images/misc/toggle_block_btm.gif) no-repeat left bottom; /*--Bottom rounded corners--*/
}

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

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

Заголовок: Spoiler

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

Замена:

PHP код:


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

Пример:

PHP код:


		
			
[spoiler]Тут есть скрытый текст[/spoiler]

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

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

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

Примечание, для использования в vBulletin 4
CSS код вставлять в шаблон additional.css

Скачать

Re: Spoiler (на jQuery)

скажите а как кнопку в быстрый ответ добавить

Re: Spoiler (на jQuery)

А как этот спойлер центрировать? Не его содержание, а сам спойлер.

Re: Spoiler (на jQuery)

Открыть

В Управление стилями - у выбранного стиля из выпадающего меню выбрать Основная таблица CSS - Дополнительные определения CSS

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

PHP код:
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;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/
.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; /*--Padding of Container--*/
background: url(images/misc/toggle_block_btm.gif) no-repeat left bottom; /*--Bottom rounded corners--*/
}

[-]

Я нашел на своем сайте куда это вставлять , но как сохранить ? Там нету кнопки такой
Вот скрин
http://s1.hostingkartinok.com/upload...a6aaad2799.png

Добавлено через 2 минуты
Я понял как сделать спасибо работает!!

Re: Spoiler (на jQuery)

Когда жму скачать, переходит в другое окно загрузки файла, там жму на стрелочку вниз и выдает, что я не имею прав доступа! Хотя я активировал учетную запись!

Re: Spoiler (на jQuery)

Цитата:

Сообщение от hodor (Сообщение 25594)

http://pcvector.ru/t3797/
нужно оставить не менее 1 сообщения на форуме .Так как вы уже написали свою проблему то уже можете качать :D ) Попробуй еще раз

Re: Spoiler (на jQuery)

Цитата:

Сообщение от Valve (Сообщение 25150)

Я нашел на своем сайте куда это вставлять , но как сохранить ? Там нету кнопки такой

Что то я сам не найду
__________________
Сам нашел :)

Добавлено через 1 час 27 минут
Vector, а как сделать фон скрытого текста темнее? А то в темном стиле не смотрится)

Re: Spoiler (на jQuery)

:39::39::39::39::39::39::39::39::39::39:

Re: Spoiler (на jQuery)

У меня текст, который должен быть внутри спойлера появляется сам по себе под картинкой "Посмотреть/скрыть содержимое"
А при нажатии на эту картинку "Посмотреть/скрыть содержимое", вместо открытия окошка с содержимым, кидает на страницу "Что нового?")))
Ахах) Вставил не туда первый код. Всё хорошо. Спасибо за тему.

Добавлено через 8 минут
А как сделать так, чтобы вместо "посмотреть\скрыть содержимое", можно было написать что-то своё во время написания текста?
Типа этого: [SР="Тут своя надпись"]Тут то, что нужно скрыть[/SР]
И как сделать, чтобы код реагировал на сокращение [sp]