Новости из Блогов Создание специального плагина jQuery

Создание специального плагина jQuery
Дополните библиотеку jQuery своим собственным кодом

11.02.2013
Крис Хэдлок, Web-разработчик/дизайнер, Studio Sedition
http://www.ibm.com/developerworks/ru/library/wa-jqplugin/


Описание: jQuery — это мощная библиотека, которая обеспечивает все основные функции, необходимые при разработке проекта на JavaScript. Однако иногда основные функции нужно дополнить специальным кодом, который помогает продуктивнее работать. Эта статья учит создавать специальные плагины с использованием библиотеки jQuery.


Введение

Библиотека jQuery ускоряет программирование на языке JavaScript. Она позволяет писать меньше кода, упрощая процесс программирования. Иногда, используя библиотеку jQuery, можно обнаружить, что то и дело переписываешь один и тот же код часто используемых функций. В этом случае имеет смысл написать свой собственный специальный плагин jQuery.

Плагины jQuery позволяют пополнять библиотеку jQuery своим кодом; их можно использовать для любых повторяющихся функций. Например, имеется множество плагинов для демонстрации слайд-шоу и создания раскрывающегося списка или меню "аккордеон". Если поискать плагины jQuery, то можно найти множество примеров, которые можно использовать в собственных проектах (и посмотреть, как они построены).

Часто используемые сокращения
CSS: Cascading style sheet / Каскадная таблица стилей
HTML: Hypertext Markup Language

Эта статья учит, как быстро создать специальный плагин jQuery. На примере кода с пошаговыми инструкциями демонстрируется процесс создания jQuery-плагина accordion. Статья рассчитана на тех, кто знаком с jQuery и готов поднять свои навыки на следующий уровень.

В разделе Загрузки имеется исходный код примеров, приведенных в этой статье.

Предварительные замечания

Предполагается наличие у читателя общего представления о JavaScript, jQuery и каскадных таблицах стилей. Подробнее об этом см. в разделе Ресурсы.

Приступаем к работе

jQuery ― это библиотека, которая расширяет язык JavaScript. Создавая новый плагин, вы, по существу, расширяете библиотеку jQuery, которая, в свою очередь, расширяет JavaScript. Чтобы понять, как именно ваш плагин расширяет библиотеку jQuery, требуется понимание свойства JavaScript prototype. Это свойство используется не явно, а скрыто ― через свойство jQuery fn, которое представляет собой jQuery- псевдоним собственного свойства prototype JavaScript.

Чтобы создать новый jQuery-плагин, используя свойство fn, достаточно присвоить его имя свойству fn и указать ему на новую функцию, которая будет выступать в качестве функции-конструктора, как в обычном JavaScript. Код, приведенный в листинге 1, показывает, как определить новый jQuery-плагин с именем accordion с помощью объекта jQuery и свойства fn, а затем присвоить ему новую функцию конструктора.

Листинг 1. Определение нового jQuery-плагина с именем accordion

Code:

jQuery.fn.accordion = function() {
  // Добавить здесь код плагина
};

В листинге 1 показан один из способов создания jQuery-плагина; в этом примере нет ничего функционально неправильного. Однако рекомендуется сначала создать функцию-оболочку, которая позволит использовать знак доллара ($). По умолчанию знак доллара может вызвать конфликты с другими структурами JavaScript. Если же упаковать плагин в функцию, конфликтов не будет, и знак доллара можно использовать. Пример кода, приведенный в листинге 2, демонстрирует, как применить функцию-оболочку к определению jQuery-плагина.

Листинг 2. Упаковка нового jQuery-плагина с именем accordion в функцию-оболочку

Code:

(function($) {
  $.fn.accordion = function() {
    // Добавить здесь код плагина
  };
})(jQuery);

В листинге 2 ключевое слово jQuery применяется к функции-оболочке, что позволяет использовать знак доллара в пределах плагина, как это делается при использовании свойства fn. С функцией-оболочкой можно использовать знак доллара вместо ключевого слова jQuery во всем плагине без помех для других плагинов. Это позволяет писать меньше кода и помогает сохранить код плагина чистым и простым в обслуживании.

Сохранение chainability

Преимуществом jQuery является возможность использовать любой тип селектора. Однако нужно иметь в виду, что ваш плагин может работать с несколькими различными типами элементов. Используя ключевое слово this, можно применять связанные функции, обращаясь к каждому элементу в цикле, независимо от типа этого элемента. Если ключевое слово return предшествует циклу each, то можно сохранить свойство chainability своего плагина. В листинге 3 показан цикл each, назначенный обработчику функции и скомбинированный с ключевым словом return.

