Древовидный спойлер

Скрипты

Рисунок Древовидный спойлер
Древовидный спойлер Древовидный спойлер
оценка: 5.0 из 5
оценок: 3, отзывов: 5

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

Пример:



+ c:\
+ windows
explorer.exe
winnt.bmp
hiberfil.sys
boot.ini
+ d:\
+ video
avatar.avi
aangava.wmv
+ music
autor-song.mp3
desktop.ini


Ну что же, начнем. Чтобы все работало, нужно подключить к странице 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. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Древовидный спойлер
Скрипты
Скрипты, инструкции, справочники


Для работы понадобится jQuery.

rss
Категория:Скрипты
Просмотрено:6949
Рейтинг:5.0/3
Дата добавления:2010-08-25 19:48, Среда
Добавил:Szen
Теги:jQuery, спойлер

Мини-форум

№ 02010-08-25 19:48
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Древовидный спойлер".
Гость
№ 1
2010-08-26 13:54 Спам
SergLI
Аватар участника SergLI
Здорово! Огромное спасибо за оперативность и профессионализм в обучении начинающих!
Будьте добры, если вместо слов спойлер (в теме спойлер) и + - в этой теме подставить некий img(+-), то будет работать или нужны некие добавления в коды этих тем? Добавьте в эти темы строчки про img+ и img- в качестве открытия и закрытия спойлера. Заранее благодарю!
Сергей
№ 2
2010-08-26 17:55 Спам
SergLI
Аватар участника SergLI
т.е. чтобы спойлер открывался от картинки, а не от текста.
Сергей
№ 3
2010-08-26 19:02 Спам
Szen
Аватар участника Szen
Тег SPAN в скрипте не участвует, поэтому и его присутствие/отсутствие не играет никакой роли. smile

А вообще, эксперементируйте, и все у вас получится! smile
А если не получится, то мы поможем!

Szen
№ 4
2010-11-03 19:48 Спам
Grenad
Аватар участника Grenad
и как чтото я не понял зделать чтоб от картинки открывался
Генадий
№ 5
2010-11-04 13:33 Спам
Szen
Аватар участника Szen
Grenad, для начала, подробно изучить JavaScript. Поставленную задачу решить можно, если у вас имеются хотя бы базовые знания JavaScript.
Szen
Учавствовать в обсуждении "Древовидный спойлер" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Во сколько оцените портал
Всего ответов: 1896
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 6
Гостей: 6
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz