libro
www.tuyano.com
jQuery Mobileによるスマートフォン用Webサイト作成入門

プラグインを作ろう! (2/4)

作成:2012-03-19 07:57
更新:2012-03-19 07:57

■jQuery Mobileのウィジェット定義

では、肝心の「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');というようにして呼び出せます(○○はウィジェットのオブジェクトです)。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

※関連コンテンツ

「jQuery Mobileによるスマートフォン用Webサイト作成入門」に戻る