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


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



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



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

Спойлер с подразделами

Спойлер с подразделами Спойлер, с, подразделами
Создаем древовидный спойлер с неограниченной вложенностью. Такой спойлер пригодится, скажем, для карты сайта, а также для связанных или вложенных структур. Этот спойлер основан на фреймворке jQuery.

Ну что же, начнем. Чтобы все работало, нужно подключить к странице jQuery, если он не подключен автоматически (как у сайтов на UCOZ). Делается это следующим кодом, который нужно разместить в теле HEAD страницы:

Code

<script type="text/javascript" src="http://szenprogs.ru/scripts/jquery-1.3.2.js"></script>

Там же, в теле HEAD нужно прописать следующий скрипт, который и будет отвечать за функционал нашего древовидного спойлера:

Code
<script type="text/javascript">
  $(document).ready(function(){
  var sptShow='+';
  var sptHide='-';
  $('.sptLink').click(function(){
  var obj=$(this).parent();
  $(obj).children('div.sptCont').toggle('normal');
  if($(obj).children('a.sptLink').is(':contains('+sptShow+')')){
  $(obj).children('a.sptLink').html(sptHide);
  }else{
  $(obj).children('a.sptLink').html(sptShow);
  }
  return false;
  });
  });
</script>

А теперь наведем чуть-чуть красоты: оформим стили нашего древовидного спойлера. Стиль записывается либо в файл CSS-стилей, либо в теле HEAD внутри тега STYLE. Мой вариант стилей такой:

Code
<style type="text/css">
  .sptCont{display:none;padding:3px 3px 3px 15px;}
  .sptCapt{font-weight:bold;}
</style>

Можете оформить спойлер по-своему, но свойство класса sptCont display:none лучше оставить.

Осталось разместить ваш спойлер там, где вы хотите его увидеть. Спойлер должен соответствовать следующей структуре:

Code
<div><a href="javascript://" class="sptLink">+</a> <span class="sptCapt">Заголовок спойлера</span><div class="sptCont">
  Текст внутри спойлера...
</div></div>

Вложенность спойлеров друг в друга неограничена. Количество спойлеров и место их размещения тоже ограничений не имеет.

Автор\Источник: szenprogs.ru

Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Просмотров: 1966 | Рейтинг: 3.7/3 | |Категория: Скрипты блоки и шапки | Добавил: svamsc | Дата: 26.12.2010 | Скачали: 0 | Теги: спойлер, подразделами
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 0

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

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


Поиск


На форуме

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

51

2 Создать лого на сайт

0

3 Раздача подарков и стик...

0

4 25 жирных ссылок. Яндек...

0

5 выровнять вид материало...

1

6 Продам муз сайт

2

7 прошу вас помогите

1

8 Дополнительный заработо...

3

9 Помогу заработать деньг...

9

10 Продам базу трастовых с...

0


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


Комментарии



Copyright UcozOn.ru™ © 2008-2017


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