1. ホーム
  2. javascript

[解決済み] メソッドを持つjQueryプラグインを作成するには?

2022-04-22 12:36:53

質問

私は、それを呼び出すオブジェクトに追加の関数/メソッドを提供するjQueryプラグインを書こうとしています。私がオンラインで読んだすべてのチュートリアル(過去2時間閲覧した)は、せいぜいオプションを追加する方法を含んでいますが、追加の関数は含まれていません。

私がやりたいことは、こんな感じです。

// div をメッセージコンテナにするために、その div 用のプラグインを呼び出します。

$("#mydiv").messagePlugin();
$("#mydiv").messagePlugin().saySomething("hello");

といった具合です。 まとめるとこんな感じです。プラグインを呼び出してから、そのプラグインに関連する関数を呼び出す。私はこれを行う方法を見つけることができないようです、そして、私は以前に多くのプラグインがそれを行うのを見たことがあります。

今のところ、プラグインはこんな感じです。

jQuery.fn.messagePlugin = function() {
  return this.each(function(){
    alert(this);
  });

  //i tried to do this, but it does not seem to work
  jQuery.fn.messagePlugin.saySomething = function(message){
    $(this).html(message);
  }
};

どうすれば、そのようなことが実現できるのでしょうか?

ありがとうございました。


2013年11月18日更新 Hariさんの以下のコメントとupvoteを参考に、正解を変更しました。

解決方法は?

jQueryプラグインオーサリングページによると、( http://docs.jquery.com/Plugins/Authoring ) を使用する場合、jQuery と jQuery.fn の名前空間を混同しないことが望ましいとされています。このような方法が提案されている。

(function( $ ){

    var methods = {
        init : function(options) {

        },
        show : function( ) {    },// IS
        hide : function( ) {  },// GOOD
        update : function( content ) {  }// !!!
    };

    $.fn.tooltip = function(methodOrOptions) {
        if ( methods[methodOrOptions] ) {
            return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
            // Default to "init"
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  methodOrOptions + ' does not exist on jQuery.tooltip' );
        }    
    };


})( jQuery );

基本的には、関数を配列に格納し(ラップ関数にスコープ)、渡されたパラメータが文字列であればエントリをチェックし、パラメータがオブジェクト(またはnull)であればデフォルトメソッド(ここでは"init")に戻すというものです。

そうすると、以下のようにメソッドを呼び出すことができます。

$('div').tooltip(); // calls the init method
$('div').tooltip({  // calls the init method
  foo : 'bar'
});
$('div').tooltip('hide'); // calls the hide method
$('div').tooltip('update', 'This is the new tooltip content!'); // calls the update method

Javascripts の "arguments" 変数は、渡されたすべての引数の配列であるため、任意の長さの関数パラメータを扱うことができます。