Пишем аккордеон-плагин в 618 байт

Очень часто приходится видеть варианты элемента управления «аккордеон» на различных сайтах. В этой заметке я хотел бы предложить свой вариант, который кроме того, что обладает некоторыми оригинальными свойствами, еще и весит в minified-виде всего 618 байт. Заодно, я покажу как быстро написать простейший плагин для jQuery.

Забегая в перед скажу, что плагин тестировался в Firefox 3.0.3, Internet Explorer 7 и 8b2, Opera 9.52 и Chrome 0.3.154.9. Во всех других браузерах работоспособность гарантируется настолько насколько в них работает jQuery.

Для любопытных приведу пример того, что будет в итоге (ссылки и кнопки в примере не работают).

Постановка задачи

Создать плагин для jQuery, минимальный по объему, который бы на базе html-элемента «dl» строил элемент управления «аккордеон». Обязательным условием является вывод пояснения для неактивных элементов «аккордеона». Активный элемент аккордеона определяется по наличию класса «active» у соответствующего элемента dt. dt так же содержит заголовок элемента «аккордеона». Элемент пояснения span должен иметь класс «remark» и находится в dd. Основное тело каждого элемента «аккордеона» должно содержаться в div, который также должен быть в dd.

Решение

Для начала определим функцию которая обновляет состояние элемента dl и приводит его к требуемому виду:

  function Update(dl) {
    $("#" + dl.id + " > dt:not(.active)").each(function() {
      $(this).css("cursor", "pointer");
    });
    $("#" + dl.id + " > dt.active").each(function() {
      $(this).css("cursor", "");
    });

    $("#" + dl.id + " > dd > div").hide();
    $("#" + dl.id + " > dd > span.remark").show();

    $("#" + dl.id + " > dt.active").next().children("div").show(300);
    $("#" + dl.id + " > dt.active").next().children("span.remark").hide();
  }

* This source code was highlighted with Source Code Highlighter.

Первые две операции обновляют вид указателей мыши при наведении на активный и неактивные элементы «аккордеона». Вторые две операции скрывают все содержимое «аккордеона» и показывают все примечания. Третьи две операции показывают с замедлением содержимое активной вкладки «аккордеона» и скрывают его примечание.

Далее напишем функционал, который будет выполняться в момент нажатия на вкладки «аккордеона»:

    $("#" + this.id + " > dt").click(function() {
      if ($(this).hasClass("active"))
        return; // выход если щелкнули по активному dt

      $("#" + dl.id + " > dt").removeClass("active");
      $(this).addClass("active");

      Update(dl);
    });

* This source code was highlighted with Source Code Highlighter.

Это «вырванный» кусок кода. Здесь $("#" + this.id + " > dt") — это выборка всех вкладок нашего «аккордеона». Средствами jQuery устанавливается обработчик нажатия на вкладку, где в самом начале идет проверка куда кликнули, если на пассивный элемент, то производится выход. Далее, у всех вкладок удаляется класс «acitve», в кликнутой, наоборот, присваивается.

Сведем все вместе и напишем плагин к jQuery:

jQuery.fn.accordion = function() {

  function Update(dl) {
    $("#" + dl.id + " > dt:not(.active)").each(function() {
      $(this).css("cursor", "pointer");
    });
    $("#" + dl.id + " > dt.active").each(function() {
      $(this).css("cursor", "");
    });

    $("#" + dl.id + " > dd > div").hide();
    $("#" + dl.id + " > dd > span.remark").show();

    $("#" + dl.id + " > dt.active").next().children("div").show(300);
    $("#" + dl.id + " > dt.active").next().children("span.remark").hide();
  }

  return this.each(function() {
    var dl = $(this)[0];

    Update(dl);

    $("#" + this.id + " > dt").click(function() {
      if ($(this).hasClass("active"))
        return; // выход если щелкнули по активному dt

      $("#" + dl.id + " > dt").removeClass("active");
      $(this).addClass("active");

      Update(dl);
    });

  });

};

* This source code was highlighted with Source Code Highlighter.

Мы расширяем jQuery нашей функцией «accordion», в которой для каждого заданного элемента произвдятся следующие шаги: получается экземпляр dl, обновляется состояние полученного dl, устанавливаются обработчики нажатия мышью для всех dt полученного dl.

Использование

Использовать написанный элемент крайне просто. Для этого просто включите в код следующий блок, который сделает из переданного элемента dl наш «аккордеон»:

  <script type="text/javascript">
    $(document).ready
    (
      function() {
        $("#LoginList").accordion();
      }
    );
  </script>  

* This source code was highlighted with Source Code Highlighter.

Заключение

Представленный вариант — самый простейший, он не претендует ни на что кроме примера. Его можно улучшить добавив параметры, которые влияли бы на скорость отображения активного элемента, на стартовый номер вкладки «аккордеона». Кроме того, уверен, что можно улучшить и сам javascript-код.

Надеюсь, что приведенный пример и элемент управления кому-нибудь пригодится или наведет на интересные идеи.

Ссылка на плагин (1192 байта), minified-версия (618 байт).

UPD: благодаря оптимизации DmitryBaranovskiy размер minified-версии уменьшен до 508 байт, полной версии до 909 байт