Листинг 3. Использование ключевого слова return перед циклом each

Code:

(function($) {
  $.fn.accordion = function() {
    return this.each(function() {
      // Использование return позволяет сохранить chainability
    });
  };
})(jQuery);   

Благодаря коду, приведенному в листинге 3, пример плагина accordion можно использовать в цепочке вызовов методов. Chainability — еще одна важная особенность jQuery — позволяет использовать плагин в цепочке вызовов методов. Например, следующий код показывает, как HTML-элемент постепенно гасится, а затем удаляется из объектной модели документов (DOM) в одной цепочке вызовов методов.

Code:

$("#my-div").fadeOut().remove();

Структурирование "аккордеона"

Типичная конструкция "аккордеон" включает в себя строки заголовков и смежные с ними области с некоторым содержимым. "Аккордеоны" отлично подходят для HTML-структуры определения списков; для заголовков используются элементы dt, а для областей содержимого ― элементы dd. Структура HTML из листинга 4 представляет собой определение списка с четырьмя заголовками и соответствующими областями содержимого.

Листинг 4. Одна цепочка вызовов методов

Code:

<dl class="accordion" id="my-accordion">
  <dt>Section 1</dt>
    <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>
  <dt>Section 2</dt>
    <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>
  <dt>Section 3</dt>
    <dd>Nam mi. Proin viverra leo ut odio. Curabitur malesuada.</dd>
  <dt>Section 4</dt>
    <dd>Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</dd>
</dl>

В определении списка из листинга 4 также имеется класс CSS с присвоенным ему именем accordion. Без всяких CSS эта структура "аккордеон" соответствует неформатированной структуре с рисунка 1.

Рисунок 1. Структура "аккордеон" без CSS


Класс accordion используется для применения стилей к общему определению списка, заголовкам и области содержимого. В примере, приведенном в листинге 5, в самом классе accordion указаны ширина, границы, шрифт и размер шрифта. Любой из примеров применения CSS можно изменить, выбрав свои собственные стили, такие как цвет, шрифт, размеры и интервалы.

Листинг 5. Класс CSS accordion, используемый для задания стилей общего определения списка

Code:

