【37：自作JQueryプラグイン 】クリックするとメッセージ表示するJQueryをプラグイン化
プロジェクトNo.37：自作JQueryプラグイン - DEMO
これまで既存のJQueryプラグインをいくつか使ってみたが、
自分でも簡単に作れるようなのでやってみた。
仕様は、クリックするとメッセージが表示されるものになります。
JQueryのプラグイン化
まずはいつも通り実装
まずは普通にJQueryで実装したい内容を書きます。
今回は「クリックするとメッセージが表示される」というシンプルなものを用意しました。
最初にHTMLに表示する画像を用意します。
その際にdata属性を記述しておき、表示するメッセージ内容や、そのフォントサイズなどを指定しておきます。
HTML
<body> <h1>自作JQueryプラグイン</h1> <h2>画像をクリックしてメッセージ表示</h2> <p><img src="img/c1.jpg" data-size="50" data-message="ゾウ"></p> <p><img src="img/c2s.jpg" data-size="10" data-message="サボテン"></p> <script src="./js/jquery1.6.4.min.js"></script> <script src="./js/jquery.showsize.js"></script> <script src="./js/main.js"></script> </body>
クリックイベントとcss指定を行い、div要素を生成します。
JavaScript（main.js）
$(function () { $(img).click(function(){ var msg = $(this).data().message; $(this).wrap('<div style="position:relative;")></div>'); var div = $('<div>') .text(msg) .css('position', 'absolute') .css('top', '0') .css('background', 'black') .css('color', getRandomColor()) .css('font-size', $(this).data().size + 'px') .css('opacity', 0.9) .css('padding', '2px'); $(this).after(div); }); });
JQueryの外部化（プラグイン化）
まずは新しくJSファイルを作成します。
jquery.showsize.js
これがプラグインになります。
HTMLで作ったプラグインを指定。
HTML
<script src="./js/jquery.showsize.js"></script>
先ほど作ったmain.jsの内容をjquery.showsize.jsに移していきます。
main.jsではこの後に作るjquery.showsize.jsのshowsizeメソッドを記述します。
JavaScript（main.js）
$(function () { $('img').showsize({ // size : 20, opacity: 0.5 }); });
jquery.showsize.jsの内容です。
JavaScript（jquery.showsize.js）
;(function($) { // この;は他のファイルの;漏れのための予防 $.fn.showsize = function(options){ var elements = this; // このthisは指定した全ての要素（この場合２つのimg） elements.each(function(){ var opts = $.extend({}, $.fn.showsize.default, options, $(this).data()); // $.extendは後ろの引数の方が優先度が高い $(this).click(function(){ // このthisは１つのimg var msg = opts.message; $(this).wrap('<div style="position:relative;")></div>'); var div = $('<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); }); }); return this; // チェーンメソッドのため }; function getRandomColor(){ var colors = ['white', 'pink', 'orange', 'green']; return colors[Math.floor(Math.random() * colors.length)]; } $.fn.showsize.default = { size: 10, opacity: 0.9 } })(jQuery);
まずは基本的なひな形として、下記の様に記述します。
;(function($) { // この;は他のファイルの;漏れのための予防 $.fn.showsize = function(){ // このshowsizeはプラグイン名を指定 } })(jQuery);
今回はmain.jsからオプションを指定しているので、
$.fn.showsize = function(options){
という風に変更します。
この中でeachメソッドを用いてそれぞれの要素に対して、cssを指定しています。
後は最初にmain.jsで記述していた内容をコピーして、オプションなどの部分を変更してあげれば完成です。
また最後にdefault設定も指定しておくと良いでしょう。
$.fn.showsize.default = { size: 10, opacity: 0.9 }
![Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)](https://m.media-amazon.com/images/I/51SB3qDuV9L._SL500_.jpg "Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)")
