はじめに
* 最近、JavaScriptばっかり書いてたので、共通処理をjQueryプラグイン化する事を考える
構文
基本
(function($) {
$.fn.【プラグイン名】 = function() {
// ここに実装する
return this;
};
})(jQuery);
引数を受け取る
(function($) {
$.fn.【プラグイン名】 = function(params) {
// (1) デフォルト値を準備
var defaults = {
【パラメータ名】: 【デフォルト値】,
};
// (2) デフォルト値に引数をマージ
var config = $.extend(defaults, params);
// ここに実装する
return this;
};
})(jQuery);
サンプル
HelloWorld.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Sample</title> </head> <body> <div id="result">Here</div> <button id="fire" />Click me!</button> <script src="">http://code.jquery.com/jquery-1.11.3.min.js"> <script src="jQuery.sample.js"></script> <script> $("#fire").click(function(event){ $("#result").sample({ text: 'Hello, World!!!!', }); }); </script> </body> </html>
jQuery.sample.js
(function($) {
$.fn.sample = function(params) {
// (1) デフォルト値を準備
var defaults = {
text: "Hello World!",
};
// (2) デフォルト値に引数をマージ
var config = $.extend(defaults, params);
this.text(config.text);
return this;
};
})(jQuery);
参考文献
jQuery逆引きリファレンス
$.fnhttp://www.buildinsider.net/web/jqueryref/031
$.extend
http://www.buildinsider.net/web/jqueryref/032
