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

Чтобы создать плагин jQuery необходимо понимать его структуру. Итак, приступим.

Для чего используется fn
jQuery.fn - синоним jQuery.prototype.
Если задать функцию через jQuery.fn, то она будет работать с элементами, найденными через функцию $() (то есть будет работать с выборкой элементов). Контекст этой функции будет содержать выбранные элементы. Иначе, без fn, например, если задать функцию через jQuery: jQuery.say = function(elem) { ….. }, функцию можно будет вызывать через объект jQuery и контекст такой функции будет указывать на глобальный объект window.

Заготовка:

JQuery

              
(function($){
       
$.fn.name_plugin = function(options){
       
//Вутри плагина слово this ссылается на обернутый набор
//(т.е. не нужно оборачивать контекст функции: 
//$(this) ,так как это будет преобразовано в $($('#el')); ). 
       
};
})(jQuery);

options - параметры, передаваемые плагину. В дальнейшем их необходимо объединить со значениями по умолчанию:

JQuery

 
var settings = $.extend((

property1: 'value1',
property2: function(val1){ alert(val1)},
property3: 5000,
property4: null,

}, options || {});

Иногда требуется обработать каждый обернутый элемент отдельно. Для этого в шаблоне необхрдимо использовать метод each().

JQuery

          
$.fn.name_plugin = function(options){
   
return this.each(function(){
   
// внутри функции-итератора контекст (this) указывает на
// текущий элемент DOM и, соответственно, чтобы использовать его с методами
// jQuery необходимо обернуть контекст: $(this)  
   
} 
); 

Так как мы возвращаем обернутый набор (используя метод each()), то новый метод можно использовать в составе цепочек методов.

Итак, перед вами полная структура плагина jQuery:

JQuery

                 
(function($){
       
$.fn.name_plugin = function(options){

var settings = $.extend((

property1: 'value1',
property2: function(val1){ alert(val1)},
property3: 5000,
property4: null,

}, options || {}); 
   
return this.each(function(){
   
}     

};



})(jQuery);         
          
   

Запуск плагина:

JQuery

   
$().ready(function() {
  
 $('.karamba').name_plugin( {
  property1: 120,
  property2: 10,
  property3: 'show more',
  property4: 'show less',
  property5: " [there's more...]"
 });
 
});

Второй вариант создания плагина jQuery (более подробная информация в статье Плагины jQuery: подробное руководство):

JQuery

   
$(document).ready(function(){	

// параметры плагиина по умолчанию
function options(){
this.params = {
data : Array ("дэр дэр дэр",     
              ".opa" ) };
};
//основной объект плагина
$.Slideshow = function(){}

$.Slideshow.initialize = function(){
//  создаем новый объект, на основе ф-и конструктора options
$.options = new options();

for(var i = 0; i < arguments.length; i++)
$.options.params.data[ i ] = arguments[ i ];
}
// Управление плагином
$.Slideshow.run = function(){
$($.options.params.data[ 1 ]).text( $.options.params.data[ 0 ] );   
};        

// инициализируем параметры плагина
$.Slideshow.initialize("привет медвед", ".opa");
// запускаем плагин
$.Slideshow.run();
// итого;  в блоке с классом opa будет прописан текст "привет медвед"

});

});

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

• Создаем таймер обратного отсчета на jQuery
• Скрываем и выводим лишний текст - плагин jQuery
• Простой jQuery плагин
• Вкладки на jQuery

Еще одна структура плагина, как вариант.

JQuery

   
$.fn.extend({ 

  name_plugin: function(options) {
  
  var obj = $(this);    
    
     var defaults = {
	    // настройки по умолчанию
		 }
     var options =  $.extend(defaults, options);
     
     return this.each(function() {
 
  //    obj.attr('id') 
 

    		});
    	}
});