jQuery を使って動的で高品質なウェブサイトを構築する方法を解説しています。なるべく動くサンプルコードを記載しています。
jQuery 入門jQuery 入門
jQuery の使い方
jQuery の基礎
jQuery モバイル
jQuery UI
サンプルのテーマ変更

jQuery の拡張
関連サイト
サイト情報
ホーム > jQuery UI の利用 > jQuery UI - ダイアログ

jQuery UI - ダイアログ

ダイアログボックスでは、ユーザーにメッセージを表示する、入力を促す、などします。

簡単な一行程度の入力を促すのなら、 prompt でもいいでしょうが、複数のデータの入力を促すのに複数回の prompt をするのでは、 ユーザーに対してちょっと古くさいプログラムであるという印象を与えかねません。

jQuery によるダイアログの表示

次のボタンをクリックすると、ダイアログボックスを表示します。

OK ボタンをクリックした時に、そのクリックイベントを処理してダイアログを閉じています。

このダイアログボックスの作成手順を説明します。

まずはダイアログの中身を div として作成します。

<div id="dialogdemo1">
<p>Hello, jQuery UI Dialog!</p>
</div>

次にこの要素を dialog メソッドでダイアログにしますが、このときにオプションをいくつか渡しています。

$('#dialogdemo1').dialog({
  autoOpen: false,
  title: 'jQuery Dialog Demo',
  closeOnEscape: false,
  modal: true,
  buttons: {
    "OK": function(){
      $(this).dialog('close');
    }
  }
});

オプションの意味

autoOpen オプションを true にすると、ダイアログをデフォルトでオープンします。ここではボタンをクリックしたタイミングでオープン(表示)するつもりなので、 falseにしています。

title ではダイアログのタイトルを設定します。

closeOnEscape はダイアログボックスが表示されている時の Esc (エスケープキー) を押された時に、ダイアログを閉じるかどうか指定します。 false にすると Esc キーでダイアログを閉じません。

modal はダイアログがモーダル表示かどうかの指定です。すなわち、ダイアログが表示されている時に、その背面が利用可能かどうか指定することになります。

buttons にはダイアログに表示するボタンとそのボタンのクリック時に呼び出される関数オブジェクトを指定します。ここでは dialog を単に閉じています。

ダイアログを開く

$('#button1').click(function(){
  $('#dialogdemo1').dialog('open');
});

最後に、ボタンをクリックしたときにボタンを開くという点については、 dialog('open') を呼び出すのみです。

Hello, jQuery UI Dialog!

ホーム > jQuery UI の利用 > jQuery UI - ダイアログ
小山圭介 著者
小山 圭介
4/15/1973生
米国在住のソフトウェアエンジニア。ITコンサルタント.. »プロフィール

© 2011-2017 Keisuke Oyama jQuery 入門