js Спойлер на jQuery с индикацией свернутости и развернутости 

Дата публикации  Дата изменения26.01.15  КомментарииНет   Просмотры3468

Спойлер на jQuery с индикацией состояния: при свернутом — значок плюса, при развернутом — значок минуса. Картинки можно поменять на желаемые. Библиотеку jQuery подключать не требуется — все необходимое содержится в самом скрипте. Количество спойлеров на странице не ограничено; вложенность — любая.

Пример использования:

⇥ Между <head></head>:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Спойлер на jQuery с индикацией открытости/закрытости</title>
<link rel="stylesheet" type="text/css" href="spoiler.css"/> 
<script type="text/javascript" src="spoiler.js"></script>

⇥ Между <body></body>:

<div style="width:900px;margin:0 auto">
<h1>Спойлер на jQuery с индикацией открытости/закрытости</h1>

<p>Текст страницы</p>
<!--spoiler-wrap-->
<div class="spoiler-wrap">
<div class="spoiler-head folded clickable">Спойлер 1</div>
<!--spoiler-body-->
<div class="spoiler-body">Текст спойлера 1</div>
<!--/spoiler-body-->
</div>
<!--/spoiler-wrap-->
<p>Текст страницы</p>                                                     
<!--spoiler-wrap-->
<div class="spoiler-wrap">
<div class="spoiler-head folded clickable">Спойлер 2</div>
<!--spoiler-body-->
<div class="spoiler-body">Текст спойлера 2</div>
<!--/spoiler-wrap-->
</div>

<h2 style="text-align:center;padding-top:20px">Вложенность, вариант 1</h2>

<!--spoiler-wrap1-->
<div class="spoiler-wrap">
<div class="spoiler-head folded clickable">Спойлер 1</div>
<!--spoiler-body1-->
<div class="spoiler-body">Текст спойлера 1
                                                    
<!--spoiler-wrap2-->
<div class="spoiler-wrap">
<div class="spoiler-head folded clickable">Спойлер 2</div>
<!--spoiler-body2-->
<div class="spoiler-body">Текст спойлера 2

<!--spoiler-wrap3-->
<div class="spoiler-wrap">
<div class="spoiler-head folded clickable">Спойлер 3</div>
<!--spoiler-body3-->
<div class="spoiler-body">Текст спойлера 3
<!--/spoiler-body3-->
</div>
<!--/spoiler-wrap3-->
</div>
<!--/spoiler-body2-->
</div>
<!--/spoiler-wrap2-->
</div>
<!--/spoiler-body1-->
</div>
<!--/spoiler-wrap1-->
</div>

<h2 style="text-align:center;padding-top:20px">Вложенность, вариант 2</h2>

<!--spoiler-wrap1-->
<div class="spoiler-wrap">
<div class="spoiler-head folded clickable">Спойлер 1</div>
<!--spoiler-body1-->
<div class="spoiler-body">Текст спойлера 1
                                                    
<div class="spoiler-head folded clickable">Спойлер 2</div>
<!--spoiler-body2-->
<div class="spoiler-body">Текст спойлера 2

<div class="spoiler-head folded clickable">Спойлер 3</div>
<!--spoiler-body3-->
<div class="spoiler-body">Текст спойлера 3
<!--/spoiler-body3-->
</div>
<!--/spoiler-body2-->
</div>
<!--/spoiler-body1-->
</div>
<!--/spoiler-wrap1-->
</div>

</div>

Вид настраивается через css. Скорость сворачивания/разворачивания регулируется в файле spoiler.js:

slow: 1200,
fast: 200

⇥ скорость в миллисекундах; варианты скорости ( fast или slow) указываются в конце скрипта:

$(this).next('div.spoiler-body').slideToggle('slow');

  Размер:  18,84kB | Изменен: 15.10.13 | Загрузок: 210
Бесплатные курсы

Категории

Теги: , ,

Оцените материал:

Рейтинг: 10.0/10 (1)


КомментарииКомментарии:

Нет комментариев к этой статье.


Поля, обозначенные как *, обязательны.





Максимальная длина сообщения 900 символов. Осталось   символов

 

Старые →← Новые