Question

How can I make this plugin code accept default options?

// Utility
if ( typeof Object.create !== 'function' ) {
object.create = function( obj ) {
    function F(){};
    F.prototype = obj;
    return new F();
};
}

(function( $, window, document, undefined ) {
var Super = {
    init: function( options, elem ) {
        var self = this;

        self.elem = elem;
        self.$elem = $( elem );

        //self.alertbox( options.alertmsg );    
        self.loadingBar( options.duration );

        if ( typeof options === 'string' ) {
            self.search = options;
        } else {
            // object was passed
            self.search = options.search;
        }


        self.options = $.extend({}, $.fn.superHero.options, options );


    },

    alertbox: function( message ) {
        var self = this;

        alert(message);

    },

    loadingBar: function( duration ) {
        var self = this;

        $('#loadingBar').animate({
            width:  699             
        }, duration);



    },


};

$.fn.superHero = function( options ){
    return this.each(function() {

        var hero = Object.create( Super );
        hero.init( options, this );

        $.data( this, 'superHero', hero);

    });

};

$.fn.superHero.options = {
    alertmsg:   'Hello World!',
    duration:   8000,
};

})( jQuery, window, document );

The options only work if I define them in the index page when calling the plug-in.

How do I make it so that the options have a default that is overwritten by the user as opposed to being required from the user?

Answer 1

It turns out I need to call;

self.loadingBar( self.options.duration ); 

as opposed to

self.loadingBar( options.duration ); 

Not sure what the difference is; all I know is it works.