jQueryプラグインの実践をしてみた
こんにちは。ちょっとずつ学習したことを実践して投稿します。
やったこと
jQueryとjavaScriptを使って、
1. 画像をクリックしたら、そのフォントサイズを表示する。
2. ボタンをクリックしたらテキストを取得し表示する
コード
部分的にコードを抜粋します。
index.htmlに画像などいろいろと要素を埋め込んでいきます。
jquery.showsize.jsの方へ画像をクリックした際の動作を埋め込んでいき、外部ファイルとして取得します。
index.html
<buttontype="button"name="button"><p><imgsrc="img/hoge.jpg"></p><divid="cat1-button"><pid="text-a">click</p></div></button><buttontype="button"name="button"><p><imgsrc="img/hogehoge.jpg"></p><divid="cat2-button"><pid="text-b">click</p></div></button><buttontype="button"name="button"><p><imgsrc="img/hogehogehoge.jpg"></p><divid="cat3-button"><pid="text-c">click</p></div></button><buttontype="button"name="button"><p><imgsrc="img/hogehogehogehoge.jpg"data-size="30"></p><divid="cat4-button"><pid="text-d">click</p></div></button></div></ul><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script src="jquery.showsize.js"></script><script>$(function(){$('img').showsize({});});{document.getElementById("cat1-button").onclick=function(){document.getElementById("text-a").innerHTML="hoge";};}{document.getElementById("cat2-button").onclick=function(){document.getElementById("text-b").innerHTML="hogehoge";};}{document.getElementById("cat3-button").onclick=function(){document.getElementById("text-c").innerHTML="hogehogehoge";};}{document.getElementById("cat4-button").onclick=function(){document.getElementById("text-d").innerHTML="hogehogehogehoge";};}</script></div>jquery.showsize.js
;(function($){$.fn.showsize=function(options){varelements=this;elements.each(function(){varopts=$.extend({},$.fn.showsize.defaults,options,$(this).data());$(this).click(function(){varmsg=$(this).width()+' x '+$(this).height();$(this).wrap('<div style="position:relative;"></div>');vardiv=$('<div>').text(msg).css('position','absolute').css('top','0').css('background','black').css('color',getRandomColor()).css('font-size',opts.size+'px').css('opacity',opts.opacity).css('padding','2px');$(this).after(div);});});returnthis;};functiongetRandomColor(){varcolors=['white','skyblue','orange','green'];returncolors[Math.floor(Math.random()*colors.length)];}$.fn.showsize.defaults={size:10,opacity:0.9};})(jQuery);後記
複数のscriptが続く際には、｛｝で括るという初歩的なことが大事だと痛感しました。
このコードをサンプルとしてご自由にご利用ください。