extend jquery plugin object with functions

Question

I'm trying to write a new jQuery plugin.

base (this is not my plugin, just for better understanding):

(function($) {
    $.fn.mySuperCoolPlugin = function(options) {

        // Build main options before element iteration
        var opts = $.extend({}, $.fn.mySuperCoolPlugin.defaults, options);

        var editText= 'pre ' + opts.text + ' post';


        return this.each(function() {
            $(this).html(editText);
        });

    }

    // Default settings
    $.fn.mySuperCoolPlugin.defaults = {
        text: 'hi'
    }

})(jQuery);

Now after running my plugin I want to do some additional functions on it.

var plug = $('.text').mySuperCoolPlugin({text: 'running it'});
plug.runAnotherFunction('blabla');
// this for example should set the html to "pre running it post blabla"

plug.runAnotherFunction for example now should extend my previous text and add the text I entered.

Do you know what I mean? How to add extra functions to my plugin? I only see plugins you run once with some options.

Brian Stoner · Accepted Answer · 2010-08-07 13:37:40Z

1

Just add the function under your plugin:

   (function($) {
        $.fn.mySuperCoolPlugin = function(options) {

            // Build main options before element iteration
            var opts = $.extend({}, $.fn.mySuperCoolPlugin.defaults, options);

            var editText= 'pre ' + opts.text + ' post';


            return this.each(function() {
                $(this).html(editText);
            });

        }

        // Default settings
        $.fn.mySuperCoolPlugin.defaults = {
            text: 'hi'
        }

        $.fn.mySuperCoolPlugin.runAnotherFunction = function(){
            return "this is another function";
        }

    })(jQuery);

answered Aug 7, 2010 at 13:37

Brian Stoner

1581 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

choise Over a year ago

this will not work. check my second code block to know what i want.

zbynour · Accepted Answer · 2010-08-07 15:24:13Z

0

you need to create wrapper method. And there is one important rule: It must return the wrapped set. So you must return 'this' (refers to the wrapped set) to allow chaining (what you also needs). You can do this using following pattern:

(function($){
  $.fn.runAnotherFunction = function() {
    // put your code here
    // but you have to return 'this' to allow the chaining
  }
})(jQuery);

Or, better to say (in order to iterate over all wrapped sets inside):

(function($){
  $.fn.runAnotherFunction = function() {
    return this.each(function(){
      // put your code here
    });
  }
})(jQuery);

answered Aug 7, 2010 at 15:24

zbynour

19.8k3 gold badges32 silver badges45 bronze badges

2 Comments

choise Over a year ago

thanks but what do do then? now i've got this wrapper function returning itself. and how do i now add this extra functions ?

zbynour Over a year ago

As you have mySuperCoolPlugin(options) function, you can add the second one (which appends the text to the end of the element content): $.fn.runAnotherFunction = function(text) { return this.each(function() { $(this).append(text); }); }; Then you can call as you wrote above with 'blabla' parameter. That's what you want if i understand, isn't it?

Vlad Nicula · Accepted Answer · 2011-06-05 10:05:19Z

Adding methods to 'this' in the return this.each function will not work. At least it does not work in adobe air.

I tried:

return this.each(function(){
     this.myActionFunction = function() { /* code here */ };
}

but the code:

var myPluginObject = $(...).myPlugion({..});
myPluginObject.myActionFunction(); // faild
myPluginObject.first().myActionFunction(); //faild

So I ended up using an object that wrappes the object used by the plugin. My object looked like this:

var myPlugin = function(args) {
   return this.init();
}

var myPlugin.prototype = {
    init : function(args) { 
         if(args !== undefinded)                
             this.target = args.target // this is the $(...) object
         this.target.pluginCall(args.pluginArgs); // call the plugin method
         return this;
    },

    myActionMethod : function() {
        var target = this.target;
        // do something with target, which is the actual plugin object returned from the
        // plugin code.
    }
}

var pluginInstance = new myPlugin({
     target : $("#myOjbect"),
     pluginArgs : {
        /* plugin args here */
     }
});

pluginInstance.myActionMethod(); // works!

Collectives™ on Stack Overflow

extend jquery plugin object with functions

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related