2010-03-28 12 views
80

Sto cercando di dare il mio funzionalità plug-in di richiamata, e mi piacerebbe per poter operare in un modo un po 'tradizionale:jQuery Plugin: Aggiunta funzionalità di richiamata

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

o

myPlugin({options}, anotherFunction()); 

Come gestisco quel parametro nel codice? È trattato come una entità completa? Sono abbastanza sicuro di sapere dove posizionare il codice dell'esecuzione, ma come posso ottenere il codice da eseguire? Non riesco a trovare molta letteratura sull'argomento, quindi grazie in anticipo per il tuo aiuto.

+2

La tua seconda la sintassi chiama la funzione invece di passarla. È necessario rimuovere '()' – SLaks

+6

Personalmente ritengo che sia meglio avere la callback specificata come parte del parametro "options". Ciò è particolarmente vero se si sviluppa che ci sono più motivi di uno per fornire un callback. – Pointy

+1

Come sarebbe qualcosa di simile a quell'aspetto, appuntito? Cura di fornire una risposta-risposta? – dclowd9901

risposta

159

Basta eseguire la richiamata nel plugin:

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

Si può anche avere la richiamata nelle opzioni oggetto:

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

}; 

utilizzarlo come this:

$('.elem').myPlugin({ 
    callback: function() { 
     // some action 
    } 
}); 
+0

Grazie mille, signore. Funziona come un fascino. – dclowd9901

+0

Solo un add per questa risposta. C'è un post che spiega questo: http://jquery-howto.blogspot.com/2009/11/create-callback-functions-for-your.html – RaphaelDDL

+0

@David Come aggiungere il parametro callback, voglio fare questo ' $ ('. elem'). myPlugin ({callback: function (param) {// some action}}); ' –

1

Cambia la funzione del plugin per prendere un secondo parametro. Supponendo che l'utente passi una funzione, quel parametro può essere trattato come una funzione regolare.
Si noti che è anche possibile rendere la richiamata una proprietà del parametro opzioni.

Ad esempio:

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

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

    ... 
}); 
5

Non so se ho capito bene la tua domanda. Ma per la seconda versione: Questo chiamerebbe immediatamente anotherFunction.

Fondamentalmente il vostro plugin dovrebbe essere una sorta di funzione che assomiglia a questo:

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

È necessario fornire una funzione oggetto come callback, quindi o function(){...} o anotherFunction (senza ()).

4

Riportare un tuffo nel passato.

pena notare che se si dispone di due argomenti passati, ad esempio:

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

quindi si chiama il plugin senza l'argomento opzioni, ma con una richiamata poi si incorrerà in problemi:

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

io lo uso per renderlo un po 'più flessibile:

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

un esempio po' in ritardo, bu può essere utile L'utilizzo degli argomenti può creare la stessa funzionalità.

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

Penso che questo potrebbe aiutare a

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

avevo condiviso un articolo sulla creazione di jQuery Plugin.I pensa che si dovrebbe verificare che http://mycodingtricks.com/jquery/how-to-create-your-own-jquery-plugin/