S1nner - Сворачивающиеся блоки на Cookies

Главная Форум Новые сообщения Поиск Люди Вход Регистрация

Правила проекта!

1. Флуд в комментариях строго запрещается! → Наказание — 1 день бана.
2. Не оскорблять пользователей проекта → Наказание — 8~ часов бана.

Страница 1 из 1
1

Сворачивающиеся блоки на Cookies

S1nner

Дата: Среда, 14.09.2011, 00:30 | Сообщение # 1

1 вариант.
Установка моих сворачивающихся блоков.
Вот сам код блока (вставляете, например, в конструктор шаблонов или меняете все блоки на эти):

Code

<div class="blocks">
<div class="btitle"><div class="bclick bclose" rel="bid1"></div>TITLE</div>
<div class="bcontent" id="bid1">CONTENT</div>
</div>

Здесь нужно помнить что bid1 должен быть уникальным для каждого блока, можно bid2, bid3 и т.д. Как Вам будет удобнее, но чтоб они не повторялись на странице.

Затем добавляете в CSS следущий стиль:

Code

.blocks {border:1px solid #cecece;margin:10px 4px}
    .bclose {background: url('http://s1nner.3dn.ru/img/m.png') no-repeat;width:16px;height:16px;float:right;cursor:pointer;margin-right:4px;}
    .bopen {background: url('http://s1nner.3dn.ru/img/p.png') no-repeat;width:16px;height:16px;float:right;cursor:pointer;margin-right:4px;}
    .btitle {padding:4px;padding-left:6px;font-weight:bold;}
    .bcontent {padding:10px;border-top:1px solid #cecece;}

Картинки можете перезалить себе, но если лень, то оставьте мои, я всё равно не буду их удалять =)

И теперь ставите перед следующий скрипт:

Code

На этом заканчивается установка блоков с моим дизайном. Он очень прост, но имея желаение Вы можете изменить стиль под свои нужды.

2 вариант.
Установка сворачивания/разворачивания на свои блоки.

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

И так, первое, что нужно сделать, это установить кнопочку сворачивания/разворачивания. Для этого в код Вашего блока перед названием вставляем следующей код:

Code

Должно получиться примерно так:

Code

<div class="bclick bclose" rel="bid1"></div>Название блока

Затем нужно добавить код к содержанию блока. Вот пример контента блока:

Code

<div style="border-top:0;" class="xw-mc contentBg">Тут контент</div>

Нужно добавить класс и айди:

Code

<div style="border-top:0;" class="xw-mc contentBg bcontent" id="bid1">Тут контент</div>

Если уже присутствует class, то просто через пробел дописывайте его, если существует id, то его нужно убрать и поставить этот (если тот айди используется для стилей, то заменить его на class).

После чего аналогично добавляете в CSS следующий стиль:

Code

.bclose {background: url('http://s1nner.3dn.ru/img/m.png) no-repeat;width:16px;height:16px;float:right;cursor:pointer;margin-right:4px;}
.bopen {background: url('http://s1nner.3dn.ru/img/p.png') no-repeat;width:16px;height:16px;float:right;cursor:pointer;margin-right:4px;}

И перед

Code

</body>

ставите всё тот же скрипт:

Code

Прикрепления: 6112392.jpg (22.0 Kb)