Первый мой блог, первый пост 
Наверное многие видели симпатичные выкидушки-слайдеры(по клику выезжает текст или еще что то). Попытаюсь рассказать как это можно сделать ну и предложу места применения.
[spoiler]
Что нам потребуется:
1. Собственно сама библиотека
2. Немного времени
3. Желание
Поехали. Для наглядности, пример: .
Возможны 3 варианта поведения слайдера:
1. Все элементы закрыты. Тогда надо открыть только тот, который выбрали.
2. Открыт один элемент и его нужно закрыть.
3. Есть открытые элементы, но выбрали один из закрытых, при этом должен открыться новый элемент, а открытые до этого - свернуться.
Подготовительные работы:
1. Подключаем библиотеку jQuery.
2. Определяем классы используемых элементов. В данном примере у нас есть контейнер id="faq" (в принципе можно обойтись без идентификатора контейнера), элемент, по клику на который под ним развернется какой-то текст, это будет <p class="question"></p>, и собственно контейнер для появляющегося текста <p class="answer"></p>.
3. Естественно, разворачивающий контейнер должен быть скрытым изначально, поэтому прописываем стиль
4. Создаем js файл, например, js.js.
Теперь html:
Теперь рассмотрим все наши варианты поведения слайдера.
1. Все элементы закрыты. Тогда надо открыть только тот, который выбрали.
По клику на <p class="question"> вызывается функция, которая находит следующий контейнер, который должен развернуться естественно. Если он закрыт, то разворачиваем его.
2. Открыт один элемент и его нужно закрыть.
Модифицируем немного код, проверка отображается ли слайдер или нет у нас уже есть, необходимо только добавить сворачивание, если элемент уже открыт.
3. Есть открытые элементы, но выбрали один из закрытых, при этом должен открыться новый элемент, а открытые до этого - свернуться.
Для этого необходимо найти уже открытые <p class="answer">. Сначала их свернуть, а потом развернуть новый слайдер. Открытие после закрытия обеспечивается callback функцией. При этом необходимо проверить, есть ли открытые элементы (если их нет, то не сработает слайдер на открытие) и не является ли открытый элемент тем же, по которому сейчас кликнули (в этом случае его нужно просто свернуть).
И объединив все три случая в один скрипт получим:
Применение
Первое, что приходит в голову, это меню. В тех случаях, когда ссылки первого уровня ни куда не ведут, например.
В разрабатываемых мною проектах, обычно использую для разделов типа Вопрос-Ответ (FAQ). В принципе и пример есть упрощенный вариант отображения FAQ.
Надеюсь, первый блин не вышел комом и кому-то помог.
Спасибо.
Наверное многие видели симпатичные выкидушки-слайдеры(по клику выезжает текст или еще что то). Попытаюсь рассказать как это можно сделать ну и предложу места применения.
[spoiler]
Что нам потребуется:
1. Собственно сама библиотека
2. Немного времени
3. Желание
Поехали. Для наглядности, пример: .
Возможны 3 варианта поведения слайдера:
1. Все элементы закрыты. Тогда надо открыть только тот, который выбрали.
2. Открыт один элемент и его нужно закрыть.
3. Есть открытые элементы, но выбрали один из закрытых, при этом должен открыться новый элемент, а открытые до этого - свернуться.
Подготовительные работы:
1. Подключаем библиотеку jQuery.
2. Определяем классы используемых элементов. В данном примере у нас есть контейнер id="faq" (в принципе можно обойтись без идентификатора контейнера), элемент, по клику на который под ним развернется какой-то текст, это будет <p class="question"></p>, и собственно контейнер для появляющегося текста <p class="answer"></p>.
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");
}
});
|
По клику на <p class="question"> вызывается функция, которая находит следующий контейнер, который должен развернуться естественно. Если он закрыт, то разворачиваем его.
2. Открыт один элемент и его нужно закрыть.
Модифицируем немного код, проверка отображается ли слайдер или нет у нас уже есть, необходимо только добавить сворачивание, если элемент уже открыт.
$(".question").click(function(){
$slider = $(this).next();
if ($slider.is(":hidden")){
$slider.slideDown("slow");
}
else{
$slider.slideUp("slow");
}
});
|
3. Есть открытые элементы, но выбрали один из закрытых, при этом должен открыться новый элемент, а открытые до этого - свернуться.
Для этого необходимо найти уже открытые <p class="answer">. Сначала их свернуть, а потом развернуть новый слайдер. Открытие после закрытия обеспечивается 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
.Надеюсь, первый блин не вышел комом и кому-то помог.
Спасибо.
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».
