[jQuery] プラグイン内に関数を定義する – 端くれプログラマの備忘録

サンプルコード

jquery.showsize.js

;(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);

;(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);

サンプルコード

関連記事