jQueryでプラグイン化！オプションの設定方法！

今回は、前回作成したjQueryでドロップダウンメニューのサンプルを、プラグイン化して、その際オプション設定をする方法をサンプルコードを交え記載してみようと思います。

jQueryで、ドロップダウンメニューなどを作成した場合、プラグイン化することができることは、以前記載いたしました。今回は、それに加えプラグイン化（メソッド化）した際、アニメーションのスピードなどの値を、オプションとして設定する方法をサンプルコードを交え記載したいと思います。

作成するサイトやページに合わせてアニメーションのスピード調整が簡単にできるようになっていると、UIとしても使いやすいことと思います。

という事で、それでは今回はッ、

・jQueryコードをプラグイン化（メソッド化）！
・jQueryオプションの設定
・オプションは複数設定可能
・メソッドのもう一つの記述方法

上記について記載していこうと思います…。

jQueryコードをプラグイン化（メソッド化）！

今回は、前回作成したドロップダウンメニューを、まず初めにプラグイン化してみます。単純にプラグイン化するだけでなく、オプション設定できるようにもしてみたいと思います。

jQueryでドロップダウンメニューのサンプル！

jQueryでドロップダウンメニューのサンプル！今回は、jQueryでドロップダウンメニューのサンプル！実装方法につきまして、実際にサンプルコードを用いて、詳しく記載していこうと思います。 Webサイトのグローバルメニューでよく使われてい…

まずは、メソッドを作成する基礎的な書き方から。

$.fn.メソッド名 = function(){
/* ここにメソッドの処理 */
}

今回はメソッド名をddMenuとして、プラグイン化のコードを記述していきます。

サンプルscript$.fn.ddMenu = function(options){——①
options = $.extend({——②
speed: “fast”——②
}, options);——②
$(“li”, this).each(function(){
var subMenu = $(“>ul”, this);
var defaultHeight = subMenu.height();
$(this).hover(function(){
if( subMenu.css(“display”) == “none” ){
subMenu.slideDown(options.speed, function(){
subMenu.css(“overflow”, “visible”);
});
} else {
subMenu.stop().animate({
“height”: defaultHeight
}, options.speed, function(){
subMenu.css(“overflow”, “visible”);
});
}
},
function(){
subMenu.stop().slideUp(options.speed);
});
});

$(“li:has(ul) > a”, this).append(‘<span class=”icon”></span>’);
$(“ul”, this).prepend(‘<li class=”balloon-caret”></li>’).hide();
return this;
}
/* メソッドの実行 */

$(function(){
$(“#dropdown”).ddMenu({——③
speed: 300——③
});——③
});

上記サンプルscriptは、前回作成したものをメソッド化し、オプションを付け加えたコードになります。

jQueryオプションの設定

今回上記のサンプル、1行目にoptionsという記述が加えられています。$.fnでメソッドを作る際、実はオプションを設定することができます。

まず先に分かりやすい③の部分の実行コードを説明いたします。

#dropdownに対して、作成したメソッドddMenu()を実行していますが、speed:300という記述があります。これはアニメーションのスピードをオプションで指定することによって、変更することができるようにしてあります。このように任意の値をオプションとしてメソッドに渡してあげることによって、汎用的なプラグインにすることができます。

そしてこのオプション機能を利用するためには、下記のように記述します。

$.fn.ddMenu = function(options){——①
options = $.extend({——②
speed: “fast”——②
}, options);——②
・・・省略・・・
}

少し複雑なので、順番に説明してみます。extend()メソッドというのは、オブジェクトを拡張するメソッドです。ここでは「オブジェクトの値を上書きしてくれる」という意味合いで問題ないと思います。少し説明すると、

$(“#dropdown”).ddMenu({
speed: 300
});

speedには「300」という値が入っています。そしてこの「speedは300」が、下記のように渡されています。

$.fn.ddMenu = function(speed は 300){
options = $.extend({
speed: “fast”
}, speed は 300);
・・・省略・・・
}

そして最終的には、optionsオブジェクトに「speedは300」が代入されます。ではextend()メソッドの中に記述されているspeed:fastは何のための記述かというと、これは「speedは300」が未設定の場合のデフォルトの値になります。シンプルにメソッドを実行した場合を記述してみます。

$(“#dropdown”).ddMenu();

上記ではspeedの値が記述されていません。つまり未設定というわけで、この場合は下記のようになります。

$.fn.ddMenu = function(speed は未設定){
options = $.extend({
speed: “fast”
}, speed は未設定);
・・・省略・・・
}

この場合、optionsオブジェクトには「speedは未設定」が渡されて未設定になってしまうのではなく、「speed:”fast”」が代入されます。値が設定されている場合は、extend()メソッドによって上書きされますが、設定されていない場合はデフォルトの値が適用される仕組みになります。

また、サンプルではoptionsという名前を使っていますが、ここは任意の名前を付けることができます。

そしてこのoptionsに代入されている値は、options.speedというように記述して利用することができます。（初めに記載したサンプルscriptを参照）

コードの中で、スピードについて記述してある部分を、このoptions.speedに書き換えれば、オプションで設定したスピードで処理を実行させることができます。

オプションを設定する場合は、ミリ秒、またはfast、slowなどで指定することができます。キーワードで指定する場合はクォーテーションで囲むのを忘れないように注意が必要です。

オプションは複数設定可能

上記サンプルでは、オプションでスピードを変更できるようにしましたが、オプションは複数設定することが可能です。オプションを利用してプラグイン化すれば、より汎用的なものが作れるようになりますから、ぜひ活用してほしいテクニックになります。

よく見かけるスライダーのプラグイン、コードを読み解くと、さらにオプションの記述方法がより深く理解することができることと思います。その際、気に掛けることは.extend()メソッドと、それに付帯する上記で説明した場合だと、options.speed、実際のコードだと変わることと思いますが、options.〇〇〇などになることと思います。