[解決済み] メソッドを持つjQueryプラグインを作成するには?
質問
私は、それを呼び出すオブジェクトに追加の関数/メソッドを提供する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" 変数は、渡されたすべての引数の配列であるため、任意の長さの関数パラメータを扱うことができます。
関連
-
vue3レスポンシブ対応のためのsetup+ref+reactive
-
[解決済み】ExpressJS : res.redirect()が期待通りに動かない?
-
[解決済み】ReactJSでエラー発生 Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] GUID / UUIDの作成方法
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
jQueryのコピーオブジェクトの説明
-
Javascript Bootstrapのグリッドシステム、ナビゲーションバー、ローテーションの説明
-
vue ディレクティブ v-html と v-text
-
Vueのクラススタイルの使い方の詳細
-
vueにおけるfilterの適用シーンについて解説します。
-
[解決済み】React - uncaught TypeError: 未定義のプロパティ 'setState' を読み取れない
-
[解決済み】Node Version Manager のインストール - nvm コマンドが見つかりません。
-
[解決済み】React Nativeアプリをターミナルから実行するとエラーが発生する(iOS)
-
[解決済み】React-Redux: アクションはプレーンオブジェクトでなければならない。非同期アクションにはカスタムミドルウェアを使用する
-
JavaScriptのgetElementById()メソッド入門