Приветствую Вас Прохожий | RSS Воскресенье, 04.12.2016, 00:52
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 8
Гостей: 7
Пользователей: 1
LESIYI



Главная » Файлы » Скрипты для uCoz » Скрипты блоки и шапки

Сворачивающиеся блоки на 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>


Вот и всё =)

Автор: TRANE73
Страница с демо: ТУТ
Автор\Источник: trane73.ru

Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Просмотров: 3044 | Комментарии: 12 | Рейтинг: 5.0/2 | |Категория: Скрипты блоки и шапки | Добавил: TRANE73 | Дата: 13.06.2011 | Скачали: 0 | Теги: cookies, TRANE73, Сворачивающиеся, блоки
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 12
12 woland333   Дата: 10.11.2011  Время: 00:07   [№ 11053]
Ну да, получилось. Сенк'ю

9 V-style   Дата: 20.06.2011  Время: 15:06   [№ 9129]
А как там ширину увеличить?

10 TRANE73   Дата: 21.06.2011  Время: 00:10   1 [№ 9144]
здесь нигде я ширину не указывал, блоки автоматически растянуться по всей области

11 V-style   Дата: 21.06.2011  Время: 00:55   2 [№ 9145]
а ты можешь сделать, чтобы где "+" "-" фон можно было свой сделать? Ато белый как-то нито :)

7 on-zl   Дата: 14.06.2011  Время: 22:22   [№ 9057]
СПАСИБО!))))))

8 TRANE73   Дата: 14.06.2011  Время: 23:30   1 [№ 9059]
незачто

3 TRANE73   Дата: 13.06.2011  Время: 20:37   [№ 9027]


радует что 6 моих же материалов =)

5 German   Дата: 13.06.2011  Время: 21:00   1 [№ 9031]
Хватит умничать :D

6 TRANE73   Дата: 13.06.2011  Время: 21:34   2 [№ 9033]
в чем я умничаю?

1 mdbaner   Дата: 13.06.2011  Время: 19:57   [№ 9025]
Мне всегда интересно сколько ты времени потратил ?

2 TRANE73   Дата: 13.06.2011  Время: 20:14   1 [№ 9026]
на что именно? =)

4 TRANE73   Дата: 13.06.2011  Время: 20:38   1 [№ 9028]
еще хочешь выложу скрипт ну и для твоего использования чтоб подкомментарии не сужались, а были всегда все только 2 уровня?


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

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Куплю сайты с ТИЦ/PR (п...

9

2 Предлагаю услуги для ан...

0

3 Предлагаю услуги по про...

0

4 Комплексный прогон сайт...

51

5 Сайт онлайн фильмов на ...

1

6 Проблема с таблицей

9

7 Отредактировать фото

2

8 Уже все перепробовал )

1

9 Скрипт "Нравится&q...

3

10 Меню для сайта

3


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru