jQueryのプラグインを自作するサンプルです。
構文
プラグインは以下の構文で記述します。
- （構文）
- (function($){ $.fn.＜メソッド名＞ = function(＜引数＞){ //処理 }; })(jQuery);
サンプルソース
例）要素のwidth、height、背景色、文字色を指定するプラグイン
|
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 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $(function(){ //ボタンクリック時イベント $('#btn1').click(function(){ var a = $('#v1').samplePlugin(100, 30); console.log(a); }); }); //プラグイン (function($){ // $.fn.samplePlugin = function(w, h){ this.width(w); this.height(h); this.css("color", "white"); this.css("background-color","blue"); return w * h; }; })(jQuery); </script> </head> <body> <input type="button" id="btn1" value="btn1"> <div id="v1">abc</div> </body> </html> |
例）メソッドチェーンに対応したプラグイン
|
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 29 30 31 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $(function(){ //ボタンクリック時イベント $('#btn1').click(function(){ $('#v1').samplePlugin().css("font-weight", "bold"); }); }); //プラグイン (function($){ $.fn.samplePlugin = function(){ this.css("color", "white"); this.css("background-color","blue"); return this; }; })(jQuery); </script> </head> <body> <input type="button" id="btn1" value="btn1"> <div id="v1">abc</div> </body> </html> |
解説
- メソッドチェーンに対応するには、自分自身（this）をreturnすればOKです。
- プラグインを別ファイルとしたい場合は、以下記事をご覧ください。
→ [jQuery] プラグインを別ファイルにする