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

EPL

Дата: Вторник, 21.06.2011, 15:13 | Сообщение # 1

Сообщений: 58

Группа:

Пользователи

Награды: 0

Репутация:

http://s016.radikal.ru/i337/1106/75/4c7ac80cb874.png

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://trane73.ru/demo/blocks/m.png') no-repeat;width:16px;height:16px;float:right;cursor:pointer;margin-right:4px;}
   .bopen {background: url('http://trane73.ru/demo/blocks/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;}

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

И наконец, ставите перед </body> вот этот скрипт:

Code

На это всё =) В этих блоках полностью мой стиль, он очень прост и лаконичен, но если есть желание и знания, то изменить их под себя не составит труда.

2 вариант (подгонка под свои блоки).
Установка сворачивания/разворачивания на свои блоки.

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

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

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://trane73.ru/demo/blocks/m.png') no-repeat;width:16px;height:16px;float:right;cursor:pointer;margin-right:4px;}
.bopen {background: url('http://trane73.ru/demo/blocks/p.png') no-repeat;width:16px;height:16px;float:right;cursor:pointer;margin-right:4px;}

И перед < /body> ставите всё тот же скрипт:

Code

Помог??Поставь +++))

Showt1me

Дата: Пятница, 24.06.2011, 20:53 | Сообщение # 2

Сообщений: 3703

Группа:

V.I.P

Награды: 240

Репутация: