jqueryのプラグインを作ろう（ドットインストール）

jqueryメソッド外部化

ここでは、画像をクリックすると、画像サイズが表示されるプラグインを作成する。

画面サイズ取得と表示

$(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’);
          $(this).after(div);
     });
});

スタイルの表示

上記にスタイルを追加

$(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(‘background’,’black')
                         .css(‘color’,’white')
                         .css(font-size,’10px')
                         .css(‘opacity’,’0.9')
                         .css(‘padding’,’2px’);
          $(this).after(div);
     });
});

プラグインファイルの作成

上記のコードをプラグインファイルへ

jquery.showsize.js

;(function($){

    $.fn.showsize = function(options){
          //this(3つのimg) 
          var elements = this;
          elements.each(function(){

     var opts = $.extends({}, $.fn.showsize.defaults, options);
     $(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(‘background’,’black')
                              .css(‘color’,’white')
                              .css(font-size, opts.size + ‘px')
                              .css(‘opacity’,’opts.opacity + ‘px'')
                              .css(‘padding’,’2px’);
               $(this).after(div);
          });
       });
     return this;
     }); 

$.fn.showsize.defaults = {
     size:10,
     opacity:0.5
     });

})(jQuery);


<script>
     $(function(){
          $(‘img’).showsize({
               size:20,
               opacity:0.2
     });
</script>

data属性の使用

data-sizeを反映させる

<img src=“image1.jpg” data-size=“50px”></p>


jquery.showsize.js

;(function($){

    $.fn.showsize = function(options){
          //this(3つのimg) 
          var elements = this;
          elements.each(function(){

     var opts = $.extends({}, $.fn.showsize.defaults, options,$(this). data());
     $(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(‘background’,’black')
                              .css(‘color’,’white')
                              .css(font-size, opts.size + ‘px')
                              .css(‘opacity’,’opts.opacity + ‘px'')
                              .css(‘padding’,’2px’);
               $(this).after(div);
          });
       });
     return this;
     }); 

$.fn.showsize.defaults = {
     size:10,
     opacity:0.5
     });

})(jQuery);


<script>
     $(function(){
          $(‘img’).showsize({
               size:20,
               opacity:0.2
     });
</script> 

プラグイン内で関数使う

function getRandomColor(){
     var colors = [‘white’ , ‘pink’ , ‘orange’ , ‘green’];
     return colors[Math.floor(Math.random() * colors.length)];
}

.css’(‘color’ , getRandomColor())