Как создать jQuery плагин?

Эту статью я решил написать не как мануал, а как небольшую памятку. Мне она полезна. Возможно, будет полезна и Вам. И первое, что я рекомендую взять на заметку, это перевод статьи «Plugins» Джона Ресинга (John Resig) от старожила ХабраХабра Rafael.

1. Создание плагина. Для добавления нового метода (плагина) в объект jQuery, необходимо присвоить функцию его реализацию объекту jQuery.fn.

jQuery.fn. myPlugin = function(){
  // Тут пишем функционал нашего плагина
};

2. Вызов плагина. Зачастую, плагин jQuery вызывается в качестве метода для набора элементов дерева DOM, например:

$('#element').myPlugin();

Обычно я это делаю, когда объектная модель документа (DOM) готова к использованию, например:

$(function() {
  $('#element').myPlugin();
});

3. Обёртка. Чтобы значок доллара ($) не конфликтовал с другими библиотеками, лучше «обернуть» объект jQuery в функцию-выражение, которое свяжет его с этим символом.

(function( $ ) {
  $.fn.myPlugin = function() {
    // Тут пишем функционал нашего плагина
  };
})( jQuery );

4. Контекст. В области видимости функции плагина, ключевое слово this ссылается на объект jQuery, а не DOM-дерева, так что нет необходимости писать $(this), что будет эквивалентно $($('#element')).

(function( $ ){
  $.fn.myPlugin = function() {
    // тут "this" - это объект jQuery
    this.each(function(){
      // тут "this" - это элемент дерева DOM
      $(this).css('color', '#000');
    });
  };
})( jQuery );

5. Цепочки вызовов. Для того чтобы набор элементов дерева DOM передавался дальше по цепочку, плагин должен возвращатьthis.

(function( $ ){
  $.fn.myPlugin = function() {
    return this.each(function(){
      $(this).css('color', '#000');
    });
  };
})( jQuery );

6. Настройки и умолчание. Для настраиваемых плагинов, лучше иметь настройки по умолчании, расширяемые за счёт метода $.extend() во время вызова плагина.

(function( $ ){
  $.fn.myPlugin = function( options ) {
    var settings = $.extend({
      'color' : '#000'
    }, options);
    this.each(function(){
      $(this).css('color', settings.color);
    });
  };
})( jQuery );

Там есть ещё куча интересных и полезных фишек, но для простеньких плагинов представленного будет более чем достаточно. На этом у меня всё. Спасибо за внимание. Удачи!