[jQuery] jQuery UIの基本的な使い方

2012 年 6 月 11 日2012 年 7 月 16 日

以下では、Dialogの場合を例にとるが、他のウィジェットでも基本は同じ。

DOM要素を動的に生成するのではなく、既存の要素を操作してウィジェットをつくる。あらかじめ、自分でHTMLを記述しておくか、JavaScriptで動的にDOM要素を追加しておく。

[html]

[/html]

対象要素をまずjQueryでサーチし、そのjQueryオブジェクトに各ウィジェットの関数を使う。

jQuery UIでは、ほとんどのウィジェットが単一の関数しか持っていない。その引数によって、動作や設定を指定していく。

[javascript]
var jqMain = jQuery(“#main");
jqMain.dialog();
[/javascript]

初期化の方法は2つ。

[javascript]
// オプション用のオブジェクトを指定しない
jqMain.dialog();

// 各オプションをオブジェクトでまとめて指定
jqMain.dialog({
autoOpen : false,
close : function () { }
});
[/javascript]

初期化したのちに、各種の動作や設定を個別に指定できる。

[javascript]
// 動作
jqMain.dialog(“open"); // ダイアログを表示

// 設定
//— 状態の取得
var autoOpen = jqMain.dialog(“option", “autoOpen");

//— オプションのセット
jqMain.dialog(“option", “autoOpen", true);
jqMain.dialog(“option", {autoOpen : true}); // オブジェクト
[/javascript]

ここで注意が必要なのは、あくまで初期化したあとに、個別の設定ができるようになるということ。

以下の例は一見問題ないようにも見えるが、上記の初期化が行なわれていないため、動作しない。

[javascript]
jqMain.dialog(“open");
[/javascript]

「かならず引数なしかオブジェクトで初期化してから操作する」と覚えておく。

[javascript]
jqMain.dialog({autoOpen : false});
jqMain.dialog(“open");
[/javascript]

jQuery UIはひとつのウィジェットに関数はひとつのみと決めているらしく、かえってわかりづらくなっているが、仕方がない。

なお、ウィジェットに指定したDOM要素は、初期化時にbodyの直下などに移され、かつjQuery UIによって生成されたdiv要素などでラップされる場合がある。

DOMツリーにおける位置が変わってしまうので、それに依存したコードの記述の仕方はしないようにしよう。

[html]

---