Древовидный спойлер
Скрипты
Древовидный спойлерСоздаем древовидный спойлер с неограниченной вложенностью. Такой спойлер пригодится, скажем, для карты сайта, а также для связанных или вложенных структур. Этот спойлер основан на фреймворке jQuery.
Пример:
Ну что же, начнем. Чтобы все работало, нужно подключить к странице jQuery, если он не подключен автоматически (как у сайтов на UCOZ). Делается это следующим кодом, который нужно разместить в теле HEAD страницы:
Там же, в теле HEAD нужно прописать следующий скрипт, который и будет отвечать за функционал нашего древовидного спойлера:
$(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. Мой вариант стилей такой:
.sptCont{display:none;padding:3px 3px 3px 15px;}
.sptCapt{font-weight:bold;}
</style>
Можете оформить спойлер по-своему, но свойство класса sptCont display:none лучше оставить.
Осталось разместить ваш спойлер там, где вы хотите его увидеть. Спойлер должен соответствовать следующей структуре:
Текст внутри спойлера...
</div></div>
Вложенность спойлеров друг в друга неограничена. Количество спойлеров и место их размещения тоже ограничений не имеет.
На этом все. Удачи в свершениях!
Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
Древовидный спойлер
Скрипты
Скрипты, инструкции, справочники
Для работы понадобится jQuery.
| Категория: | Скрипты |
| Просмотрено: | 8484 |
| Рейтинг: | 5.0/3 |
| Дата добавления: | 2010-08-25 19:48, Среда |
| Добавил: | Szen |
| Теги: | jquery, спойлер |
Рекомендуем
Дополнительно к Древовидный спойлер
Мини-форум
| № 0 | 2010-08-25 19:48 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Древовидный спойлер". |
| Гость |
| № 1 | 2010-08-26 13:54 |
| SergLI | Здорово! Огромное спасибо за оперативность и профессионализм в обучении начинающих! Будьте добры, если вместо слов спойлер (в теме спойлер) и + - в этой теме подставить некий img(+-), то будет работать или нужны некие добавления в коды этих тем? Добавьте в эти темы строчки про img+ и img- в качестве открытия и закрытия спойлера. Заранее благодарю! |
| Сергей |
| № 3 | 2010-08-26 19:02 |
Szen | Тег SPAN в скрипте не участвует, поэтому и его присутствие/отсутствие не играет никакой роли.  А вообще, эксперементируйте, и все у вас получится! |
| Szen |
| № 5 | 2010-11-04 13:33 |
| Szen | Grenad, для начала, подробно изучить JavaScript. Поставленную задачу решить можно, если у вас имеются хотя бы базовые знания JavaScript. |
| Szen |
