О web-разработке
и даже немного больше...

«Гармошка» на JQuery и Mootools

Рассмотрим интересный способ показа информации на страницах сайта, в народе называемый «гармошкой». Посмотрев как он работает, думаю, вы поймете, о чём идет речь.
В нашем примере мы рассмотрим два варианта реализации — на JQuery а так же Mootools.

Для начала оформим информацию должным образом, экономим время — копируем её из примера:

<div class="accordion">
<h3>Question One Sample Text</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus,
 commodo lacinia massa diam vel eros. Proin eget urna.
 Nunc fringilla neque vitae odio. Vivamus vitae ligula.
<h3>This is Question Two</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus,
 commodo lacinia massa diam vel eros. Proin eget urna.
 Nunc fringilla neque vitae odio. Vivamus vitae ligula.
<h3>Another Questio here</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus,
 commodo lacinia massa diam vel eros. Proin eget urna.
 Nunc fringilla neque vitae odio. Vivamus vitae ligula.
<h3>Sample heading</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus,
 commodo lacinia massa diam vel eros. Proin eget urna.
 Nunc fringilla neque vitae odio. Vivamus vitae ligula.
<h3>Sample Question Heading</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus,
 commodo lacinia massa diam vel eros. Proin eget urna.
 Nunc fringilla neque vitae odio. Vivamus vitae ligula.</div>

Далее приступаем к реализациям гармошки.
Первый способ это сделать с помощью JQuery.

JQuery гармошка

Пример

Прописываем в заголовке документа следующий код:

$(document).ready(function(){
    $(".accordion h3:first").addClass("active");
    $(".accordion p:not(:first)").hide();

    $(".accordion h3").click(function(){

        $(this).next("p").slideToggle("slow")
        .siblings("p:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("h3").removeClass("active");
    });

;});

Первая строка добавляет класс “active”, первому тегу который в свою очередь находиться в блоке div с классом «accordion», данный класс позиционирует рисунок «иконки со стрелкой».
При клике по заголовку h3 для следующего тега p будет применен эффект slideToggle, после чего для остальных тегов будет эффект slideUp.
Следующий этап изменяется класс заголовка на “active”, после чего данный класс убирается у остальных заголовков.
Да и не забудьте о самом важном моменте, перед этим кодом необходимо подключить и сам JQuery фреймворк.

В коде, описанном немного выше функциональность достигалась с помощью JQuery, попробуем сделать подобное, но с помощью MooTools More, который в свою очередь использует плагин Fx.Accordion.

Mootools гармошка

Пример

Инициализация происходит следующими параметрами:
1. $$(‘.accordion h3′) –кликабельные теги (toggler)
2. $$(‘.accordion p’) – блоки с информацией
3. {…} – дополнительные параметры

Подобным образом, прописываем в заголовке страницы следующий код:

var myAccordion = new Fx.Accordion($$('.accordion h3'), $$('.accordion p'), {
  opacity: false,
  onActive: function(toggler, element){
    toggler.addClass('active');
  },
  onBackground: function(toggler, element){
    toggler.removeClass('active');
  }
});

Опубликован: 26.08.2013 г.

См. также:

Загрузка файлов на сервер посредством Ajax
Отложенная загрузка изображений Lazy Load
Анимация набора текста на Typed.js
Анимация отсчёта на jquery-spincrement
Mega Dropdown — Меню для мобильной версии
Отслеживаем клик вне элемента на JQuery
Ajax-загрузка записей при скроллинге и нажатии кнопки
Stimed – задаем CSS-стили по времени

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарии
  • Загрузка...
Друзья сайта