MScoder Nov 2 2008 at 17:26

jQuery slider (гармошка)

4 min

2.5K

Первый опубликованный мной пост на хабре :)
Наверное многие видели симпатичные выкидушки-слайдеры(по клику выезжает текст или еще что-то). Попытаюсь рассказать как это можно сделать ну и предложу места применения.
Поехали :)
Что нам потребуется:
1. Собственно сама библиотека jQuery
2. Немного времени
3. Желание :)

Поехали. Для наглядности, пример: демо.

Возможны 3 варианта поведения слайдера:
1. Все элементы закрыты. Тогда надо открыть только тот, который выбрали.
2. Открыт один элемент и его нужно закрыть.
3. Есть открытые элементы, но выбрали один из закрытых, при этом должен открыться новый элемент, а открытые до этого — свернуться.

Подготовительные работы:
1. Подключаем библиотеку jQuery.
2. Определяем классы используемых элементов. В данном примере у нас есть контейнер id=«faq» (в принципе можно обойтись без идентификатора контейнера), элемент, по клику на который под ним развернется какой-то текст, это будет , и собственно контейнер для появляющегося текста .
3. Естественно, разворачивающий контейнер должен быть скрытым изначально, поэтому прописываем стиль


.answer {display: none}

4. Создаем js файл, например, js.js.
Теперь html:


<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/demo/style.css" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/demo/js.js"></script>
</head>
<body>
<div id="faq">
<p class="question">Вопрос 1</p>
<p class="answer">Ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ <br />
Ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ <br />
Ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ
</p>
<p class="question">Вопрос 2</p>
<p class="answer">
Ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ <br />
Ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ
</p>
<p class="question">Вопрос 3</p>
<p class="answer">
Ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ <br />
Ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ <br />
Ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ <br />
Ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ
</p>
</div>
</body>
</html>

Теперь рассмотрим все наши варианты поведения слайдера.
1. Все элементы закрыты. Тогда надо открыть только тот, который выбрали.


$(".question").click(function(){
	$slider = $(this).next();
	if ($slider.is(":hidden")){
		$slider.slideDown("slow");
	}
});

По клику на вызывается функция, которая находит следующий контейнер, который должен развернуться естественно. Если он закрыт, то разворачиваем его.
2. Открыт один элемент и его нужно закрыть.
Модифицируем немного код, проверка отображается ли слайдер или нет у нас уже есть, необходимо только добавить сворачивание, если элемент уже открыт.


$(".question").click(function(){
	$slider = $(this).next();
	if ($slider.is(":hidden")){
		$slider.slideDown("slow");
	}
	else{
		$slider.slideUp("slow");
	}
});

3. Есть открытые элементы, но выбрали один из закрытых, при этом должен открыться новый элемент, а открытые до этого — свернуться.
Для этого необходимо найти уже открытые . Сначала их свернуть, а потом развернуть новый слайдер. Открытие после закрытия обеспечивается callback функцией. При этом необходимо проверить, есть ли открытые элементы (если их нет, то не сработает слайдер на открытие) и не является ли открытый элемент тем же, по которому сейчас кликнули (в этом случае его нужно просто свернуть).


$(".question").click(function(){
	$other = $(this).parent().find(".answer:visible");
	$slider = $(this).next();
	if ($other.length > 0 && $slider.is(":hidden")){
		$other.slideUp("slow", function(){
			if ($slider.is(":hidden")){
				$slider.slideDown("slow");
			}
			else{
				$slider.slideUp("slow");
			}				
		});
	}
});

И объединив все три случая в один скрипт получим:


$(document).ready(function(){
	$(".question").click(function(){
		$other = $(this).parent().find(".answer:visible");
		$slider = $(this).next();
		if ($other.length > 0 && $slider.is(":hidden")){
			$other.slideUp("slow", function(){
				if ($slider.is(":hidden")){
					$slider.slideDown("slow");
				}
				else{
					$slider.slideUp("slow");
				}				
			});
		}
		else
		{
			if ($slider.is(":hidden")){
				$slider.slideDown("slow");
			}
			else{
				$slider.slideUp("slow");
			}
		}
	});
});

Применение
Первое, что приходит в голову, это меню. В тех случаях, когда ссылки первого уровня ни куда не ведут, например.
В разрабатываемых мною проектах, обычно использую для разделов типа Вопрос-Ответ (FAQ). В принципе и пример есть упрощенный вариант отображения FAQ :).
Надеюсь, первый блин не вышел комом и кому-то помог.
Спасибо.

Tags:

Hubs:

Lumber room