はじめに

 * 最近、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逆引きリファレンス

$.fn
http://www.buildinsider.net/web/jqueryref/031
$.extend
http://www.buildinsider.net/web/jqueryref/032

その他一般サイト

http://yyengine.jp/blog/jquery/jquery-plugin-5step/