Question

I am creating my first jQuery plugin that I would like to use for my projects.
However, the knowledge I have is not enough probably. Still, I wanna continue creating it…

So I have this part in my little plugin:

jQuery Plugin – Default Settings:

;(function($) {

var defaults = {

    title               : 'miniBox - Title Spot!',
    description         : 'miniBox Description Spot. Write a short article or leave it blank!',

    buttons: {
        switcher        : true,
        nameButton_1    : 'Continue',
        nameButton_2    : 'Discard',
    }
};

Now below we have this part:

$.fn.miniBox = function(customs) {
    var config = $.extend({}, defaults, customs);
    var $first = this.first();

    $first.init = function() {
        $('body').append( // -->
            '<div class="miniBox-wrap">'
        +       '<div class="miniBox-frame">'
        +           '<div class="miniBox-title"></div>'
        +           '<div class="miniBox-content">'
        +               '<div class="miniBox-description"></div>'
        +               '<div class="miniBox-buttons"></div>'
        +               '<div class="miniBox-counter"></div>'
        +           '</div>'
        +       '</div>'
        +       '<div class="miniBox-overlay"></div>'
        +   '</div>' // <--
        );

        var mB_buttonOne    = config.buttons.nameButton_1,
            mB_buttonTwo    = config.buttons.nameButton_2,
            mB_title        = config.title,
            mB_description  = config.description;

        // --> Confirmation Buttons - Settings OPEN //
        if(config.buttons.switcher === true) {
            $('.miniBox-buttons').append( // -->
                '<input type="button" id="agree" value=' + mB_buttonOne + '>'
            +   '<input type="button" id="disagree" value=' + mB_buttonTwo + '>'
            // <--
            );
        } else {
            $('.miniBox-buttons').remove();
        }
        // <-- Confirmation Buttons - Settings CLOSE //
        };
            $first.init();
    };

})(jQuery);

It is confusing a little bit to me, for the first time I guess…

QUESTION:

The title leads to settings fail so here’s another question.

My settings appears to be working if I set default title and description and then create custom title or/and description … It works, it will override defaults.

However as you can read that short if statement for buttons… It still works and overrides default settings if my buttons switcher is set to false or true in defaults or customs… However if defaults and customs both say: true or false… buttons value becomes “undefined”.

I have no clues how to say always read custom settings only, if they are defined and forget about defaults… Or something like that. I hope you guys understand me and hopefully I’ll find an answer.

Regards, Nenad.

EDIT:

Appears like I need to define completely a button config into customs in order not to get “undefined”… How can I fix this?

Example of Defaults:

var defaults = {
    buttons: {
        switcher        : false,
        nameButton_1    : 'Continue',
        nameButton_2    : 'Discard',
    }
};

Example of Customs:

$(function() {
$().miniBox({
    title: 'Works flawlessly!',
    buttons: {
        switcher: true
    }
});

});

How can I still use defaults buttons settings for button names if they are not defined into custom settings ?

Answer 1

.first is just a jQuery method. It selects the first element from the collection.

The init method is a defined function, which is then called immediately (a bit pointless in this case) although you could call it later on outside of the plugin code (also pointless).

As for the second part of your question, you were not recursively .extending the objects, so the nested object values weren’t getting extended. Use true as the first argument to .extend to make it deep: http://jsfiddle.net/ntdLu/1/