views:

35

answers:

1

Given the following plugin how would you set defaults for all the instances? I would like it to work the same as $.datepicker.setDefaults().

(function ($) {
$.fn.borderSwitcher = function (options) {
    defaults = {
        borderColor: 'Black',
        borderWidth: '1px',
        borderStyle: 'solid'
    };

    return this.each(function () {

        var settings = $.extend(defaults, options);

        $(this).focus(function () {
            //find a better way to set border properties
            var props = settings.borderStyle + ' ' + settings.borderWidth + ' ' + settings.borderColor;
            $(this).css('border', props);
        });

        $(this).blur(function () {
            $(this).css('border', '');
        });
    });
};

})(jQuery);

A: 

Add them at jQuery object iteself:

(function ($) {
    $.borderSwitcher.defaults = { //NOTE: no fn here
        borderColor: 'Black',
        borderWidth: '1px',
        borderStyle: 'solid'
    };

    $.fn.borderSwitcher = function (options) {
        var settings = $.extend($.borderSwitcher.defaults, options);

        //the rest of your code
    }

};

//And outside your plugin definition, set the default for all new instances
$.borderSwitcher.defaults.borderWidth = '2px';

$('.foo').borderSwitcher(); //with 2px
$('.foo').borderSwitcher({borderWidth:'3px'}); //with 3px
idrosid