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


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



Статистика
Онлайн всего: 5
Гостей: 5
Пользователей: 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

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

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

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

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


Поиск


На форуме

1 Куплю сайты, с посетите...

0

2 Куплю игровой сайт с по...

2

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

51

4 Файловый Менеджер - Выс...

2

5 Календарь

0

6 В каких интернет магази...

9

7 Куплю сайт торговой орг...

0

8 400 рублей на аккаунт =...

6

9 Предлагаю проверенный з...

5

10 Заработай на партнёрств...

4


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


Комментарии



Copyright UcozOn.ru™ © 2008-2017


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