Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery UI逆引きリファレンス

jQuery UI逆引きリファレンス

Dialogウィジェットでダイアログ・ボックスを生成するには?

2013年9月26日

Dialogウィジェットで、テキストやボタン、フォーム要素などを配置できるダイアログ・ボックスを作成する方法を紹介。

  • このエントリーをはてなブックマークに追加

jQuery UIとは?

  jQuery UIは、jQueryを拡張するライブラリ(プラグイン)の一種で、名前のとおり、ユーザー・インターフェイス(UI)に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス: jQuery UIを利用するには?」を参照してください。

 Dialogウィジェットを利用することで、汎用的なダイアログ・ボックス(以下、「ダイアログ」と略記)を作成できます。ダイアログ上には、テキストだけでなく、ボタンやフォーム要素を配置できますので、ユーザーに対して何らかの選択や入力を求める局面でも利用できます。

 それではさっそく、具体的なコード例と、その実行結果を確認してみます。

HTML
<!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>
Dialogウィジェットを利用したダイアログの例(dialog.html)
ダイアログを表示
ダイアログを表示

 ダイアログを作成するにはまず、1のようにダイアログの本体を<div>要素として準備します。最低限、title属性でダイアログに表示すべきタイトルを指定するほかは、特別なルールはありません。配下には、画像、フォーム要素を含む自由なコンテンツを配置できます。

 マークアップの準備ができたら、あとは2のようにdialogメソッドを呼び出すことで、ダイアログに整形できます。modalパラメーターは、ダイアログをモーダル・ダイアログとして表示するかを決めるパラメーターです。「モーダル・ダイアログ」とは、閉じるまで、ページのそのほかの要素を操作できなくなるダイアログのこと(逆に、ダイアログを開いていてもページのほかの操作をできるダイアログのことを「モードレス・ダイアログ」といいます)。modalパラメーターを「false」(デフォルト)にした場合、dialogメソッドはモードレス・ダイアログを作成します。

モードレス・ダイアログでは、背景がグレーアウトしない
モードレス・ダイアログでは、背景がグレーアウトしない

dialogメソッドのパラメーター

 modalパラメーターのほかにも、dialogメソッドにはさまざまなパラメーターが用意されています。以下に、主なものをまとめます(カッコの中はそれぞれのデフォルト値を表します)。

(1)show/hideパラメーター(-)

 ダイアログを開閉する際に利用するエフェクトを指定します。設定値は、以下のいずれかの型で指定できます。

概要
Number エフェクトの所要時間(ミリ秒)
String エフェクト名(後日、別稿にて解説)
Object エフェクトの個別パラメーター
プロパティ名概要
effect エフェクト名
delay 遅延時間(ミリ秒)
duration エフェクトの所要時間(ミリ秒)
easing 変化の度合い
show/hideパラメーターのデータ型

 変化の度合いで指定できる値については、Easingsに、変化をグラフ化したものも併せて掲載されていますので、参考にするとよいでしょう。

 以下は、show/hideパラメーターをそれぞれNumber型、Object型で指定した例です。

JavaScript
$('#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」(=コンテンツに応じて自動判定)を指定することもできます。

JavaScript
$('#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 基点要素の位置
positionパラメーターで利用できるキー

 ダイアログの表示位置を、基点となる要素(of)の位置(at)と、ダイアログの位置(my)とが接するように決めるわけです。例えば、以下はボタン(#btn)の下辺中央とダイアログの左上が接するように、ダイアログを位置取りした例です。

JavaScript
$('#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]を参照してください。

jQuery UI逆引きリファレンス
9. Accordionウィジェットでアコーディオン・パネルを生成するには?

タイトル部分をクリックすることでコンテンツが開閉するアコーディオン・パネルを実装できる「Accordionウィジェット」の基本的な使い方を説明する。

jQuery UI逆引きリファレンス
10. アコーディオン・パネルの内容を外部ファイル化するには?

Accordionウィジェットのイベントやメソッドを利用しながら、アコーディオン・パネルの内容を外部ファイル化する方法を紹介。

jQuery UI逆引きリファレンス
11. 【現在、表示中】≫ Dialogウィジェットでダイアログ・ボックスを生成するには?

Dialogウィジェットで、テキストやボタン、フォーム要素などを配置できるダイアログ・ボックスを作成する方法を紹介。

jQuery UI逆引きリファレンス
12. JavaScriptからダイアログ・ボックスを動的に操作するには?

Dialogウィジェットのパラメーターやメソッドを利用して、Webページ上でダイアログを動的に制御する方法について紹介。

jQuery UI逆引きリファレンス
13. Spinnerウィジェットで数値入力ボックスを生成するには?

数値入力ボックスを実装するためのSpinnerウィジェットの基本的な使い方について紹介。

サイトからのお知らせ

Twitterでつぶやこう!