jQuery UI Dialogの導入法と使い方のさわり(jQuery UI 1.5.2)

JavaScript jQuery jQueryUI

jQuery UI Dialogって何？

http://dev.jquery.com/view/trunk/ui/demos/functional/#ui.dialogにあるデモを見ると感じがつかめると思うけど、
ウィンドウっぽいダイアログをちょいちょいで作れちゃうし、
オーバーレイありのも作れちゃうjQuery plugin。

使うのに何が必要か？それと、入手法

  • jQuery1.2.6以降
  • UI Core(ui.core.js)
  • Dialog(ui.dialog.js)
    • Dialog本体
  • Draggable(ui.draggable.js)
    • ダイアログをマウスでドラッグできるようにしたい場合は必要、でなければ不要
  • Resizable(ui.resizable.js)
    • ダイアログの端をマウスでつかんで引っ張ってサイズ変更できるようにしたい場合は必要、でなければ不要
    • ui.hogehoge.jsはみんな、jQuery UI 1.5.2のzipに入っている。
    • http://ui.jquery.com/download_builder/で使いたい機能を選ぶと依存するライブラリ(DialogならUI Core、Draggable、Resizable)も選択され、それらをガッチャンコしたファイルをダウンできる
    • 追記(2008-08-10)：Google AJAX Libraries APIも使えます。
  • CSS・画像
    • ダイアログのタイトルバーや閉じるボタン等はCSSでデザインする
    • デモで使われているテーマのCSSは、jQuery UI 1.5.2のzipに入っている
    • ThemeRoller | jQuery UIで好きなテーマを作ってダウンできる。
    • 実際に使う時はまず自分で書く事になると思う

とりあえず使ってみる

落としてきたファイルを適当に配置して、
それを読み込むHTMLを書く。
CSSはjQuery UI 1.5.2のzipに入っていたfloraというskinのものを使うことにする。
とりあえず、今回はid="some-content"のdivをDialog化することにする。

<html>
<head>
<link rel="stylesheet" href="./flora/flora.dialog.css" type="text/css">
<script type="text/javascript" src="./js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="./js/ui.core.js"></script>
<script type="text/javascript" src="./js/ui.dialog.js"></script>
</head>
<body>
<div id="some-content">
ほげほげ<br>
ふがふが<br>
ぴよぴよ
</div>
</body>
</html>

DialogのJavaScriptを読み込むとjQueryオブジェクトに
dialogというメソッドが生える。
とりあえずFirebugで以下のコードを実行してみる。

$('#some-content').dialog();


これが

こうなる。
なんか「ほげほげ…」の場所は変わったし
上に閉じるボタンっぽいのxもあって、
実際クリックすると閉じるというか消えるんだけど、
デモのDialogとは似ても似つかない。
どうしたものか？

skinを適用する

flora.dialog.cssをちょっと見てみるとこんな風になっている。

.flora .ui-dialog .ui-dialog-titlebar-close,
.flora.ui-dialog .ui-dialog-titlebar-close {
	width: 16px;

全てのCSSセレクタが以下のようになっている。

.flora なんとか,
.flora同上

なので表示されるDialog自身の要素か祖先要素(body)に
skinのclass(この場合はflora)を付けてやらないとskinが適用できないわけだ。


というわけで気を取り直して、以下を実行。

$(document.body).addClass('flora');
$('#some-content').dialog();


できた。
あるいは、Dialog自身の要素にclass名を付けるoptionを使う。

$('#some-content').dialog({dialogClass:'flora'});


できた。

締め

とりあえず今回は導入編という事でDialogを表示するところまで、
次回(未定)はoptionsの指定とメソッドの呼び出し方などの話をして、
jQueryUIが高機能なUI構築の土台になるみたいな話もしていきたい。