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

Скрипты

Рисунок Древовидный спойлер
x;z-index:1 }
Древовидный спойлер Древовидный спойлер
оценка: 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. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.

x;z-index:1 }


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


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

rss
Категория:Скрипты
Просмотрено:8591
Рейтинг: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:

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

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



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