AJAX загрузка
home

Вы можете расширять возможности jQuery с помощью плагинов.

Плагины jQuery

Реализация одних и тех же функций в различных приложениях побуждает разработчиков заново писать один и тот же код несколько раз лишь незначительно изменяя его под конкретное приложение.

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

В интернете можно найти огромное количество бесплатных jQuery плагинов написанных другими разработчиками и использовать их для создания своих приложений. Можете начать поиски интересных jQuery плагинов на сайте PluginDetector.com.

Создание плагина

Для того, чтобы создать плагин необходимо добавить к объекту jQuery.fn свойство, имя которого будет является именем плагина:

Синтаксис:

//Определяем код плагина
(function($){
   $.fn.имяПлагина = function() {
      // Код плагина
   };
})(jQuery);
//Вызываем плагин
$(селектор).имяПлагина();

Обратите внимание: обертка (function($){ }) (jQuery) используется здесь для того, чтобы внутри кода плагина можно было использовать знак $ не боясь при этом, что он будет конфликтовать с другими библиотеками JavaScript.

Ключевое слово this в плагинах

При написании плагинов следует обратить внимание на то, что в коде плагина ключевое слово this будет относиться к jQuery объекту, который вызвал этот плагин, а не к DOM объекту как в функциях обратного вызова.

Это значит, что в коде плагина для того, чтобы обратится к jQuery объекту необходимо использовать this, а в коде функций обратного вызова использовать $(this).

Пример

(function($){
  
/* Создаем плагин с именем plugin, который будет находить сумму содержимого всех 
 выбранных абзацев на странице */
   $.fn.plugin=function(){
      var sum=0;
      /* Для того, чтобы сослаться на выбранный элемент в коде плагина мы 
         используем this, но в функции обратного вызова мы уже должны использовать 
         $(this) для этих же целей */
      this.each(function(){
         sum=sum+Number($(this).html());
      });
      // Возвращаем полученную сумму 
      return sum;
   }

})(jQuery)

Поддержка цепочки методов

Плагин в предыдущем примере возвращал целое значение, но часто плагины используются для модификации группы элементов и передачи их следующему методу в цепочке.

Пример цепочки методов:

//Пример цепочки из двух методов css и html
$("p").css("color","red").html("Новое содержимое");

Для того, чтобы Ваш плагин не "разрывал" цепочку методов необходимо, чтобы он возвращал ключевое слово this.

Пример

(function($){
  
   /* Создаем плагин с именем adjust, который будет устанавливать размер текста 
   выбранных элементов равным 1.4em и передавать их дальше по цепочки методов. */
   $.fn.adjust=function(){
   /* Для того, чтобы поддержать цепочку методов нужно вернуть из плагина 
   преобразованную группу выбранных элементов */
      return this.each(function(){
         $(this).css("fontSize","1.4em");
      });
   }

})(jQuery)

Опции плагинов

Многие плагины позволяют пользователям настраивать их поведение с помощью передаваемых им опций.

Пример

(function($){
  
/* Создаем плагин с именем adjust, который будет устанавливать указанный размер и
 цвет выбранным элементам. */
   $.fn.adjust=function(option){
   /* Установим значения опций по умолчанию. Они будут использованы если пользователь 
   при вызове плагина не передаст значений. */
      var setting={size:'1.4em',color:'red'};
      return this.each(function(){
         // Если пользователь передал опции соединить их с опциями по умолчанию 
         if (option){$.extend(setting,option);}
         $(this).css("fontSize",setting.size);
         $(this).css("color",setting.color);
      });
   }

})(jQuery)

Вынесение кода плагина во внешний файл

Заключительным шагом в создании плагинов должно стать вынесение кода плагина в отдельный файл. И написания инструкций, которые должны разъяснить потенциальным пользователям как и зачем можно использовать Ваш плагин.

Пример

<script src="http://www.wisdomweb.ru/editor/plugin1.js"></script>

$(document).ready(function(){

   $("#but1").click(function(){
      $("#demo p").adjust();
   });
   $("#but2").click(function(){
      $("#demo p").adjust({size:"2em"});
   });
   $("#but3").click(function(){
      $("#demo p").adjust({size:"1.7em",color:"green"});
   });

});