Древовидный спойлер
Скрипты
Создаем древовидный спойлер с неограниченной вложенностью. Такой спойлер пригодится, скажем, для карты сайта, а также для связанных или вложенных структур. Этот спойлер основан на фреймворке 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.ru
Для работы понадобится jQuery.
| Категория: | Скрипты |
| Просмотрено: | 3244 |
| Рейтинг: | 5.0/3 |
| Дата добавления: | 25.08.2010 19:48, Среда |
| Добавил: | Szen |
| Теги: | jQuery, спойлер |
Рекомендуем
Дополнительно к Древовидный спойлер
Мини-форум
| № 0 | 25.08.2010 19:48 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Древовидный спойлер". |
| Гость |
| № 1 | 26.08.2010 13:54 |
| SergLI | Здорово! Огромное спасибо за оперативность и профессионализм в обучении начинающих! Будьте добры, если вместо слов спойлер (в теме спойлер) и + - в этой теме подставить некий img(+-), то будет работать или нужны некие добавления в коды этих тем? Добавьте в эти темы строчки про img+ и img- в качестве открытия и закрытия спойлера. Заранее благодарю! |
| Сергей |
| № 2 | 26.08.2010 14:43 |
| Szen | SergLI, я предполагал такое желание. Поэтому ввел 2 переменные: sptShow и sptHide. Вы можете поменять их состав на свое усмотрение. Скажем так: Code var sptShow='<img src="show.gif" width="16" height="16" border="0" alt="+">'; var sptHide='<img src="hide.gif" width="16" height="16" border="0" alt="-">'; Только при этом нужно будет видоизменить сам блок: Code <div><a href="javascript://" class="sptLink"><img src="show.gif" width="16" height="16" border="0" alt="+"></a> <span class="sptCapt">Заголовок спойлера</span><div class="sptCont"> Текст внутри спойлера... </div></div> |
| Szen |
| № 3 | 26.08.2010 15:02 |
| SergLI | БОЛЬШОЕ СПАСИБО! А чтобы оставить только картинку (без заголовка) и убрать <span class="sptCapt">Заголовок спойлера</span> то работоспособность не измениться? |
| Сергей |
| № 5 | 26.08.2010 19:02 |
| Szen | Тег SPAN в скрипте не участвует, поэтому и его присутствие/отсутствие не играет никакой роли.  А вообще, эксперементируйте, и все у вас получится! |
| Szen |
| № 7 | 04.11.2010 13:33 |
| Szen | Grenad, для начала, подробно изучить JavaScript. Поставленную задачу решить можно, если у вас имеются хотя бы базовые знания JavaScript. |
| Szen |
553.33
рублей/сутки
(16599.9 руб/мес)
(201965.45 руб/год)
Присоединяйтесь!
