Programando una función de devolución de llamada dentro de un plugin de jQuery

Question

Escribo un complemento jQuery para poder reutilizar este código en muchos lugares, ya que es un código muy usado, el código en sí mismo agrega una nueva línea a una tabla que ha sido clonado desde una fila oculta, continúa realizando una carga de manipulaciones en la nueva fila.

actualmente estoy haciendo referencia así:

$(".abc .grid").grid(); 

Pero quiero incluir una devolución de llamada para que cada área de la plug-in se llama de puede hacer algo un poco más especial, cuando se ha añadido la fila . He utilizado el complemento jQuery AJAX antes, así que he usado la función de devolución de llamada success, pero no puedo entender cómo funciona el código en segundo plano. Esto es lo que quiero lograr:

$(".abc .grid").grid({ 
    row_added: function() { 
     // do something a bit more specific here 
    } 
}); 

aquí es mi plug-in de código

(function($){   

    $.fn.extend({ 

     //pass the options variable to the function 
     grid: function() { 

      return this.each(function() { 

       grid_table=$(this).find('.grid-table > tbody'); 
       grid_hidden_row=$(this).find('.grid-hidden-row'); 
       //console.debug(grid_hidden_row); 
       $(this).find('.grid-add-row').click(function(event) { 
       /* 
       * clone row takes a hidden dummy row, clones it and appends a unique row 
       * identifier to the id. Clone maintains our jQuery binds 
       */ 

        // get the last id 
        last_row=$(grid_table).find('tr:last').attr('id'); 
        if(last_row===undefined) { 
         new_row=1; 
        } else { 
         new_row=parseInt(last_row.replace('row',''),10)+1; 
        } 

        // append element to target, changes it's id and shows it 
        $(grid_table).append($(grid_hidden_row).clone(true).attr('id','row'+new_row).removeClass('grid-hidden-row').show()); 

        // append unique row identifier on id and name attribute of seledct, input and a 
        $('#row'+new_row).find('select, input, a').each(function(id) { 
         $(this).appendAttr('id','_row'+new_row); 
         $(this).replaceAttr('name','_REPLACE_',new_row); 
        }); 

        // disable all the readonly_if_lines options if this is the first row 
        if(new_row==1) { 
         $('.readonly_if_lines :not(:selected)').attr('disabled','disabled'); 
        } 
       }); 

       $(this).find('.grid-remove-row').click(function(event) { 
       /* 
       * Remove row does what it says on the tin, as well as a few other house 
       * keeping bits and pieces 
       */ 

        // remove the parent tr 
        $(this).parents('tr').remove(); 

        // recalculate the order value5 
        //calcTotal('.net_value ','#gridform','#gridform_total'); 

        // if we've removed the last row remove readonly locks 
        row_count=grid_table.find('tr').size(); 
        console.info(row_count); 
        if(row_count===0) { 
         $('.readonly_if_lines :disabled').removeAttr('disabled'); 
        } 

       }); 

      }); 

     } 

    }); 

})(jQuery); 

que he hecho por lo general la búsqueda en Elgoog ... pero me parece que esté recibiendo una gran cantidad de ruido con Poco resultado, cualquier ayuda sería muy apreciada.

Gracias!

Answer 1

Tal vez algo como esto?

$.fn.extend({ 

    //pass the options variable to the function 
    grid: function(callbacks) { 

     // The following can be used so you don't need 
     // to test for callback existence in the rest 
     // of the plugin 
     var defaults = { 
      before: function() {}, 
      after: function() {}, 
      row_added: function() {}     
     } 
     callbacks = $.extend({},defaults,callbacks); 

     // perform callback 
     if (callbacks.before) 
      callbacks.before(); 

     return this.each(function() { 
      // do stuff 
      if (callbacks.row_added) 
       callbacks.row_added(); 
      // do more stuff 
     } 

     // perform callback 
     if (callbacks.after) 
      callbacks.after(); 
    } 
}); 

de llamadas con algo como esto:

$("#grid").grid({ 
    before: function() {}, 
    after: function() {}, 
    row_added: function() {} 
});                

EDIT: Acabo de añadir devoluciones de llamada por defecto de forma que no es necesario para la prueba de la existencia de las devoluciones de llamada. Personalmente, me gusta simplemente probar la existencia antes de llamarlos, pero es posible que prefiera esta ruta.

Answer 2

Yuo puede leer este mensaje:

http://www.learningjquery.com/2009/03/making-a-jquery-plugin-truly-customizable

que contiene un párrafo en proporcionar capacidades de devolución de llamada ...

var defaults = { 

    onImageShow : function(){}, // we define an empty anonymous function 
           // so that we don't need to check its 
           // existence before calling it. 
    // ... rest of settings ... 
}; 

// Later on in the plugin:  
$nextButton.bind('click', showNextImage); 

function showNextImage() { 
    // DO stuff to show the image here... 
    // ... 
    // Here's the callback: 
    settings.onImageShow.call(this); 
}