jQuery UI逆引きリファレンス
Dialogウィジェットでダイアログ・ボックスを生成するには？
Dialogウィジェットで、テキストやボタン、フォーム要素などを配置できるダイアログ・ボックスを作成する方法を紹介。
jQuery UIとは？
jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザー・インターフェイス（UI）に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス： jQuery UIを利用するには？」を参照してください。
Dialogウィジェットを利用することで、汎用的なダイアログ・ボックス（以下、「ダイアログ」と略記）を作成できます。ダイアログ上には、テキストだけでなく、ボタンやフォーム要素を配置できますので、ユーザーに対して何らかの選択や入力を求める局面でも利用できます。
それではさっそく、具体的なコード例と、その実行結果を確認してみます。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Dialogウィジェット</title>
<link type="text/css" rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
// 2ダイアログ機能を適用
$('#dialog').dialog({
modal: true
});
});
</script>
</head>
<body>
<!--1ダイアログを準備-->
<div id="dialog" title="Backbone.js">
<p>Backbone.jsはクライアントサイドMVCフレームワークの定番ライブラリの1つです。プレゼンテーションをView（ビュー）に、ビジネスロジック（ドメイン）をModel（モデル）に定義するスタイルで処理を記述します。</p>
<p>このことにより、コードの保守性、再利用性、テスト可能性などを向上させることができます。</p>
</div>
</body>
</html>
|
ダイアログを作成するにはまず、1のようにダイアログの本体を<div>要素として準備します。最低限、title属性でダイアログに表示すべきタイトルを指定するほかは、特別なルールはありません。配下には、画像、フォーム要素を含む自由なコンテンツを配置できます。
マークアップの準備ができたら、あとは2のようにdialogメソッドを呼び出すことで、ダイアログに整形できます。modalパラメーターは、ダイアログをモーダル・ダイアログとして表示するかを決めるパラメーターです。「モーダル・ダイアログ」とは、閉じるまで、ページのそのほかの要素を操作できなくなるダイアログのこと（逆に、ダイアログを開いていてもページのほかの操作をできるダイアログのことを「モードレス・ダイアログ」といいます）。modalパラメーターを「false」（デフォルト）にした場合、dialogメソッドはモードレス・ダイアログを作成します。
dialogメソッドのパラメーター
modalパラメーターのほかにも、dialogメソッドにはさまざまなパラメーターが用意されています。以下に、主なものをまとめます（カッコの中はそれぞれのデフォルト値を表します）。
（1）show／hideパラメーター（－）
ダイアログを開閉する際に利用するエフェクトを指定します。設定値は、以下のいずれかの型で指定できます。
| 型 | 概要 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Number | エフェクトの所要時間（ミリ秒） | ||||||||||
| String | エフェクト名（後日、別稿にて解説） | ||||||||||
| Object | エフェクトの個別パラメーター
|
変化の度合いで指定できる値については、Easingsに、変化をグラフ化したものも併せて掲載されていますので、参考にするとよいでしょう。
以下は、show／hideパラメーターをそれぞれNumber型、Object型で指定した例です。
|
$('#dialog').dialog({
modal: true,
show: 500,
hide: {
effect: 'explode',
delay: 300,
duration: 3000,
easing: 'easeOutElastic'
}
});
|
（2）resizableパラメーター（true）
ダイアログをリサイズできるかどうかを表します。リサイズを有効にした場合、minHeight／minWidthパラメーターで最小のダイアログ・サイズを、maxHeight／maxWidthパラメーターで最大のダイアログ・サイズを、それぞれ指定できます。また、初期サイズを指定するならば、height／widthパラメーターを利用してください。height／widthパラメーターでは、具体的な数値のほかに、「auto」（＝コンテンツに応じて自動判定）を指定することもできます。
|
$('#dialog').dialog({
modal: true,
resizable: true,
maxHeight: 500,
maxWidth : 500,
minHeight: 150,
minWidth : 150,
height: 'auto',
width : 300
});
|
（3）positionパラメーター（{ my: "center", at: "center", of: window }）
ダイアログの表示位置を表します。positionパラメーターは、以下のようなキーを持つハッシュとして指定できます。
| キー名 | 概要 |
|---|---|
| my | 自分自身の位置 |
| of | 位置の基点となる要素 |
| at | 基点要素の位置 |
ダイアログの表示位置を、基点となる要素（of）の位置（at）と、ダイアログの位置（my）とが接するように決めるわけです。例えば、以下はボタン（#btn）の下辺中央とダイアログの左上が接するように、ダイアログを位置取りした例です。
|
$('#dialog').dialog({
modal: false,
position: {
of : '#btn',
at: 'center bottom',
my: 'left top'
}
});
|
at／myキーには「水平位置 垂直位置」の形式で、left、right、top、bottom、centerの組み合わせで指定します。水平位置、垂直位置のいずれかが省略された場合には、centerと解釈されます。
ちなみに、デフォルト値「{ my: "center", at: "center", of: window }」であればwindow（ウィンドウ）の中央にダイアログの中央が来るように位置取りされます。
※以下では、本稿の前後を合わせて5回分（第9回～第13回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
9. Accordionウィジェットでアコーディオン・パネルを生成するには？
タイトル部分をクリックすることでコンテンツが開閉するアコーディオン・パネルを実装できる「Accordionウィジェット」の基本的な使い方を説明する。
11. 【現在、表示中】≫ Dialogウィジェットでダイアログ・ボックスを生成するには？
Dialogウィジェットで、テキストやボタン、フォーム要素などを配置できるダイアログ・ボックスを作成する方法を紹介。
