Информация

"4admins.ru" Рекомендует

BBCode jquery spoiler

Разные довески в сообщениях
  • Автор 
    Сообщение
Аватара пользователя
Сообщения: 7041
Зарегистрирован: 11 авг 2009, 16:58
Благодарил (а): 659
Поблагодарили: 2347 раз в 1746 сообщениях
Город: Москва
Пол: Мужской
Адрес форума: http://help.4admins.ru
Баллы репутации: 167

BBCode jquery spoiler

Сообщение Добавлено: 28 дек 2012, 22:51

BBCode jquery spoiler

Использование BBCode
Код: Выделить всё
[spoiler={TEXT1}]{TEXT2}[/spoiler]

Замена HTML
Код: Выделить всё
    <div class="container">
    <div class="box closed">
                    <h6>
                        {TEXT1}
                        <span class="l"></span><span class="r"></span>
                    </h6>
                    <div class="hide"><span class="s">Show</span><span class="h">Hide</span></div>
                    <div class="block">
                        <div class="block_in">
                               {TEXT2}
                        </div>
                    </div>
                </div>
   
    </div>


Подсказка
Код: Выделить всё
[spoiler=Название спойлера]скрытый текст[/spoiler]

Пример работы
Код: Выделить всё

[spoiler=Название спойлера]скрытый текст[/spoiler]



Название спойлера
скрытый текст



Дополнительно
В теме стиля нужно добавить код в самый конец
Следующий код
Код: Выделить всё
.box {
    background:#fff;
    margin-bottom:20px;
    padding:0;
    position: relative;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -webkit-box-shadow:0 0 10px #DCDCDC inset;
    -moz-box-shadow:0 0 10px #DCDCDC inset;
    box-shadow:0 0 10px #DCDCDC inset;
}
.box h6 {
    font-size:1em;
    font-weight:700;
    text-transform:uppercase;
    color:#444;
    background: #ddd;
    margin:0 -10px -1px -10px;
    padding:12px;
    padding-left: 15px;
    padding-right: 45px;
    -webkit-box-shadow:0 0 10px #DCDCDC inset;
    -moz-box-shadow:0 0 10px #DCDCDC inset;
    box-shadow:0 0 10px #DCDCDC inset;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
}

.block {
    padding:0;
}

.block_in {
    padding:12px;
}

.box div.hide {
display: block;
width: 40px;
line-height: 24px;
position: absolute;
right: 5px;
top: 8px;
cursor: pointer;
font-size: 10px;
text-transform: uppercase;
text-align: center;
border: solid 1px #aaa;
background: #f5f5f5;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-box-shadow:0 0 4px #DCDCDC inset;
-moz-box-shadow:0 0 4px #DCDCDC inset;
box-shadow:0 0 4px #DCDCDC inset;
}

.box div.hide:hover {
background: #fff;
}

.box div.hide span.h {    display: block;}
.box div.hide span.s {    display: none;}
.box div.show  span.h {    display: none;}
.box div.show  span.s {    display: block;}

.closed div.hide span.h {    display: none;}
.closed div.hide span.s {    display: block;}
.closed div.show  span.h {    display: block;}
.closed div.show  span.s {    display: none;}


Так же необходимо подключить библиотеку JQUERY

В шаблоне overal_header
перед </head> добавить
Код: Выделить всё
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


в шаблоне overal_footer
перед </body> добавить

Код: Выделить всё
<script>
             $(".box .block").show();
             $(".closed .block").hide();

             $("div.hide").click(function(){
                $(this).toggleClass("show").next().slideToggle("medium");
             });
          </script>
На этом сервисе можно cоздать форум бесплатно

За это сообщение пользователя GoDFaTHeR поблагодарили:
SanyaFox

Сообщения: 76
Зарегистрирован: 19 дек 2012, 17:36
Благодарил (а): 11
Поблагодарили: 5 раз в 4 сообщениях
Город: Вологда
Пол: Мужской
Адрес форума: Нету. Помогаю другим форумам.
Баллы репутации: 0

Re: BBCode jquery spoiler

Сообщение Добавлено: 30 дек 2012, 00:41

