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
| |||||
Категория: Скрипты uCoz | Просмотров: 5096 | Добавил: TRANE73 | Рейтинг: 4.0/9 | | |||||
Теги: |
Всего комментариев: 23 | 1 2 » | ||||||||||||||
|
Кроме того, материал перепечатывали с сайта на сайт, ставили... файл можно найти на Вэбочке (название tables_tablichki_dli_foruma.js).