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


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



Статистика
Онлайн всего: 18
Гостей: 15
Пользователей: 3
alexman91, MaDaRa, LESIYI



Главная » Файлы » Скрипты для 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

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

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

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

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


Поиск


На форуме

1 Файловик. Уникальные те...

0

2 Куплю сайты в индексе Я...

1

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

9

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

0

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

0

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

51

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

1

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

9

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

2

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

1


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


Комментарии



Copyright UcozOn.ru™ © 2008-2016


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