CODEWITHSUNDEEP
jqueryjquery-plugins
Igor Timoshenko
Igor Timoshenko

Reputation: 1011

How to extend the plugin for jQuery?

I am writing the plugin for jQuery. I have the problem with the extension plugin. I wrote the plugin for example: http://docs.jquery.com/Plugins/Authoring.

See the following example code:

(function($){
    var i18n    = {};
    var methods = {};
    $.fn.myPlugin = function(options){
        //...
   };
})(jQuery);

How can I extend the property i18n?

I want to be able to support the internationalization plug-in settings which are stored in the separate file. How should I do?

Upvotes: 3

Views: 317

Answers (4)

James
James

Reputation: 79

You can do it by $.extend( objectA, objectB ) method of jQuery. I reckon youl'd better start learning jquery plugin dev. from basic hello world tutorial such as this link http://www.tectual.com.au/posts/3/How-To-Make-jQuery-Plugin-jQuery-Plugin-Hello-World-.html or Check this post over here https://stackoverflow.com/a/11611732/1539647 or

Upvotes: 0

Robin Maben
Robin Maben

Reputation: 23044

Below is a handy template I use for myself..

(function($){

var MyClass = function (element, options){

   this.options = $.extend({}, options);

   this.someFunction = function (){...}  //Public members

   var otherFunction = function(){...}   //Private members

   $(element).data('pluginInstance', this);   

}


$.fn.myPlugin = function(options){

    var myClassInstace = new MyClass(this, options);

    //Do other things with the object.
}

})(jQuery);

Upvotes: 1

gen_Eric
gen_Eric

Reputation: 227200

jQuery plugins usually extend options like this:

var i18nOpts = $.extend({}, i18n, options.i18n);

Docs: http://docs.jquery.com/Plugins/Authoring#Defaults_and_Options

This happens inside the plugin itself.

(function($){
    var i18n    = {};
    var methods = {};
    $.fn.myPlugin = function(options){
        var i18nOpts = $.extend({}, i18n, options.i18n);
   };
})(jQuery);

i18n only exists inside that function, to extend it, you can now pass options to the plugin.

$('#myDiv').myPlugin({
    i18n: {
        option1: "value",
        option2: "Value2"
    }
});

Upvotes: 1

coder
coder

Reputation: 13250

For example:

// plugin definition
$.fn.hilight = function(options) {
  // Extend our default options with those provided.
  // Note that the first arg to extend is an empty object -
  // this is to keep from overriding our "defaults" object.
  var opts = $.extend({}, $.fn.hilight.defaults, options);
  // Our plugin implementation code goes here.
};
// plugin defaults - added as a property on our plugin function
$.fn.hilight.defaults = {
  foreground: 'red',
  background: 'yellow'
};

From here http://www.learningjquery.com/2007/10/a-plugin-development-pattern.

This is a very nice tutorial to get started with

Upvotes: 2

Related Questions