• twitter
  • Facebook
  • はてなブックマーク
2012年07月26日(木)

[jQueryUI入門] ダイアログの使い方

jQueryUIのダイアログ機能を使ってインフォメーションや、エラーなどのアラートを表示するための方法について解説しています。ダイアログを初期化すると、divなどのtitle属性に指定した文字列を自動で見出しにフォーマットして、閉じるボタンを配置してから画面上にオーバーレイ表示します。実装だけならとても簡単です。

jQueryUIでダイアログ作成(マークアップの基本)

ダイアログをモード付き(ダイアログのみ操作可能な状態)で開いたり、イベントを管理する際はjavascriptでオプションを指定して初期化を行います。基本的なHTMLでのマークアップは次のようなかんじです。タイトルに指定した文字列に閉じるボタンが設置された「見出し付きダイアログ」を作成できます。
  1. <div id="mydialog" title="ダイアログの見出し">
  2. <p>ダイアログ内に表示する文字列など</p>
  3. </div>
  4. <script>
  5. $('#mydialog').dialog({ /* ダイアログのオプション */ });
  6. </script>

ボタンをクリックしてダイアログを開く場合

ボタンをクリックした時にダイアログを開く場合は、ボタンのクリックイベント内でダイアログに対してopenメソッドを呼び出します。また、ダイアログの初期化オプションでautoOpenfalseに指定しておきます。
  1. <script>
  2. $('#dialog_open_button').click(function(){
  3. $('#mydialog').dialog('open');
  4. }
  5. </script>

javascriptを設定

ロードするファイルは「jquery1.7以上」「jquery.ui.core」「jquery.ui.widget」「jquery.ui.position」「jquery.ui.dialog」の5つです。ダイアログサイズを可変にする場合は「jquery.ui.mouse」と「jquery.ui.resizable」も追加でロードします。ダイアログをドラッグに対応する場合は、「jquery.ui.mouse」と「jquery.ui.draggable」も追加でロードします。

初期化用の主なパラメータ
オプションの名前概要
autoOpenfalseを指定すると、初期化後にダイアログを非表示にしておく。
buttonsダイアログに配置するボタンを作成。オブジェクト形式で、"button":{ "ボタンのキャプション":function(){ /*クリック時の動作*/ } }を複数指定可能
closeOnEscapeキーボードのEscキーでダイアログを閉じるかどうか。デフォルトはtrue
closeTextタイトルバーの閉じるボタンの横に表示される文字列。デフォルトは'close'
dialogClassダイアログに指定したセレクタに対して、追加で設定するCSSクラス名。文字列で指定。
draggableダイアログをドラッグ可能にするかどうか。デフォルトはtrue。指定する場合、draggable用のjavascriptファイルも必要。
heightダイアログの高さ。デフォルトは'auto'
hideダイアログを閉じる際に使うjQueryUIEffectの種類('slide'や'fade'など)。指定しなければアニメーションなし。また、指定した場合はjQueryUIEffect関連のファイルもロード必須。
maxHeightダイアログの最大高さ。指定したサイズよりも、ダイアログ内のコンテンツがオーバーすると縦スクロールバーが表示される。デフォルトは無効(false)
maxWidthダイアログの最大幅。指定したサイズよりも、ダイアログ内のコンテンツがオーバーすると横スクロールバーが表示される。デフォルトは無効(false)
minHeightダイアログの最小高さ。デフォルトは150。
minWidthダイアログの最小幅。デフォルトは150。
modalダイアログをモード付き(ダイアログのみの操作可能な状態)で表示するかどうか。デフォルトはfalse。trueにするとダイアログを表示した際、半透明の背景でブラウザ全体が塗りつぶされます。
positionダイアログを表示する位置。デフォルトは'center'。数値配列で[x, y]を指定したり、文字列配列で['top','left']を指定したりが可能。文字列の場合('center' 'left' 'right' 'top' 'bottom')のいずれか。
resizableダイアログのサイズを変更可能かどうか。デフォルトはtrue。利用する場合は、resizable用のjavascriptファイルも必要。この機能を使用しない場合は、falseを指定しておく方が無難です。trueのままだと、ダイアログの下部にui-resizable-handleが指定されたアイコン画像が表示されるようになります。
showダイアログを開く際に使うjQueryUIEffectの種類('slide'や'fade'など)。指定しなければアニメーションなし。また、指定した場合はjQueryUIEffect関連のファイルもロード必須。
stack複数ダイアログが開かれた状態でフォーカスを得たダイアログが最上位に表示されるかどうか。modal表示の場合は無効。デフォルトはtrue
titleダイアログの見出しに使われる文字列。title属性値に指定した文字列よりもこちらが優先。
widthダイアログの固定幅。デフォルトは300
zIndexダイアログに指定されるzIndexの値。デフォルトは1000

サンプル

ダイアログ1の内容。モーダル状態のため、画面上の他のリンクやボタンは操作できません。

フォームをダイアログのコンテンツに記述しても、通常通りページ内にフォームを作成した時と同じように使用できます。




フォームダイアログと同時に表示した場合、重なって表示されます。下に配置されたダイアログを選択すると表示位置が入れ替わります。

関連投稿記事

Comment: