Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 18.118.10.36
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Сворачивающиеся блоки
Сообщение оставлено 21.06.2011 в 08:04:33 | Сообщение #1

http://i071.radikal.ru/1106/f5/1b4312bd543c.png

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

[Table]1 вариант установки
Установка моих сворачивающихся блоков (полностью мой код блоков)[/Table]

[Table]Код блока (вставляете его в конструктор шаблонов или же поменяете все блоки на эти):[/Table]

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


[Table]Поймите и запомните то, что bid1 должен быть уникальным для каждого вашего блока, например, можно bid2, bid3 и т.д.
Но главное, чтоб эти айди не повторялись на странице![/Table]

[Table]После чего добавьте в CSS этот стиль[/Table]

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;}


[Table]Картинки, естественно, можно перезалить к себе на сайт, но можете оставить мои, я всё равно не буду их удалять =)[/Table]
[Table]
И наконец, ставите перед вот этот скрипт:[/Table]

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

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

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

Code
<div class="bclick bclose" rel="bid1"></div>


[Table]Должно получиться подобное:[/Table]

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


[Table]Затем нужно добавить специальный код к содержанию блока. Вот в пример код контента моего блока:[/Table]

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


[Table]Нужно добавить специальные класс и айди:[/Table]

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


[Table]Если в коде уже присутствует class, то через пробел просто допишите его, а если существует id, то его нужно убрать и поставить мой (если тот айди используется для стилей, то заменить его на class).[/Table]
[Table]
Затем добавляете в CSS этот стиль:[/Table]

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;}


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

Code
<script type="text/javascript" src="http://trane73.ru/demo/blocks/trane73.bcookie.js"></script>

Добавлено (21.06.2011, 08:04:33)
---------------------------------------------
Я походо НЕ В той теме создал
(сори)

_ _ _ _ _

Переместите Пожалуйста



 Сообщение отредактировал GIG140 - Вторник, 21.06.2011, 08:01:38
 
 
   
Сообщение оставлено 25.08.2011 в 17:49:19 | Сообщение #2
Прикольно и выглядит красиво.. smile
 
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика