Geek asks and answers

Jquery changing plugin options

I am trying to change plugin settings on the fly. But I can’t find how this happened. Although, I'm sure I saw it before.

here is 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

}

This is loaded by the page automatically. However, I can change the dynamic addition without reloading the entire page.

Basically, if someone clicks on a link or any selector that I select, I want to change the padding: 20 to padding: 40 or something else.

Does anyone have any experience changing plugin settings on the fly?

+3
source share
3 answers

If you haven’t done it yet, take a look

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

" " . , , . :

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


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

, , , jquery, . .

, jquery, :

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

// ... do other stuff

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

// ... etc.
+1

, , . . , , .

, .

init jQuery.data(), , simpleSwitchUpdate . , , , $.extend $.fn.simpleSwitch newOptions. , .

/**
 *  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

+2

. , , :

$(document).ready(function() {
    var animateMenu = $('#menu').animateMenu({
        padding:20
    })
});

:

animateMenu.add(something); animateMenu.setOptions({ padding: 30 }); ( - ).

jQuery, , . , , , jQuery, :

$(document).ready(function() {
    var animateMenu = $('#menu').animateMenu({
        api:true
    })
});

, jQuery Tools, , . http://flowplayer.org/tools/tabs/index.html

PS: , .

0

More articles:


All Articles