[jQuery] 機能をプラグイン化する

サンプルコード

画像をクリックすると、画像の右上にサイズを表示する例題。

<p><img src="sample.jpg"></p>

<script>
$(function() {
    $('img').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','10px').css('opacity','0.9');
        $(this).after(div);
    });
});
</script>

この機能をプラグイン化する。

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

$('img').showsize();

jquery.showsize.js

// このJSの前に読み込んだライブラリにセミコロンが抜けていた場合に
// 備えて先頭にセミコロンをつけておく (予防的処置)
;(function($) {
    $.fn.showsize = function() {
        console.log(this);
        var elements = this;
        elements.each (function() {
            $(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','10px').css('opacity','0.9');
                $(this).after(div);
            });
        });
        return this; //メソッドチェインのために必要
    };
})(jQuery);