2010-05-28 29 views
6

Bir jQuery eklentisi yazıyorum, bu kodu çok iyi kullanılmış bir kod parçası olduğu için birçok yerde yeniden kullanabilirim, kodun kendisi tabloya yeni bir satır ekler Gizli bir satırdan klonlanmış olan yeni satırda bir manipülasyon yüklemesi yapmaya devam ediyor.Bir jQuery eklentisi içinde bir geri arama işlevi programlama

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

Ama ben çok satır eklendiğinde eklenti şey biraz daha benzersiz yapabilir çağrılır her alanı bir geri arama dahil etmek istiyorum:

Şu anda bunu böyle başvuran ediyorum . JQuery AJAX eklentisini daha önce kullanmıştım, bu yüzden success geri arama işlevini kullandım, ancak kodun arka planda nasıl çalıştığını anlayamıyorum. İşte başarmak istediğim şey bu: İşte

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

benim eklenti koduna ben elgoog arama genellikle yaptık

(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); 

... ama ben çok fazla gürültü ile almak gibi görünmektedir küçük sonuç, herhangi bir yardım büyük takdir edilecektir.

Teşekkürler!

cevap

9

Belki böyle bir şey? Böyle bir şey

$.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(); 
    } 
}); 

Çağrı it:

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

DÜZENLEME: Eğer geri aramaları varlığını sınamak gerek kalmaması Sadece varsayılan geri aramalar ekledi. Şahsen, onları aramadan önce varlığını test etmeyi seviyorum, ama bu rotayı tercih edebilirsiniz.

Yuo Bu yayını okuyabilir
+0

Alkış, bu çok kolay :-) anlamak için yapar, birçok Teşekkürler! –

+0

@ILMV: emin sorun yok. Varsayılan geri çağırmalara nasıl sahip olabileceğinizi göstermek için bir kod ekledim, böylece onları aramadan önce geri arama varlığını test etmeniz gerekmez. Ne yaptığınıza bağlı olarak, geri arama işlevlerini çağırmak için 'call' veya' apply' yöntemlerini kullanmanız gerekebilir. Bunları kullanmak, geri aramada 'bu'ın değerini değiştirmenize izin verecektir. – Tauren

2

:

geri arama yetenekleri sağlayan bir paragraf içeren http://www.learningjquery.com/2009/03/making-a-jquery-plugin-truly-customizable

...

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); 
} 
+0

Cevabınız için teşekkürler :) –

İlgili konular