jQuery Plugin: Adding Callback functionality

Question

I\'m trying to give my plugin callback functionality, and I\'d like for it to operate in a somewhat traditional way:

myPlugin({options}, function() {
    /*          


        

Answer 1

I think this might help you

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

I had shared a article about Creating your Own jQuery Plugin.I think you should check that http://mycodingtricks.com/jquery/how-to-create-your-own-jquery-plugin/

Answer 2

Change your plugin function to take a second parameter. Assuming that the user passes a function, that parameter can be treated as a regular function.
Note that you can also make the callback a property of the options parameter.

For example:

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

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

    ...
});

Answer 3

An example bit late, but it can be useful. Using arguments can create the same functionality.

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

Answer 4

I don't know if I understand your question correctly. But for the second version: This would call anotherFunction immediately.

Basically your plugin should be some kind of function that looks like this:

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

You have to provide a function object as callback, so either function(){...} or anotherFunction (without () ).

Answer 5

Bringing back a blast from the past.

Worth noting that if you have two arguments passed, for example:

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

Then you call the plugin without the options argument but with a callback then you'll run into issues:

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

I use this to make it a little more flexible:

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

Answer 6

Just execute the callback in the 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
    }
};

You can also have the callback in the options object:

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

};

Use it like this:

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