2010-03-28 2 views
80

Ich versuche, meine Plugin Rückruf Funktionalität zu geben, und ich möchte es in eine etwas traditionellen Art und Weise arbeiten:jQuery Plugin: Hinzufügen von Callback-Funktionalität

myPlugin({options}, function() { 
    /* code to execute */ 
}); 

oder

myPlugin({options}, anotherFunction()); 

Wie gehe ich mit diesem Parameter im Code um? Wird es als eine vollständige Einheit behandelt? Ich bin mir ziemlich sicher, dass ich weiß, wo ich den Executory-Code platzieren würde, aber wie bekomme ich den Code zur Ausführung? Ich kann nicht viel Literatur zu diesem Thema finden, also danke im Voraus für Ihre Hilfe.

+2

Ihre zweite Die Syntax ruft die Funktion auf, statt sie zu übergeben. Sie müssen die '()' – SLaks

+6

Personally Ich denke, Sie sind besser dran mit dem Rückruf als Teil der "Optionen" -Parameter angegeben werden. Dies gilt insbesondere, wenn sich herausstellt, dass es mehr Gründe gibt, einen Callback bereitzustellen. – Pointy

+1

Wie würde so etwas aussehen, Pointy? Kümmere dich um eine Antwort-Antwort? – dclowd9901

Antwort

159

einfach den Rückruf im Plugin ausführen:

$.fn.myPlugin = function(options, callback) { 
    if (typeof callback == 'function') { // make sure the callback is a function 
     callback.call(this); // brings the scope to the callback 
    } 
}; 

Sie auch den Rückruf in den Optionen kann das Objekt:

$.fn.myPlugin = function() { 

    // extend the options from pre-defined values: 
    var options = $.extend({ 
     callback: function() {} 
    }, arguments[0] || {}); 

    // call the callback and apply the scope: 
    options.callback.call(this); 

}; 

Verwenden Sie es wie Dies ist:

+0

Vielen Dank, mein Herr. Klappt wunderbar. – dclowd9901

+0

Nur ein Zusatz für diese Antwort. Es gibt einen Beitrag, der dies erklärt: http://jquery-howto.blogspot.com/2009/11/create-callback-functions-for-your.html – RaphaelDDL

+0

@David Wie Callback-Parameter hinzufügen, möchte ich dies tun ' $ ('. elem'). myPlugin ({callback: function (param) {// irgendeine aktion}}); ' –

1

Ändern Sie Ihre Plugin-Funktion, um einen zweiten Parameter zu übernehmen. Unter der Annahme, dass der Benutzer eine Funktion übergibt, kann dieser Parameter als eine reguläre Funktion behandelt werden.
Beachten Sie, dass Sie den Rückruf auch als Eigenschaft des options-Parameters festlegen können.

Zum Beispiel:

$.fn.myPlugin = function(options, callback) { 
    ... 

    if(callback)  //If the caller supplied a callback 
     callback(someParam); 

    ... 
}); 
5

Ich weiß nicht, ob ich Ihre Frage richtig verstehe. Aber für die zweite Version: Dies würde sofort anotherFunction aufrufen.

Grundsätzlich sollte das Plugin eine Art von Funktion sein, die wie folgt aussieht:

var myPlugin = function(options, callback) { 
    //do something with options here 
    //call callback 
    if(callback) callback(); 
} 

Sie haben, um eine Funktion Objekt als Rückruf, also entweder function(){...} oder anotherFunction (ohne ()).

4

Eine Explosion aus der Vergangenheit zurückbringen.

erwähnenswert, dass, wenn Sie zwei Argumente übergeben haben, zum Beispiel:

$.fn.plugin = function(options, callback) { ... }; 

Sie ohne das Argument Optionen das Plugin Dann rufen aber mit einem Rückruf dann werden Sie auf Probleme stoßen:

$(selector).plugin(function() {...}); 

ich diese verwenden, um es ein wenig flexibler:

if($.isFunction(options)) { callback = options } 
0

ein Beispiel bisschen spät, bu t es kann nützlich sein. Die Verwendung von Argumenten kann die gleiche Funktionalität erzeugen.

$.fn.myPlugin = function() { 
    var el = $(this[0]); 
    var args = arguments[0] || {}; 
    var callBack = arguments[1]; 
    ..... 
    if (typeof callback == 'function') { 
     callback.call(this); 
    } 
} 
1

Ich denke, das Sie sollten Sie einen Artikel über das Erstellen Ihrer eigenen jQuery Plugin.I denken geteilt hatte

// Create closure. 
 
(function($) { 
 
    
 
    // This is the easiest way to have default options. 
 
    
 
     var settings = $.extend({ 
 
      // These are the defaults. 
 
    
 
      onready: function(){}, 
 
    
 
      //Rest of the Settings goes here... 
 
     }, options); 
 
    
 
    // Plugin definition. 
 
    $.fn.hilight = function(options) { 
 
    
 
     //Here's the Callback 
 
     settings.onready.call(this); 
 
    
 
     //Your plugin code goes Here 
 
    }; 
 
    
 
// End of closure. 
 
    
 
})(jQuery);

ich überprüfen könnte helfen, dass http://mycodingtricks.com/jquery/how-to-create-your-own-jquery-plugin/