Главная » 2011 » Июнь » 13 » Сворачивающиеся блоки на Cookies by TRANE73 (Скрипты для ucoz)
13.06.2011, 19:46

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



Сегодня написал сам скрипт и инструкцию по установке сворачивающихся/разворачивающихся блоков для любых сайтов. Скрипт очень простой, но если ставить не на uCoz, то нужно подключить jQuery. Сам скрипт взял из паблик-шаблона, сам же только переписал функции под более удобное использование.



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
<script type="text/javascript" src="http://trane73.ru/demo/blocks/trane73.bcookie.js"></script>


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

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

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

Первое, что нужно сделать, это установить кнопку сворачивания/разворачивания наших блоков. Для этого перед названием блока вставляем следующей код:
Code
<div class="bclick bclose" rel="bid1"></div>


Должно получиться подобное:
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
<script type="text/javascript" src="http://trane73.ru/demo/blocks/trane73.bcookie.js"></script>


Вот и всё =)

Страница с демо: ТУТ
Материал взят с сайта infoscript.ru
Теги: Скачать Сворачивающиеся блоки на Cookies by TRANE73
Скачать "Сворачивающиеся блоки на Cookies by TRANE73"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: http://trane73.ru/ TRANE73
Категория: Скрипты uCoz | Просмотров: 5096 | Добавил: TRANE73 | Рейтинг: 4.0/9 |
Теги: cookies, блоков, сворачивание, куки
Всего комментариев: 23 1 2 »
0  
1 Сай_22 -Infoscript Team-  (14.06.2011 14:12) [Материал]
Аватар пользователя
Ура! Точто мне надо! И какраз вовремя!
Спасибо, TRANE73. Вечно что то как придумаешь biggrin

0  
2 TRANE73   (14.06.2011 20:40) [Материал]
Аватар пользователя
всегда пожалуйста =)

0  
3 FoxSter   (14.06.2011 21:22) [Материал]
Аватар пользователя
Да!! Спасибо тебе очень полезно, особенно если много блоков!!
Вот только если можнобыло бы , то я бы пару изменений внес( ага, еслиб умел ещё biggrin )
Они выдвигаются резко(ну покрайней мере в демо)
Вот сделать бы плавно вот тогда вообще будет зверзко!!! happy

0  
4 TRANE73   (14.06.2011 21:55) [Материал]
Аватар пользователя
slideToggle будет в след версии

0  
16 7soft -Infoscript Team-  (24.06.2011 16:18) [Материал]
Аватар пользователя
У меня раньше SlideToggle был, но пришлось заменить на hide - в старых браузерах баги с анимацией скрытия... sad

0  
5 FoxSter   (14.06.2011 22:17) [Материал]
Аватар пользователя
аа, вот это действително хорошо, что такую идею не забрасываетте

0  
6 MaSTerGuiTar -Infoscript Team-  (18.06.2011 15:58) [Материал]
Аватар пользователя
что то неработает у меня wacko

0  
7 MaSTerGuiTar -Infoscript Team-  (18.06.2011 19:29) [Материал]
Аватар пользователя
Всё.. После часа мучений заработал =)

0  
8 Сай_22 -Infoscript Team-  (18.06.2011 23:24) [Материал]
Аватар пользователя
Да ну? О_О
Япоставил за 3 минуты, но он мне кукисы не писал и я снёс smile

0  
10 TRANE73   (19.06.2011 22:31) [Материал]
Аватар пользователя
что то не правильно поставил, поэтому не писал

0  
11 Сай_22 -Infoscript Team-  (20.06.2011 03:15) [Материал]
Аватар пользователя
Ну у меня, попросту, fieldset и legend, поэтому, скорее всего, из-за этого biggrin

0  
12 TRANE73   (21.06.2011 00:11) [Материал]
Аватар пользователя
100%

0  
13 Сай_22 -Infoscript Team-  (21.06.2011 01:09) [Материал]
Аватар пользователя
Ну вот и я о том же, так что рыться в Js не буду пока не сделаешь версию с slideToggle

0  
14 TRANE73   (23.06.2011 23:12) [Материал]
Аватар пользователя
через недельку

0  
15 Сай_22 -Infoscript Team-  (24.06.2011 00:21) [Материал]
Аватар пользователя
Эксклюзивом для меня накатаешь для <legend> и <fieldset>? ))

0  
9 TRANE73   (19.06.2011 22:31) [Материал]
Аватар пользователя
нет, не в хеад

1-6 7-11
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]