[jQuery] プラグインにオプションを追加する

サンプルコード

<p><img src="sample.jpg"></p>
<script src="js/jquery.showsize.js"></script>

$('img').showsize({
    size: 20,
    opacity: 0.5,
});

jquery.showsize.js

;(function($) {
    $.fn.showsize = function(options) {
        console.log(this);
        var elements = this;
        elements.each (function() {
            var opts = $.extend({}, $.fn.showsize.defaults, options);
            // $.extend(空オブジェクト,デフォルト値,設定値)
            // 空オブジェクトにオプションがセットされる
            $(this).click(function() {
                var msg = $(this).width() + 'x' + $(this).height();
                $(this).wrap('<div style="position:relative;"></div>');
                var div = $('<div>').text(msg).css('position','absolute').css('top',0)
                    .css('padding','2px').css('background','black').css('color','white')
                    .css('font-size',opts.size).css('opacity',opts.opacity);
                $(this).after(div);
            });
        });
        return this;
    };
    $.fn.showsize.defaults = {
        size: 10,
        opacity: 0.9,
    };
})(jQuery);