サンプルコード
jquery.showsize.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
;(function($) { $.fn.showsize = function(options) { console.log(this); var elements = this; elements.each (function() { var opts = $.extend({}, $.fn.showsize.defaults, options, $(this).data()); $(this).click(function() { var msg = $(this).width() + 'x' + $(this).height(); var color = getRandomColor(); $(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',color) .css('font-size',opts.size).css('opacity',opts.opacity); $(this).after(div); }); }); return this; }; $.fn.showsize.defaults = { size: 10, opacity: 0.9, }; // プラグイン内関数 function getRandomColor() { var colors = ['white','pink','orange','green']; return colors[Math.floor(Math.random() * colors.length)]; }; })(jQuery); |