jQuery plugin override parameters

Question

In this plugin want to change background color with jQuery. default background color is red, but when i am trying to override parameters then don't work that, here i am trying to set background color green. but not working, that is still red

here is code on plugin file

    (function($){
    if(!$.fn){
        $.fn = new Object();
    };

    $.fn.myBgcolor = function(el, options){
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;

        // Add a reverse reference to the DOM object
        base.$el.data("fn.myBgcolor", base);

        base.init = function(){
            base.options = $.extend({},$.fn.myBgcolor.defaultOptions, options);

            // Put your initialization code here
        };

        // Sample Function, Uncomment to use
        base.BGcolor = function(paramaters){
        base.css("background-color", base.options.bgColor); 
        };

        // Run initializer
        base.init();
        base.BGcolor();
    };

    $.fn.myBgcolor.defaultOptions = {
        bgColor: "red"
    };

    $.fn.fn_myBgcolor = function(options){
        return this.each(function(){
            (new $.fn.myBgcolor(this, options));
        });
    };

    // This function breaks the chain, but returns
    // the fn.myBgcolor if it has been attached to the object.
    $.fn.getfn_myBgcolor = function(){
        this.data("fn.myBgcolor");
    };

})(jQuery);

here is code on html file

<p class="ele">dfdfg</p>

$(".ele").myBgcolor({
bgColor: "green"
});

Lafi · Accepted Answer · 2014-04-28 08:04:33Z

I am not sure what you are trying to achieve by the following two lines as this already refers to the jQuery object.

// Access to jQuery and DOM versions of element
base.$el = $(el);
base.el = el;

First mistake here is the extra argument el that refers to the options not to the element, so you have to remove it:

$.fn.myBgcolor = function(/* el, */ options)

And then your constructor should become like this:

$.fn.myBgcolor = function(options){
    // To avoid scope issues, use 'base' instead of 'this'
    // to reference this class from internal events and functions.
    var base = this;

    // Add a reverse reference to the DOM object
    base.data("fn.myBgcolor", base);

    base.init = function(){
         base.options = $.extend({},$.fn.myBgcolor.defaultOptions, options);
         // Put your initialization code here
    };

    // Sample Function, Uncomment to use
    base.BGcolor = function(paramaters){
         base.css("background-color", base.options.bgColor); 
    };

    // Run initializer
    base.init();
    base.BGcolor();
};

See the sample here http://jsfiddle.net/7Rrs3/1/

Collectives™ on Stack Overflow

jQuery plugin override parameters

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related