Первый мой блог, первый пост Наверное многие видели симпатичные выкидушки-слайдеры(по клику выезжает текст или еще что то). Попытаюсь рассказать как это можно сделать ну и предложу места применения. [spoiler] Что нам потребуется: 1. Собственно сама библиотека jQuery 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. Открыт один элемент и его нужно закрыть. Модифицируем немного код, проверка отображается ли слайдер или нет у нас уже есть, необходимо только добавить сворачивание, если элемент уже открыт.
3. Есть открытые элементы, но выбрали один из закрытых, при этом должен открыться новый элемент, а открытые до этого - свернуться. Для этого необходимо найти уже открытые <p class="answer">. Сначала их свернуть, а потом развернуть новый слайдер. Открытие после закрытия обеспечивается callback функцией. При этом необходимо проверить, есть ли открытые элементы (если их нет, то не сработает слайдер на открытие) и не является ли открытый элемент тем же, по которому сейчас кликнули (в этом случае его нужно просто свернуть).
Применение Первое, что приходит в голову, это меню. В тех случаях, когда ссылки первого уровня ни куда не ведут, например. В разрабатываемых мною проектах, обычно использую для разделов типа Вопрос-Ответ (FAQ). В принципе и пример есть упрощенный вариант отображения FAQ . Надеюсь, первый блин не вышел комом и кому-то помог. Спасибо.
А можно пару вопросов? 1. jQuery с аяксом битрикса хорошо уживается? 2. а можно ли сделать, чтобы при переходе к вопросу (если это FAQ) он был открыт? например, пришли на страницу с вопросами со страницы поиска и надо показать найденный вопрос открытым сразу, чтобы другие были закрыты.... 3. ничего что такие наглые вопросы сраду?
1. Если честно, я не пользуюсь битриксовым аяксом, видимо из-за моей нелюбви компонентов 2.0 2. можно И так, что нам для этого надо: 1. Пусть у нас детальная страница в инфоблоке настроена на /demo/index.php?ID=#ID# 2. к контейнеру с ответом добавим еще id, пусть это будет <p class="answer" id="item1">, где item1 = item + ID элемента. Тогда при поиске нам будут выдаваться результаты типа /demo/index.php?ID=12 Следовательно нам нужно открыть ответ item12. Ну и добавим собственно код в компонент (в примере я ни каких инфоблоков не использую, поэтому в коде чисто идея).
Вы наверное имеете в виду тогда не компоненты 1.0, а просто включаемую область? Потому как 1.0 (если писать по правилам) чрезвычайно сложны. Не буду спорить правильно ли это, но согласен, что зачастую компоненты 2.0 на мелких проектах слишком уж громоздки.
не придираясь к терминам и определениям - это компоненты 1.0 компоненты 2.0 - удобны для простых сайтов (которые клиент пытается собрать сам, да, там нужна возможность некой управляемости из интерфейса), для сложной логики (мозг рухнет, если логику мешать с визуализацией), варианты, когда отображение зависит от параметров (например, разные шаблоны в зависимости от типа параметра Вид отображения в фильтре) а вообще я как то работал с одной из студий, крупной, у них политика такая - они урезают функционал до необходимого, при этом кастомизируют инфоблоки, что бы в них не было лишнего. я так понимаю клиенту выдается доступ только к необходимому функционалу. Результат - сайт выполнен по ТЗ, выполняет все необходимые функции, клиент всем этим может управлять. но так же есть скрытый потенциал и за новыми функциями клиент вернется к исполнителю. получается, что клиент привязан к разработчику. вот и добро от компонентов 1.0 для партнеров
а вообще я как то работал с одной из студий, крупной, у них политика такая - они урезают функционал до необходимого, при этом кастомизируют инфоблоки, что бы в них не было лишнего. я так понимаю клиенту выдается доступ только к необходимому функционалу
Тоже доводилось работать с ними. Отличительная черта сей компании - непонимание всей мощи Битрикс. И зачастую их алгоритмы - велосипеды. Может они и исправились.
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».