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

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

Далее, описывая правила создания собственных плагинов мы будем реализовывать отдельный полноценный плагин в качестве примера. Его функциональность будет состоять в добавлении нового поведения для выбранных элементов — изменение цвета при наведении курсора. Назовем плагин responsiveBlock (отзывчивый блочный элемент).

Создание файла с плагином и его подключение

Обычно, javascript-плагины располагаются в отдельных файлах. Для файлов с плагинами jQuery существует соглашение касательно их названия — оно должно удовлетворять формату jquery.plaginName.js. Таким образом, файл с нашим плагином нужно будет назвать jquery.responsiveBlock.js.

Чтобы наш плагин стал доступен на странице необходимо подключить файл с библиотекой jQuery, а затем js-файл с нашим плагином плагина:

~lt~script src="jquery.min.js"~gt~~lt~/script~gt~
~lt~script src="jquery.responsiveBlock.js"~gt~~lt~/script~gt~

Основа для плагина

Чтобы добавить новый метод в объект jQuery, необходимо добавить функцию с его реализацией в объект jQuery.fn. В нашем плагине нужно организовать один метод — который будет добавлять элементам умение изменять цвет при наведении курсора. Назовем его так же как и сам плагин — responsiveBlock:

jQuery.fn.responsiveBlock = function(){
  // здесь будет реализация метода
}; // точка с запятой в конце реализации очень важны! Без нее плагин не заработает.

Чтобы избежать возможных конфликтов имен, обернем наш код в следующую конструкцию (подробности см. в описании jQuery.noConflict()):

(function($){
  jQuery.fn.responsiveBlock = function(){
    // здесь будет реализация метода
  };
})(jQuery);

Переменная this, в теле метода, всегда содержит текущий объект jQuery (тот, на котором и был вызван метод). Для того, чтобы обойти все выбранные элементы по отдельности, используем метод .each(). А для возможности продолжить цепочку методов наш метод должен будет возвратить текущий объект jQuery:

(function($){
  jQuery.fn.responsiveBlock = function(){
    var make = function(){
      // реализация работы метода с отдельным элементом страницы
    };
 
    return this.each(make); 
    // в итоге, метод responsiveBlock вернет текущий объект jQuery обратно
  };
})(jQuery);

Добавление свойств плагину

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

(function($){
  jQuery.fn.responsiveBlock = function(options){
    // Зададим список свойств и укажем для них значения по умолчанию.
    // Если при вызове метода будут указаны пользовательские
    // варианты некоторых из них, то они автоматически перепишут
    // соответствующие значения по умолчанию
    options = $.extend({
      defColor:"white", //цвет элемента над которым нет курсора
      hoverColor:"red" //цвет элемента на который наведен курсор
    }, options};
 
    var make = function(){
      // реализация работы метода с отдельным элементом страницы
    };
 
    return this.each(make); 
    // в итоге, метод responsiveBlock вернет текущий объект jQuery обратно
  };
})(jQuery);
 
// теперь можно задавать плагин с настройками по умолчанию:
$('div:first').responsiveBlock();
 
// или указать свои значения некоторых или всех настроек
$('div:last').responsiveBlock({defColor:"#bbbbbb"});
$('ul').responsiveBlock({defColor:"#aaaaaa", hoverColor:"green"});

(Для лучшего понимания данного примера стоит ознакомиться с назначением функции $.extend).

Полученная выше заготовка, является наиболее распространенным вариантом шаблона для плагинов jQuery. Поэтому если вы решили написать свой плагин, то можете смело начинать именно с нее (естественно со своим именем плагина и своим списком настроек).

Дальнейшая реализация

Далее, добавим окончательную реализацию нашему плагину и применим ее на конкретном примере:

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
    div{padding:10px; margin:5px; border:3px solid red}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
 
  ~lt~div~gt~Блок на странице~lt~/div~gt~

  ~lt~script~gt~
    (function($){
      jQuery.fn.responsiveBlock = function(options){
        options = $.extend({
          defColor:"white", //цвет элемента над которым нет курсора
          hoverColor:"red" //цвет элемента на который наведен курсор
        }, options);

        var make = function(){
          // здесь переменная this будет содержать отдельный
          // DOM-элемент, к которому и нужно будет применить
          // воздействия плагина
          $(this).css("background-color",options.defColor)
          .mouseenter( function(){
            $(this).css("background-color",options.hoverColor);
          })
          .mouseleave( function(){
            $(this).css("background-color",options.defColor);
          });
        };

        return this.each(make); 
      };
    })(jQuery);

    $('div').responsiveBlock();
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Генерация событий

Библиотека jQuery позволяет организовывать собственные события на элементах, и в дальнейшем устанавливать их обработчики (как на события onClick или onMousemove). Чтобы генерировать собственные события на выбранных элементах необходимо воспользоваться методом .trigger(), а устанавливать их обработчики можно с помощью .on(). Таким образом, плагины могут предоставлять не только новую функциональность но и связанную с ней систему событий, которой сможет воспользоваться любой пользователь вашего плагина.

Чтобы имена событий вашего плагина не пересекались с чужими именами событий, используйте пространства имен. Для этого удобнее всего использовать имя самого плагина.

В нашем плагине можно организовать событие stateChange, которое будет происходить при смене состояния элемента (наведен курсор или нет):

(function($){
  jQuery.fn.responsiveBlock = function(options){
    options = $.extend({
      defColor:"white", //цвет элемента над которым нет курсора
      hoverColor:"red" //цвет элемента на который наведен курсор
    }, options);
    var make = function(){
      // здесь переменная this будет содержать отдельный
      // DOM-элемент, к которому и нужно будет применить
      // воздействия плагина
      $(this).css("background-color",options.defColor)
      .mouseenter( function(){
        $(this)
        .css("background-color",options.hoverColor)
        .trigger('responsiveBlock.stateChange'); //-вызов события
      })
      .mouseleave( function(){
        $(this)
        .css("background-color",options.defColor)
        .trigger('responsiveBlock.stateChange'); //-вызов события
      });
    };
 
    return this.each(make); 
  };
})(jQuery);
 
 
// теперь к элементам страницы можно будет привязывать обработчики события stateChange:
$('div').on('responsiveBlock.stateChange', handler);

Примечания

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