Уроки Аккордеон для сайта
25 апреля 2013
7388
Аккордеон для сайта

Аккордеон для сайта

Сложность Рубрика JavaScript Браузеры
Демонстрация » Скачать »

Примером данного урока, является скрипт аккордеона для сайта, который выполняет функцию сворачивания и разворачивания контента. Давайте разберем пример: допустим, у Вас есть интернет-магазин, который имеет объемную сортировку товаров по цене, длине, ширине и прочих параметров фильтрации. Намного практичней будет ведь спрятать ее, после фильтрации, так как это освободит достаточно места и будет удобней просматривать товары.

 

Вот, вот...я о том же! Правильно расположить элементы на сайте и оптимизировать сайт под пользователя - является составляющим звеном в дизайне сайта, который оценит каждый пользователь!

 

Чтобы было понятней как работают данные скрипты, давайте разберем их на примере, вернее рассмотрим их код. Всего для Вас я подготовил четыре скрипта, которые как никах, найдут свое место на Вашем сайте по назначению!

 

 

Пример 1.

Основная функция данного скрипта, плавное сворачивание контента, затем такой же обратный ход при разворачивании. Прописываем javascript код, у которого имеется переменная svernutRazvernutFormu, она взаимодействует с тегом span класса svernutRazvernutText. При выводе функция при клике slideToggle взаимодействует с тегом div класса form1, тем самым открывая и закрывая текст. 

 

<script type="text/javascript">
$(document).ready(function()
{
$(".svernutRazvernutFormu").click(function()
{
var text = $(".svernutRazvernutText").text();
if (text == "Свернуть <")
{
$(".svernutRazvernutText").html("Развернуть >");
}
else
{
$(".svernutRazvernutText").html("Свернуть <");
}
$(".form1").slideToggle();
});
});
</script>

 

<div class="svernutRazvernutFormu">
<label class="button">
<span class="svernutRazvernutText">Свернуть <</span>
</label>
</div>
<br>
<div class="form1">
Будет размещаться любой Ваш текст!!!
</div>

 

Пример 2.

 

В данном примере процесс схожий с предыдущим примером, разница только в том, что уже сам метод проще и является событием, то есть при нажатии на кнопку событие onclick с функцией slideToggle('slow') действует на класс form2.

 

<a class="button" onclick="$('#form2').slideToggle('slow');" 
href="javascript://">Свернуть/Развернуть</a><br><br>
<div id="form2">
Будет размещаться любой Ваш текст!!!
</div>

 

Пример 3.

 

Действия идентичны с предыдущим примером, единственных два отличия: текст свернут и к тегу div прибавился стиль display:none;.

 

<a class="button" onclick="$('#form3').slideToggle('slow');"
href="javascript://">Свернуть/Развернуть</a><br><br>
<div id="form3" style="display:none;">
Будет размещаться любой Ваш текст!!!
</div>

 

Пример 4.

 

Действия реализуется посредством наведении мышки, один раз наводишь на текст -  разворачивается текст, второй раз - сворачивается. Процесс вызван событием onMouseOver.

 

<a class="button" onMouseOver="$('#form4').slideToggle('slow');"
 href="javascript://">Свернуть/Развернуть</a><br><br>
<div id="form4">
Будет размещаться любой Ваш текст!!!
</div>

 

Спасибо за внимание к данному уроку, надеюсь материал был для Вас полезным!





Роман Краутер