Примером данного урока, является скрипт аккордеона для сайта, который выполняет функцию сворачивания и разворачивания контента. Давайте разберем пример: допустим, у Вас есть интернет-магазин, который имеет объемную сортировку товаров по цене, длине, ширине и прочих параметров фильтрации. Намного практичней будет ведь спрятать ее, после фильтрации, так как это освободит достаточно места и будет удобней просматривать товары.
Вот, вот...я о том же! Правильно расположить элементы на сайте и оптимизировать сайт под пользователя - является составляющим звеном в дизайне сайта, который оценит каждый пользователь!
Чтобы было понятней как работают данные скрипты, давайте разберем их на примере, вернее рассмотрим их код. Всего для Вас я подготовил четыре скрипта, которые как никах, найдут свое место на Вашем сайте по назначению!
Основная функция данного скрипта, плавное сворачивание контента, затем такой же обратный ход при разворачивании. Прописываем 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>
В данном примере процесс схожий с предыдущим примером, разница только в том, что уже сам метод проще и является событием, то есть при нажатии на кнопку событие onclick с функцией slideToggle('slow') действует на класс form2.
<a class="button" onclick="$('#form2').slideToggle('slow');"
href="javascript://">Свернуть/Развернуть</a><br><br>
<div id="form2">
Будет размещаться любой Ваш текст!!!
</div>
Действия идентичны с предыдущим примером, единственных два отличия: текст свернут и к тегу div прибавился стиль display:none;.
<a class="button" onclick="$('#form3').slideToggle('slow');"
href="javascript://">Свернуть/Развернуть</a><br><br>
<div id="form3" style="display:none;">
Будет размещаться любой Ваш текст!!!
</div>
Действия реализуется посредством наведении мышки, один раз наводишь на текст - разворачивается текст, второй раз - сворачивается. Процесс вызван событием onMouseOver.
<a class="button" onMouseOver="$('#form4').slideToggle('slow');"
href="javascript://">Свернуть/Развернуть</a><br><br>
<div id="form4">
Будет размещаться любой Ваш текст!!!
</div>
Спасибо за внимание к данному уроку, надеюсь материал был для Вас полезным!