では、肝心の「
jQuery Mobileのプラグイン部分」の記述について説明しましょう。先に述べたように、
jQuery Mobileのプラグインというのは、「ウィジェットを定義する」ものです。つまり、先ほどの
jQueryプラグインのスクリプト内に、
jQuery Mobileのウィジェットを定義するための処理を記述することで、プラグインが作成できるわけです。
では、先に述べた
jQueryプラグインの関数定義内に、
jQuery Mobileのプラグインのウィジェット定義を記述するのはどう書けばいいのでしょうか。これは整理すると以下のようになります。
$.widget( 名称, $.mobile.widget, {
options: {
……各種の初期値を用意する……
},
_create: function(){
……初期化処理を用意する……
}
……他、必要な関数定義を用意する……
}); ウィジェットの定義は、
$.widget( 名称, $.mobile.widget, 連想配列 ); といった形になっています。それぞれの役割について説明しましょう。
・名称ウィジェットの名前です。が、これは必ず「
mobile.○○」といった形で用意します。この名称は、ウィジェットが組み込まれる
名前空間となります。
jQuery Mobileのウィジェットは通常、
$.mobile内に配置されますので、必ず名前は「
mobile.○○」といった形にする必要があるのです。例えば、「
mobile.mywidget」とすれば、そのウィジェットは、
$.mobile.mywidgetという形で組み込まれ利用できるようになります。
・optionsこれは、ウィジェットで使われる各種の設定情報の初期値を指定するものです。ウィジェットで使われる各種の値は、すべて
$.mobile.ウィジェット.optionsというプロパティにまとめられます。これが、その値になります。利用する値は、ここに初期値を用意しておきます。またウィジェットを作成するとき、必ず値が引数などで渡されるとは限りませんので、値が渡されなければここに用意された値で初期化を行います。
・_create初期化のための関数定義です。ここで、ウィジェットの表示などを作成する処理を用意します。ウィジェットのオブジェクトが「
this」で渡され、この
this内の
elementというプロパティ内に、割り当てられるタグのDOMオブジェクトがまとめられています。ここからオブジェクトを取り出し、それについて必要な処理をしていきます。
・その他の関数その他に、ウィジェットにさまざまな機能を用意しておきたい場合には、それらの関数定義を連想配列の要素として用意していきます。こうして用意した関数は、ウィジェット内の引数で関数名を指定することで呼び出せるようになります。例えば、
hoge:function(){……}というように定義したものは、
○○('hoge');というようにして呼び出せます（
○○はウィジェットのオブジェクトです）。