初心者向け講座早見表
「Webサイトでユーザー向けにダイアログを表示したい。」という要件はとても多いと思いますが、最近ではJavaScriptの標準ダイアログでは、機能が少なすぎるという場合が多いのではないでしょうか。そこで、見た目をリッチなデザインで、タイトルも付けたいなどの要件を満たすための簡単な方法として、「jQuery」と「jQuery UI」を利用したダイアログ表示についてご紹介しましょう。
今回ご紹介するダイアログボックスはこちらにサンプルソースコードをアップロードしてありますので、本コラムと合わせてご確認ください。
◆準備
もし、読んでいない方は前回のコラムにてご紹介しました、jQueryを使う準備をまずはご一読いただき、以下の準備をしてください。
1. jQueryライブラリを読み込む
CDNを使ってjQueryを読み込むサンプルについて記載しています。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
2.jQuery UIライブラリを読み込む
jQuery UIライブラリはスタイルシートもセットで読み込む必要があります。そのため、以下の2行をCDNを使って読み込みます。
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/start/jquery-ui.css" rel="stylesheet"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
◆ダイアログボックスの表示
今回のサンプルでは、警告ダイアログと確認ダイアログについて通常のJavaScriptを使って表示する場合との動きの違いを比較表示しています。
▼表示する場所の指定
忘れてしまいがちなのが、表示する場所の設定です。表示する場所とは言っても、ここではブラウザ上のどの場所に表示するという意味ではなく、div要素を使ってダイアログを表示する画面上の受け入れ先の準備という意味になります。ここで指定している「id属性」に対して、ダイアログを表示する制御を行います。
以下が表示する場所の指定用サンプルソースコードになります。
<div id="show_dialog"></div>
▼jQueryを使った警告ダイアログ
ダイアログを表示するときに、オプションとしてモーダルダイアログ（ブラウザ上の他のリンクなどをクリックできないようにし、表示されているダイアログのみを動かせる）設定やタイトルの指定、表示するボタンについて設定しています。この他にもデザインを変更したり、ダイアログ表示にアニメーションを適用する設定も可能です。
以下が警告ダイアログのサンプルソースコードになります。
function ShowJQueryAlertDialog() {
var strTitle = "警告ダイアログ";
var strComment = "ダイアログのメッセージ\nダイアログを閉じるためにはOKをクリックするか、右上の×ボタンをクリックしてください。";
// ダイアログのメッセージを設定
$( "#show_dialog" ).html( strComment );
// ダイアログを作成
$( "#show_dialog" ).dialog({
modal: true,
title: strTitle,
buttons: {
"OK": function() {
$( this ).dialog( "close" );
}
}
});
}
▼jQueryを使った確認ダイアログ
確認ダイアログの場合は、ボタンを複数設定し、クリックされたときの動きを記載しておきます。今回のサンプルではシンプルにOKとキャンセルの各ボタンが押されたメッセージを表示するだけに留めていますが、要件によっていろいろと応用可能になります。
以下が確認ダイアログのサンプルソースコードになります。
function ShowJQueryConfirmDialog() {
var strTitle = "確認ダイアログ";
var strComment = "これは確認ダイアログです。";
// ダイアログのメッセージを設定
$( "#show_dialog" ).html( strComment );
// ダイアログを作成
$( "#show_dialog" ).dialog({
modal: true,
title: strTitle,
buttons: {
"OK": function() {
$( this ).dialog( "close" );
ShowJQueryMessageDialog( "OKがクリックされました" );
},
"キャンセル": function() {
$( this ).dialog( "close" );
ShowJQueryMessageDialog( "キャンセルがクリックされました" );
}
}
});
}
今回はjQueryとjQuery UIを使ってダイアログボックスを表示するサンプルについてご紹介しました。次回は、今回の続きとして文字入力ダイアログについてご紹介したいと思います。
本コラムが、読者の皆さんの日々の業務に役立てば幸いです。
（担当：小口 真己）
