Question

I’m trying to make a plugin (from a other code I have), but I just can’t get the options part to work D:

Plugin (so far):

(function($){
    $.fn.scBox = function(options){
        var $opts = $.extend($.fn.scBox.defaults, options);

        $.fn.scBox.defaults = {
            start: 40,
            //i: fn.scBox.defaults.start,
            width: 200,
            height: 50,
            min: 0,
            step: 10,
            fontSize: 15,
            textColor: "#fff",
            bgColor: "#000",
            slideColor: "#ff0000"
        }

        console.log($.fn.scBox.defaults);
    }
})(jQuery);

When I try to call it by $.scBox();, I get this error: Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'scBox' I just want it to log the options I gave to it D:

Answer 1

jQuery plugins are called on jQuery objects. You aren’t supposed to call them directly. You’re supposed to call it on a jQuery object.

$('#myElement').scBox();

Also, you’re calling $.extend on $.fn.scBox.defaults before you declare it.

    $.fn.scBox.defaults = {
        start: 40,
        //i: fn.scBox.defaults.start,
        width: 200,
        height: 50,
        min: 0,
        step: 10,
        fontSize: 15,
        textColor: "#fff",
        bgColor: "#000",
        slideColor: "#ff0000"
    }

    var $opts = $.extend($.fn.scBox.defaults, options);

NOTE: $.extend modifies the object passed as the 1st parameter (it also returns it). So, you don’t need the var $opts =:

$.extend($.fn.scBox.defaults, options);
console.log($.fn.scBox.defaults);

Or, you can do:

var $opts = $.extend({}, $.fn.scBox.defaults, options);
console.log($opts);

DEMO: http://jsfiddle.net/nfDTh/