Создаем древовидный спойлер с неограниченной вложенностью. Такой спойлер пригодится, скажем, для карты сайта, а также для связанных или вложенных структур. Этот спойлер основан на фреймворке jQuery.
Пример:
Ну что же, начнем. Чтобы все работало, нужно подключить к странице jQuery, если он не подключен автоматически (как у сайтов на UCOZ). Делается это следующим кодом, который нужно разместить в теле HEAD страницы:
Там же, в теле HEAD нужно прописать следующий скрипт, который и будет отвечать за функционал нашего древовидного спойлера:
А теперь наведем чуть-чуть красоты: оформим стили нашего древовидного спойлера. Стиль записывается либо в файл CSS-стилей, либо в теле HEAD внутри тега STYLE. Мой вариант стилей такой:
Можете оформить спойлер по-своему, но свойство класса sptCont display:none лучше оставить.
Осталось разместить ваш спойлер там, где вы хотите его увидеть. Спойлер должен соответствовать следующей структуре:
Вложенность спойлеров друг в друга неограничена. Количество спойлеров и место их размещения тоже ограничений не имеет.
На этом все. Удачи в свершениях!
Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Древовидный спойлер
Скрипты
Скрипты, инструкции, справочники
Для работы понадобится jQuery.
Категория: | Скрипты |
Просмотрено: | 8591 |
Рейтинг: | 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 |