.accordion {
  width: 500px;
  border: 1px solid #ccc;
  border-bottom: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

Затем класс CSS accordion используется для определения стилей заголовков (dt) и содержимого dd. И заголовки, и содержимое содержат общие стили, которые определяют нижнюю границу и задают значение полей 0, что позволяет областям заголовков и содержимого располагаться впритык друг к другу, как показано в листинге 6.

Листинг 6. Общие стили заголовков и областей содержимого "аккордеон"

Code:

.accordion dt, 
.accordion dd {
  border-bottom: 1px solid #ccc;
  margin: 0px;
}

Чтобы элемент dt был больше похож на заголовок, зададим цвет фона и добавим указатель курсора, чтобы создать впечатление активного заголовка. В этом классе есть и другие стили, такие как отбивка или размер и плотность шрифта. Элемент dd добавляет отбивку, чтобы отделить описание от заголовка. Пример приведен в листинге 7.

Листинг 7. Стили CSS для заголовков и областей содержимого "аккордеон"

Code:

.accordion dt {
  background: #eaeaea;
  cursor: pointer;
  padding: 8px 4px;
  font-size: 13px;
  font-weight: bold;
}
.accordion dd {
  padding: 12px 8px;
}

Когда все классы CSS добавлены, визуальный результат больше напоминает аккордеон, как показано на рисунке 2.

Рисунок 2. Структура "аккордеон" с применением CSS


Программирование плагина

Чтобы сделать аккордеон функциональным, необходимо написать код функций jQuery-плагина, который мы начали создавать в предыдущем разделе. Плагин accordion начинается с циклического считывания всех определенных "клавиш аккордеона". Для определения "аккордеона" используется следующий вызов jQuery в пределах HTML-документа или во внешнем внедренном файле JavaScript.

Code:

$('dl#my-accordion').accordion();

Для каждой "клавиши" вызываются соответствующие определения с помощью метода jQuery children, который возвращает массив элементов dt. Применим событие click к элементам dt, а затем к каждому dt ― метод с именем reset. Метод reset позволяет свернуть все элементы dd при первой загрузке accordion. Событие click вызывает специальный метод с именем onClick при нажатии на элемент dt или заголовок. Метод onClick выполняет поиск всех элементов dt в "аккордеоне". Он вызывает специальный метод hide, который скрывает каждый соответствующий элемент dd с помощью метода next для поиска элемента dd, смежного с элементом dt, а затем сдвигает его вверх для анимации процесса закрытия.

Когда все элементы dd скрыты, элемент dd, связанный с нажатым элементом dt, становится видимым благодаря методу slideDown и создает анимацию расширения и сжатия, как показано в листинге 8. Последняя строка кода в методе onClick - это строка return false, которая гарантирует, что никакой нажатый заголовок не будет проявлять свое обычное поведение. Например, при использовании элемента anchor в качестве заголовка понадобится метод return false, чтобы пользователь не попал на другую страницу или в другую часть существующей страницы.

Листинг 8. Специальные функции accordion, используемые для создания jQuery-плагина

Code:

(function($) {
  $.fn.accordion = function(options) {
    return this.each(function() {
      var dts = $(this).children('dt');
      dts.click(onClick);
      dts.each(reset);
    });
	
    function onClick() {
      $(this).siblings('dt').each(hide);
      $(this).next().slideDown('fast');
      return false;
    }

    function hide() {
      $(this).next().slideUp('fast');
    }

    function reset() {
      $(this).next().hide();
    }
  }
})(jQuery);

Если плагин accordion связан со структурой списка HTML-определений, как тот, что мы создали ранее, будет применяться функция accordion. В функциях accordion при нажатии на один заголовок или элемент dt открывается соответствующая область содержимого, а любые другие открытые области содержимого закрываются. Иными словами, в каждый момент времени может быть открыта только одна область содержимого.

Значения по умолчанию и параметры настройки

Плагин JQuery может содержать значения по умолчанию и параметры настройки. Параметры настройки ― это, по существу, те аргументы, которые передаются плагину. Вместо передачи нескольких аргументов с параметрами настройки можно передать один аргумент в качестве литерала объекта, что является стандартным приемом для jQuery. Если в плагине разрешены параметры, то следует указать для них значения по умолчанию с помощью объекта defaults. Как и параметры, значения по умолчанию представляют собой литерал объекта, который должен содержать свойства, передаваемые в плагин.

Например, если допускается свойство, которое можно использовать для открытия первой области содержимого "аккордеона" при его первой загрузке, то в плагине следует указать значение по умолчанию для этого свойства. Используйте значения по умолчанию для определения состояния функций по умолчанию, а параметры настройки ― для переопределения значений по умолчанию. Когда плагин получает параметры, для фактического переопределения можно использовать метод $.extend. Метод $.extend jQuery объединяет два или более объектов. Пример, приведенный в листинге 9, демонстрирует обычную практику использования метода $.extend для соединения определяемых пользователем параметров со значениями по умолчанию в плагине jQuery.

Листинг 9. Добавление параметров настройки и значений по умолчанию в плагин jQuery

Code:

(function($) {
  $.fn.accordion = function(options) {
    var settings = $.extend({}, {open: false}, options);
    return this.each(function() {
      var dts = $(this).children('dt');
      dts.click(onClick);
      dts.each(reset);
      if(settings.open) $(this).children('dt:first-child').next().show();
    });
	
    function onClick() {
      $(this).siblings('dt').each(hide);
      $(this).next().slideDown('fast');
      return false;
    }

    function hide() {
      $(this).next().slideUp('fast');
    }

    function reset() {
      $(this).next().hide();
    }
  }
})(jQuery);

Аргументами метода $.extend служат целевой объект и два или более объектов, подлежащих объединению. В этом примере целевым объектом является пустой литерал объекта, который служит контейнером для объединяемых объектов. Цель становится единым объектом, который содержит значения объединяемых объектов ― в данном случае переменной settings. Второй аргумент ― это литерал объекта, содержащий свойства плагина по умолчанию. Третий аргумент ― определяемые пользователем параметры настройки. Чтобы передать параметры настройки с помощью плагина accordion в HTML-элементе, нужно знать, какие свойства плагин исключает, чтобы их можно было передать в виде литерала объекта, как показано ниже.

Code:

$('dl#my-accordion').accordion({open:true});

В примере, приведенном в листинге 9, параметры, передаваемые плагину, переопределяют значения по умолчанию с помощью метода $.extend. Если никакие параметры не передаются, используются значения по умолчанию. В примере плагина свойство open используется для определения того, должна ли при его загрузке открываться первая область содержимого.

Возможность многократного использования

Пример плагина accordion можно многократно использовать в любом HTML-документе, в том числе в одном и том же. Используя новый созданный нами плагин accordion, можно включить несколько таких структур "аккордеон" и определить каждую из них отдельно как jQuery accordion. Чтобы добавить в HTML-документ несколько "аккордеонов", просто добавьте нужное количество структур accordion. Код, приведенный в листинге 10, включает две структуры accordion, разделенных знаком конца абзаца.

Листинг 10. Использование нескольких "аккордеонов" в пределах одного и того же документа HTML

Code:

<dl class="accordion" id="my-accordion">
  <dt>Section 1</dt>
  <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>
  <dt>Section 2</dt>
  <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>
  <dt>Section 3</dt>
  <dd>Nam mi. Proin viverra leo ut odio. Curabitur malesuada.</dd>
  <dt>Section 4</dt>
  <dd>Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</dd>
</dl>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<dl class="accordion" id="my-accordion2">
  <dt>Section 1</dt>
  <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>
  <dt>Section 2</dt>
  <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>
</dl>

Две структуры accordion в листинге 10 почти идентичны, не считая их содержания и, что еще важнее, значений их идентификаторов. Первая структура содержит значение идентификатора my-accordion. Вторая структура содержит значение идентификатора my-accordion2. Теперь к этим структурам можно обращаться независимо друг от друга. Например, следующий сценарий jQuery определяет каждую структуру "аккордеон" с использованием нового созданного нами плагина.

Code:

$('dl#my-accordion').accordion({open:true});
$('dl#my-accordion2').accordion({open:true});

Обе структуры "аккордеон" определяются с открытой первой панелью по умолчанию. На рисунке 3 приведен пример использования нескольких плагинов accordion в одном и том же HTML-документе.

Рисунок 3. Несколько структур "аккордеон" в одном и том же HTML-документе


Собираем все вместе

Создав новый специальный jQuery-плагин accordion, написав CSS и разместив разметку HTML, можно собрать все это вместе на окончательной Web-странице. Чтобы jQuery-плагин accordion работал, необходимо внедрить библиотеку jQuery. Я предпочитаю использовать сеть доставки контента (CDN), которая доставляет библиотеки в зависимости от географического положения пользователя и поэтому обеспечивает максимально возможную скорость загрузки файла. Библиотека jQuery есть в CDN Google, и этот файл можно внедрить на Web-страницу, воспользовавшись URL https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js.

Имеются и другие версии библиотеки. См. ссылки в разделе Ресурсы на библиотеки на сайте Google для разработчиков. Единственные дополнительные файлы, которые нужно указать в HTML-документе, это файл CSS, который определяет стили "аккордеона", и jQuery-плагин accordion. После этого HTML-разметка фактических структур "аккордеон" изменится. Пример приведен в листинге 11.

Листинг 11. Определение двух структур "аккордеон" как jQuery-аккордеонов

Code:

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Creating a Custom jQuery Plugin</title>
  <link type="text/css" rel="stylesheet" href="jquery.accordion.css" />
  <script type="text/javascript" 
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
  </script>
  <script type="text/javascript" src="jquery.accordion.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
    $('dl#my-accordion').accordion({open:true});
    $('dl#my-accordion2').accordion({open:true});
});
</script>
</head>

<body>

<dl class="accordion" id="my-accordion">
  <dt>Section 1</dt>
  <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>
  <dt>Section 2</dt>
  <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>
  <dt>Section 3</dt>
  <dd>Nam mi. Proin viverra leo ut odio. Curabitur malesuada.</dd>
  <dt>Section 4</dt>
  <dd>Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</dd>
</dl>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<dl class="accordion" id="my-accordion2">
  <dt>Section 1</dt>
  <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>
  <dt>Section 2</dt>
  <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>
</dl>

</body>
</html>

Заключение

В этой статье показано, как легко создать специальный jQuery-плагин. Любые повторяющиеся функции, которые вы создаете, можно быстро преобразовать в плагин для ускорения и повышения эффективности разработки. Ключ к любому плагину ― многократное использование, а многократное использование ― залог повышения производительности.

Загрузка

Создание и использование плагина jQuery accordion custom-jquery-plugin.zip 3 КБ HTTP