refirio.org

オプションを指定する

プラグインを使用する際、オプションを指定できるようにする方法です。プラグインは

$('セレクタ').プラグイン名();

このような形式で呼び出しましたが、

$('セレクタ').プラグイン名(オプション);

このように、括弧内にオプションを指定できます。

• サンプル

重要な部分を取り出すと以下のとおりです。

<script src="../jquery.js"></script>
<script src="jquery.argument.js"></script>
<script>
$(document).ready(function() {
  $('.test').argument({
    message: 'テスト'
  });
});
</script>

<a href="http://www.google.co.jp/" class="test">テスト2</a>

jquery.argument.js の内容は以下のとおりです。

(function($) {
  $.fn.argument = function(option) {
    var settings = $.extend({
      message: null
    }, option);

    $(this).click(function() {
      if (settings.message != null) {
        window.alert(settings.message);
      }

      return false;
    });
    return this;
  };
})(jQuery);

プラグインを呼び出す際に

{
  message: 'テスト'
}

というオプションを指定しています。この値をプラグイン内で受け取る場合、

$.fn.argument = function(option) {
  var settings = $.extend({
    message: null
  }, option);

このようにします。これで settings にオプションの内容が格納され、settings.message のように書くと テスト という文字を取得することができます。

message: null 部分は初期値になります。（オプションを指定しなかった場合、この値が使用されます。）

複数のオプションを指定する

プラグインにオプションを渡す際、

$('.test').test({
  message1: 'テスト1',
  message2: 'テスト2',
  message3: 'テスト3'
});

このように書けば複数の値を渡すこともできます。この場合、プラグインで値を受け取る際に

$.fn.argument = function(option) {
  var settings = $.extend({
    message1: null,
    message2: null,
    message3: null
  }, option);

このようにします。受け取る値が増えているだけで、処理方法は同じです。各値はそれぞれ

settings.message1
settings.message2
settings.message3

のように書くと取得することができます。

• サンプル

publicなメソッドとprivateなメソッドを定義する

プラグイン内でメソッド（関数）を定義することができます。メソッドにはpublicとprivateがあります。

publicなメソッドはプラグインの外側から直接呼び出せるメソッド、privateなメソッドはプラグインの内側からしか呼び出せないメソッドです。

• サンプル

重要な部分を取り出すと以下のとおりです。

<script src="../jquery.js"></script>
<script src="jquery.method.js"></script>
<script>
$(document).ready(function() {
  $('.test').method();
});
</script>

<a href="http://www.google.co.jp/" class="test">テスト2</a>

jquery.method.js の内容は以下のとおりです。

(function($) {
  $.fn.method = function(option) {
    $(this).click(function() {
      window.alert('テスト');

      //publicなメソッドを呼び出す
      $.fn.method.sample1('サンプル1');

      //privateなメソッドを呼び出す
      sample2('サンプル2');

      return false;
    });

    //publicなメソッドを定義
    $.fn.method.sample1 = function(message) {
      window.alert(message);
    };

    //privateなメソッドを定義
    var sample2 = function(message) {
      window.alert(message);
    };

    return this;
  };
})(jQuery);

publicなメソッドを定義する場合、

$.fn.プラグインの名前.メソッドの名前 = function(引数) {
  メソッドの処理内容
};

このような形式で定義します。またprivateなメソッドを定義する場合、

var メソッドの名前 = function(引数) {
  メソッドの処理内容
};

このような形式で定義します。プラグイン内でこれらを呼び出す場合、それぞれ

//publicなメソッドを呼び出す
$.fn.プラグインの名前.メソッドの名前(引数);

//privateなメソッドを呼び出す
メソッドの名前(引数);

このように書きます。プラグインの内側からなら、publicなメソッドもprivateなメソッドも呼び出すことができます。プラグインを使用する際、

<script src="../jquery.js"></script>
<script src="jquery.method.js"></script>
<script>
$(document).ready(function() {
  $('.test').method();
  $('.test').method.sample1('サンプル1');  //publicなメソッドを呼び出す
  $('.test').method.sample2('サンプル1');  //privateなメソッドは呼び出せない
});
</script>

このように

$('セレクタ').プラグイン名.メソッドの名前(引数);

と書けば、publicなメソッドを呼び出すことができます。ただしprivateなメソッドは呼び出せないため、上の例では sample2 メソッドは実行されません。（JavaScriptの実行エラーになります。）

メソッドを直接呼び出すタイプのプラグイン

jQueryのプラグインはセレクタをもとにして呼び出されることが多いですが、普通の関数のような形式のプラグインも作成できます。

• サンプル

重要な部分を取り出すと以下のとおりです。

<script src="../jquery.js"></script>
<script src="jquery.direct1.js"></script>
<script>
$(document).ready(function() {
  $.direct1('テスト');
});
</script>

jquery.direct1.js の内容は以下のとおりです。

(function($) {
  $.direct1 = function(message) {
    window.alert(message);
  };
})(jQuery);

このように

(function($) {
  $.プラグイン名 = function(引数) {
    プラグインの処理内容
  };
})(jQuery);

と書けば、

$.プラグイン名(引数);

と書くだけで呼び出せるプラグインになります。

複数のメソッドを直接呼び出すタイプのプラグイン

• サンプル

重要な部分を取り出すと以下のとおりです。

<script src="../jquery.js"></script>
<script src="jquery.direct2.js"></script>
<script>
$(document).ready(function() {
  $.direct2.sample1('テスト1');
  $.direct2.sample2('テスト2');
});
</script>

jquery.direct2.js の内容は以下のとおりです。

(function($) {
  $.direct2 = {
    sample1: function(message) {
      window.alert(message);
    },
    sample2: function(message) {
      window.alert(message);
    }
  };
})(jQuery);

このように

(function($) {
  $.プラグイン名 = {
    メソッドの名前: function(引数) {
      プラグインの処理内容
    },
    メソッドの名前: function(引数) {
      プラグインの処理内容
    }
  };
})(jQuery);

と書けば、

$.プラグイン名.メソッドの名前(引数);

と書くことによりメソッドを呼び出すことができます。1つのプラグインに複数の命令を実装したい場合、この方法が利用できます。