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


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

2715
8.2 из 10
Проголосовало: 7






сворачивающиеся/разворачивающиеся блоки на куках

Установка:

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://s39.ucoz.net/.s/img/icon/minus.png') no-repeat;width:16px;height:16px;float:right;cursor:pointer;margin-right:4px;}  
  .bopen {background: url('http://s39.ucoz.net/.s/img/icon/plus.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://webo4ka.ru/Ucoz5/trane73.bcookie_cvorachivanie_blokov.js"></script>


На этом заканчивается установка блоков с моим дизайном. Он очень прост, но имея желаение Вы можете изменить стиль под свои нужды.

2 вариант

Установка сворачивания/разворачивания на свои блоки.

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

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

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
.blocks {border:1px solid #cecece;margin:10px 4px}  
  .bclose {background: url('http://s39.ucoz.net/.s/img/icon/minus.png') no-repeat;width:16px;height:16px;float:right;cursor:pointer;margin-right:4px;}  
  .bopen {background: url('http://s39.ucoz.net/.s/img/icon/plus.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://webo4ka.ru/Ucoz5/trane73.bcookie_cvorachivanie_blokov.js"></script>
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://trane73.ru/
  • Всего комментариев: 6

kolyan1282
0
kolyan1282 написал: Написано 19 Февраля 2012 в 12:25
Комментарий №5
Я прописал, не сохраняется

kolyan1282
0
kolyan1282 написал: Написано 19 Февраля 2012 в 11:31
Комментарий №4
У меня все работает, но после обновления страницы свернутый блок опять открывается! Что делать??? ПОМОГИТЕ!!!! Заранее СПАСИБО

Kavrasky
0
Kavrasky написал: Написано 27 Ноября 2011 в 17:05
Комментарий №1
не пашет...

doc74
+1
doc74 написал: Написано 01 Января 2012 в 18:54
Комментарий №2
Не знаю на счёт 1-го, а 2-й способ точно работает! cool

k43
0
k43 написал: Написано 21 Января 2012 в 06:47
Комментарий №3
1 способ тоже робит dry

carateli44
0
carateli44 написал: Написано 03 Июля 2013 в 14:26
Комментарий №6
2-й робит!! cool

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2113
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Ох. Вижу, что обсуждение очень старое. Но!
На других CMS так же будет все это реализовано. На нормальных CMS.
Такое решение может подойти лишь для landing сайтов. Но и то, не думаю, что там кто то заморачивается в написании какого либо контроллера генерирования шаблона и используют прямо в лоб чистый HTML, поэтому и будут для каждой страницы свои блоки делать.

Поэтому лучше тут все же дописать решение именно для ucoz без загрузки этих лишних блоков на странице. Ведь используя условные операторы этот код даже не будет прогружаться на странице. (Лол. Это ж доли секунд загрузки...) И что? Но давайте делать оптимальнее
Моё авторство:)
  • 1488 написал:
  • 1488 написал:
  • Смысл исходный код? он возвращает после обновление страницы на то положение которое было... или как?
  • 1488 написал:
  • как поставить галки как скрине?
    а то невозможно поставить...
  • Handyman написал:
  • Не появляется код безопасности для обычных пользователей
    Последние темы
    Опрос
    432
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 5
    Гостей: 5
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: