サンプルコード
画像をクリックすると、画像の右上にサイズを表示する例題。
|
1 |
<p><img src="sample.jpg"></p> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
この機能をプラグイン化する。
|
1 2 |
<p><img src="sample.jpg"></p> <script src="js/jquery.showsize.js"></script> |
|
1 |
$('img').showsize(); |
jquery.showsize.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// この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); |