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

2905
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 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Радио не стоит на месте новая версия вам 1.5:
    Что нового:
    1. Media Session - позволит вам переключать из бара браузера радио, а также на блоке экрана.
    2. Новые радиостанции.
    3. Новый API код.

    Демо: fiddle
    Реальная полная версия: woobl
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
    Последние темы
    Опрос
    470
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 3
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: