jQuery UI逆引きリファレンス
JavaScriptからダイアログ・ボックスを動的に操作するには？
Dialogウィジェットのパラメーターやメソッドを利用して、Webページ上でダイアログを動的に制御する方法について紹介。
jQuery UIとは？
jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザー・インターフェイス（UI）に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス： jQuery UIを利用するには？」を参照してください。
別稿「jQuery UI逆引きリファレンス： Dialogウィジェットでダイアログ・ボックスを生成するには？」では、Dialogウィジェットにより基本的なダイアログ・ボックス（以下、「ダイアログ」と略記）を作成する方法について紹介しました。本稿では、引き続きDialogウィジェットのパラメーターやメソッドを利用しながら、JavaScriptコードから動的にダイアログを制御する方法について紹介していきます。
イベント経由でダイアログを開く
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() {
var d = $('#dialog');
// 1ダイアログを初期化（自動オープンしない）
d.dialog({
modal: false,
autoOpen: false
});
// ボタン・クリック時にダイアログを開く
$('#btn').click(function(e){
d.dialog('open');
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="表示" />
<div id="dialog" title="Backbone.js">
<p>Backbone.jsはクライアントサイドMVCフレームワークの定番ライブラリの1つです。プレゼンテーションをView（ビュー）に、ビジネスロジック（ドメイン）をModel（モデル）に定義するスタイルで処理を記述します。</p>
<p>このことにより、コードの保守性、再利用性、テスト可能性などを向上させることができます。</p>
</div>
</body>
</html>
|
clickイベントをトリガーにダイアログを起動する場合、まずダイアログの自動オープン機能を無効にしておく必要があります。これには、dialogメソッドを呼び出す際に、autoOpenパラメーターを「false」としておきます（1）。これによって、ダイアログを取りあえず準備だけしておくことができます（＝表示はしない）。
準備済みのダイアログをあらためて開いているのは、2のコードです。jQuery UIでは、ウィジェット（メソッド＊1）に対して、あらかじめ決められたキーワードを渡すことで、所定の処理を実行できます。この例であればopenキーワードを渡すことで、ダイアログを開きます。
- ＊1動作を指定するキーワードのことを、jQuery UIでは「メソッド」と呼んでいます。いわゆる通常のメソッドとは違いますので、注意してください。
ダイアログにボタンを配置する
buttonsパラメーターを利用することで、ダイアログにボタンを配置し、任意の役割を割り当てることができます。例えば以下は、ダイアログに対して［詳細］［閉じる］ボタンを追加する例です。
|
$('#dialog').dialog({
modal: true,
buttons: {
'詳細' : function() {
location.href = 'http://backbonejs.org/';
},
'閉じる' : function() {
$(this).dialog('close');
}
}
});
|
buttonsパラメーターは、「ボタン・キャプション: function() { クリック時の処理 }」のハッシュ形式で指定します。ここでは、［詳細］ボタンでページを移動し、［閉じる］ボタンでダイアログをクローズするようにしています。ダイアログを閉じるには、dialogメソッドにcloseキーワードを渡します。
ダイアログの内容をAjax経由で取得する
$.getメソッドを併用することで、ダイアログの内容を別ファイルに分離して、Ajax経由で動的に取得することもできます。これには、以下のようなコードを用意します。
|
<!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() {
// ボタン・クリック時の処理
$('.dbtn').click(function() {
var b = $(this);
// 2Ajax経由でダイアログの内容を取得
$.get('./doc/' + b.data('path') + '.html')
.done(function(data) {
$('<div title="' + b.val() + '">' + data + '</div>').dialog();
});
});
});
</script>
</head>
<body>
<!--1ダイアログ起動のためのボタン-->
<input class="dbtn" data-path="backbone" type="button" value="Backbone.js" />
<input class="dbtn" data-path="knockout" type="button" value="Knockout.js" />
<input class="dbtn" data-path="angular" type="button" value="AngularJS" />
</body>
</html>
|
|
<p>Backbone.jsはクライアントサイドMVCフレームワークの定番ライブラリの1つです。プレゼンテーションをView（ビュー）に、ビジネスロジック（ドメイン）をModel（モデル）に定義するスタイルで処理を記述します。</p>
<p>このことにより、コードの保守性、再利用性、テスト可能性などを向上させることができます。</p>
|
※knockout.html／angular.htmlファイルも同じ要領で記述できるので、紙面上は割愛します。
まずは、ダイアログを開くトリガーとなるボタンを用意します（1）。この際、data-path属性に読み込み先のファイル・パス（拡張子を除いたベース名のみ）を、value属性にはダイアログのタイトルとなる値を、それぞれ指定しておきます。data-xxxxx属性は「独自データ属性」とも呼ばれ、スクリプトの動作に必要なパラメーターをマークアップ側で用意する際によく使われます。xxxxxの部分には、小文字のアルファベット、ハイフン（-）、アンダースコア（_）の文字からなる自由な名前を付けられます。
外部ファイルを読み込み、ダイアログを動的に生成しているのは2です。data-path属性にはdataメソッドでアクセスできますので、ここでは「./doc/backbone.html」のようなパスを生成します。ファイルを読み込めたら、あとは「<div title="Backbone.js"><p>Backbone.jsは～</div>」のようなタグを生成し、dialogメソッドを呼び出します。
※以下では、本稿の前後を合わせて5回分（第10回～第14回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
12. 【現在、表示中】≫ JavaScriptからダイアログ・ボックスを動的に操作するには？
Dialogウィジェットのパラメーターやメソッドを利用して、Webページ上でダイアログを動的に制御する方法について紹介。
