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

2012 年 6 月 11 日

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

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

<body>
	<div id="container">
		<div id="main">Sample</div>
	</div>
</body>

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

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

var jqMain = jQuery("#main");
jqMain.dialog();

初期化の方法は2つ。

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

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

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

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

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

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

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

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

jqMain.dialog("open");

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

jqMain.dialog({autoOpen : false});
jqMain.dialog("open");

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

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

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

<body>
	<div id="container">
		<!-- 「<div id="main">Sample</div>」がない -->
	

	<!-- 以下がDialog用に生成された記述 -->
	<div aria-labelledby="ui-dialog-title-1" role="dialog" tabindex="-1"
		class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable"
		style="display: block; z-index: 1004; outline: 0px none; position: absolute; height: auto; width: 300px; top: 135px; left: 485.5px;">
		<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
			<span id="ui-dialog-title-1" class="ui-dialog-title">タイトル</span><a role="button" class="ui-dialog-titlebar-close ui-corner-all"
				href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
		</div>
		<div id="main" scrollleft="0" scrolltop="0"
			class="ui-dialog-content ui-widget-content"
			style="width: auto; min-height: 2.1px; height: auto;">Sample</div>
		<div class="ui-resizable-handle ui-resizable-n"></div>
		<div class="ui-resizable-handle ui-resizable-e"></div>
		<div class="ui-resizable-handle ui-resizable-s"></div>
		<div class="ui-resizable-handle ui-resizable-w"></div>
		<div style="z-index: 1001;"
			class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se"></div>
		<div style="z-index: 1002;"
			class="ui-resizable-handle ui-resizable-sw"></div>
		<div style="z-index: 1003;"
			class="ui-resizable-handle ui-resizable-ne"></div>
		<div style="z-index: 1004;"
			class="ui-resizable-handle ui-resizable-nw"></div>
		<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
			<div class="ui-dialog-buttonset">
				<button aria-disabled="false" role="button"
					class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
					type="button">
					<span class="ui-button-text">OK</span>
				</button>
			</div>
		</div>
	</div>
	<div style="width: 1280px; height: 481px; z-index: 1003;"
		class="ui-widget-overlay"></div>
</body>

ウィジェットを閉じても、そのHTML（DOM要素）が削除されるわけではない（CSSで非表示になるだけ）。

メモリーリークを防ぐためにも、不要なウィジェットのHTMLは手動で削除する。

jqMain.remove();

HTMLを見るといろいろな記述があるが、初期化に使ったウィジェット用の要素をjQueryでremove()すれば、自動的に丸ごと消してくれる。

ライブラリ,jQuery

Posted by takasho