jquery, modifying a plugin's options

Question

I am attempting to change a plugin's options, on the fly. But I cannot find how that's accomplished. Though, I'm positive I've seen it done before.

here's a simple plugin with 1 option:

    <a href="javascript:void(0)" onclick="change_the_option(40)">click me</a>

    $(document).ready(function() {

        $(#menu).animateMenu({
            padding:20
        })

    });

function change_the_option(valchange){

 //somehow modify the option here, I'm guessing

}

That is loaded with the page, automatically. However, I may wish to change the padding option dynamically, without reloading the entire page.

Basically, if someone clicks a link or any selector I choose, I want to change padding:20 to padding:40, or whatever.

Does anyone have experience with modifying plugin options, on the fly?

Answer 1

This question bothered me for a while, and this is one of the work around I found. Works for me. English is not my first language, so pardon me if I don't explain it clearly.

This is one plugin I created for toggle switch before.

In the init method, I saved the plugin options to jQuery.data(), and then later on, I can call the simpleSwitchUpdate function with new options. As you can see, I retrieve the old options saved for the element and call the $.extend to compose new options, and just call the $.fn.simpleSwitch with the newOptions. I have been using this pattern for creating updatable plugins for a while and it works pretty well for me.

/**
 *  A plugin for switch
 */

(function($) {

    var Switch = {

        init : function(options, elm) {
            var self = this;
            self.$elm = $(elm);

            self.$elm.empty();
            self.options = $.extend({}, $.fn.simpleSwitch.options, options);

            self.$elm.data("switchData", self.options);
            self.$elm.append(self.createSwitch());

        },

        createSwitch : function() {

           //logic to create your plugin
        }
    };

    $.fn.simpleSwitch = function(options) {
        return this.each(function() {
            var simpleSwitch = Object.create(Switch);
            simpleSwitch.init(options, this);
        });
    };

    $.fn.simpleSwitchUpdate = function(options) {
        var switchData = this.data("switchData");
        var newOptions;
        if (switchData) {
            newOptions = $.extend({}, switchData, options);
        } else {
            newOptions = $.extend({}, $.fn.simpleSwitch.options, options);
        }

        return this.simpleSwitch(newOptions);
    };

    $.fn.simpleSwitch.options = {
        width : 25,
        height : 15,
        on : true,
        onDirection : "right",
        easing : "easeOutQuint",
        roundBorder : true,
        onColor : "orange",
        offColor : "lightgray",
        onToggle : null
    };

})(jQuery);

JSFIDDLE LINK

Answer 2

If you haven't already, have a look at

http://docs.jquery.com/Plugins/Authoring

from "Defaults and Option" on down to the end. Ideally you would want to be able to call your plugin passing some parameters to do what you want. For instance:

$("#menu").animateMenu("padding","20")

or

$("#menu").animateMenu("update",{padding:20})

Up to you exactly how you want it to work, but it should return the jquery object so that it ca be properly chained. This is all explained in the above link.

But in this way, you could have nice clean code, that you could chain along with other jquery, like so:

$("#menu").animateMenu();  // initialize the menu

// ... do other stuff

$("#menu").animateMenu("update",{padding:20}).css("color","red");

// ... etc.