एक jQuery प्लगइन

Question

के भीतर एक कॉलबैक फ़ंक्शन प्रोग्रामिंग मैं एक jQuery प्लग-इन लिख रहा हूं, इसलिए मैं इस कोड को कई स्थानों पर पुन: उपयोग कर सकता हूं क्योंकि यह कोड का एक बहुत अच्छी तरह से इस्तेमाल किया जाने वाला टुकड़ा है, कोड स्वयं तालिका में एक नई पंक्ति जोड़ता है जिसे एक छिपी हुई पंक्ति से क्लोन किया गया है, यह नई पंक्ति पर कुशलतापूर्वक भार का प्रदर्शन जारी रखता है।

मैं वर्तमान में इस तरह यह संदर्भित कर रहा हूँ:

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

लेकिन मैं तो हर क्षेत्र प्लग-इन से कहा जाता है कुछ थोड़ा और अद्वितीय कर सकते हैं जब पंक्ति जोड़ दिया गया है एक कॉलबैक शामिल करना चाहते हैं । मैंने पहले jQuery AJAX प्लग-इन का उपयोग किया है, इसलिए success कॉलबैक फ़ंक्शन का उपयोग किया है, लेकिन यह समझ में नहीं आता कि कोड पृष्ठभूमि में कैसे काम करता है। यहाँ मैं क्या हासिल करना चाहते है:

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

यहाँ मेरी प्लग में कोड

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

मैं आमतौर पर किया है elgooG पर खोज कर रहा है ... लेकिन मैं के साथ शोर का एक बहुत हो रही हो रहे हैं थोड़ा नतीजा, किसी भी मदद की सराहना की जाएगी।

धन्यवाद!

Answer 1

शायद ऐसा कुछ हो सकता है?

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

यह कुछ इस तरह के साथ कॉल:

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

संपादित करें: ताकि आप कॉलबैक के अस्तित्व के लिए परीक्षण करने के लिए की जरूरत नहीं है मैं तो बस डिफ़ॉल्ट कॉलबैक गयी। निजी तौर पर, मैं उन्हें कॉल करने से पहले अस्तित्व के लिए परीक्षण करना पसंद करता हूं, लेकिन आप इस मार्ग को पसंद कर सकते हैं।

Answer 2

yuo इस पोस्ट पढ़ सकते हैं:

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