Не получается =-(

Аватара пользователя
Сообщения: 7041
Зарегистрирован: 11 авг 2009, 16:58
Благодарил (а): 659
Поблагодарили: 2347 раз в 1746 сообщениях
Город: Москва
Пол: Мужской
Адрес форума: http://help.4admins.ru
Баллы репутации: 167

Re: BBCode jquery spoiler

Сообщение Добавлено: 30 дек 2012, 23:04

GoldenCheater
что именно?

Почему нельзя написать содержательный пост?
Делал то и то , получилось то и то... не работает
На этом сервисе можно cоздать форум бесплатно

Сообщения: 67
Зарегистрирован: 09 янв 2013, 12:49
Благодарил (а): 11
Поблагодарили: 0 раз в 0 сообщении
Город: Бишкек
Пол: Женский
Адрес форума: www.weforum.80lvl.ru
Баллы репутации: 0

Re: BBCode jquery spoiler

Сообщение Добавлено: 14 янв 2013, 14:39

Помогите Я все как сдесь говорилось сделал но у меня с сайтом что-то не ладное помогите
Изображение

Автор не может молчать 19 секунд и добавляет ...

Срочно

Аватара пользователя
Сообщения: 616
Зарегистрирован: 18 июл 2012, 17:51
Благодарил (а): 13
Поблагодарили: 234 раз в 209 сообщениях
Пол: Мужской
Адрес форума: http://cabinetadmina.ru
Баллы репутации: 48

Re: BBCode jquery spoiler

Сообщение Добавлено: 14 янв 2013, 17:07

"Weforum" писал(а):
Помогите Я все как сдесь говорилось сделал но у меня с сайтом что-то не ладное помогите

Что-то не видно, не одно элемента из инструкции.

Вот что странно, по структуре стиль вроде как prosilver, а в хедере:
Код: Выделить всё
<link href="./styles/subsilver2/theme/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
<link href="./styles/subsilver2/theme/stylesheet.css" rel="stylesheet" type="text/css" media="screen, projection" />

<link href="./styles/subsilver2/theme/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="./styles/subsilver2/theme/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
<link href="./styles/subsilver2/theme/large.css" rel="alternate stylesheet" type="text/css" title="A++" />


стили от subsilver2?! ...

зы. Адм. раздел -> Стили -> напротив установленного стиля (он со значком - *) -> Информация -> выпадающие списки. "Тема" должна соответствовать установленному стилю - prosilver.
http://cabinetadmina.ru/ - Сервис по оптимизации, модернизации и раскрутке ваших форумов.

Сообщения: 67
Зарегистрирован: 09 янв 2013, 12:49
Благодарил (а): 11
Поблагодарили: 0 раз в 0 сообщении
Город: Бишкек
Пол: Женский
Адрес форума: www.weforum.80lvl.ru
Баллы репутации: 0

Re: BBCode jquery spoiler

Сообщение Добавлено: 14 янв 2013, 17:40

Блин пришлось менять стиль форума (( но все равно спасибо CornerAdmin

Аватара пользователя
Сообщения: 616
Зарегистрирован: 18 июл 2012, 17:51
Благодарил (а): 13
Поблагодарили: 234 раз в 209 сообщениях
Пол: Мужской
Адрес форума: http://cabinetadmina.ru
Баллы репутации: 48

Re: BBCode jquery spoiler

Сообщение Добавлено: 14 янв 2013, 18:44

Weforum
Если сильно напортачили и ничего особенно ценного в шаблонах сделать не успели, есть прекрасная функция - "Обновить". В этом случае все данные будут заменены на содержимое с сервера. Все изменения, произведённые с помощью редактора шаблонов и сохранённые в базе данных, будут потеряны.
http://cabinetadmina.ru/ - Сервис по оптимизации, модернизации и раскрутке ваших форумов.

Аватара пользователя
Сообщения: 160
Зарегистрирован: 02 янв 2014, 23:03
Благодарил (а): 3
Поблагодарили: 3 раз в 3 сообщениях
Город: ОАЭ
Пол: Мужской
Адрес форума: http://ivbb.4adm.ru
бабло: 0
Баллы репутации: 4

Re: BBCode jquery spoiler

Сообщение Добавлено: 10 фев 2014, 19:45

Вообщем вот что получилось


Изображение

Когда добавляешь название спойлера это название ложится под кнопку большим шрифтом ! Как исправить чтобы было правее кнопки и шрифтом поменьше?
Да и если добавляешь сылку в спойлер она становится нерабочая почему ?

Все делал как здесь описано

Аватара пользователя
Сообщения: 688
Зарегистрирован: 24 июн 2010, 13:42
Благодарил (а): 122
Поблагодарили: 312 раз в 210 сообщениях
Город: Москва
Пол: Женский
Адрес форума: http://foxlodge.fatbb.ru
Баллы репутации: 39

Re: BBCode jquery spoiler

Сообщение Добавлено: 11 фев 2014, 08:08

"M4G" писал(а):
Как исправить чтобы было правее кнопки и шрифтом поменьше?

А фаербуг Вам на что? :) Почему не пользуетесь?

Уберите все указания о padding в теме стиля к заголовку h6.
Вместо них добавьте: padding: 2px 45px 2px 65px;

Найти:
Код: Выделить всё
padding:12px;
    padding-left: 15px;
    padding-right: 45px;

Заменить на:
Код: Выделить всё
padding: 2px 45px 2px 65px;

Аватара пользователя
Сообщения: 160
Зарегистрирован: 02 янв 2014, 23:03
Благодарил (а): 3
Поблагодарили: 3 раз в 3 сообщениях
Город: ОАЭ
Пол: Мужской
Адрес форума: http://ivbb.4adm.ru
бабло: 0
Баллы репутации: 4

Re: BBCode jquery spoiler

Сообщение Добавлено: 11 фев 2014, 11:02

Alice

А фаербуг невидит заголовок спойлера !
Вот что получилось !
Первый спойлер вообще в полоску превратился и неоткрывается так как он без заголовка
А со вторым все ок

Изображение

Если я меня обратно на padding: 12px 45px 12px 65px;
То с первым спойлером все хорошо
А второй спойлер становится толще а мне ненадо чтоб он становился толще!

Изображение


Вернуться в BBcode phpbb3

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1