jQuery UI を用いてオリジナルのダイアログを簡単に実装する方法

2017/02/15 ,

Javascript でダイアログを表示する場合、alert 関数や confirm 関数を利用しますが、OK または キャンセルしか選択肢が無く、またダイアログの内容は文字列しか出力することができません。もしダイアログのボタンを 3つに増やせたら、もしダイアログ内にラジオボタンやチェックボックスが設置できたら、どんなに便利だろうと思ったことはありませんか?

今回紹介する jQuery UI の Dialog プラグインを利用すれば、標準ダイアログでは実現できなかった拡張性の高い、かゆいところに手が届くような実装を行うことができるようになります。

Dialog を利用するには、jQuery UI のライブラリを読み込めば OK です。読み込む必要があるファイルは、以下の 3つです。

jQuery UI 利用時に必要なライブラリ

  • jQuery の Javascript ファイル
  • jQuery UI の Javascript ファイル
  • jQuery UI のスタイルシートファイル

また、CDN からライブラリファイルを取得して利用することもできます。

jQuery UI ファイルの読込みを Google の Libraries サイト (CDN) から参照する方法
※ 2015/9/2 記事内のjQuery UI のバージョンを 1.10.3 から 1.11.4 へ変更しました。jQuery UI を利用するには、jQu...

jQuery UI でオリジナルのダイアログを実装

サンプルプログラムでは、ボタンをクリックした契機にダイアログを表示する例を挙げます。まずは、HTML から。ポイントはダイアログの内容を直接 HTML で記述する点です。

このままでは、Div の要素がそのまま出力されてしまいますが、HTML としてはこれで良いです。逆に display: none のスタイルを設定すると正しく動かなくなるので気を付けてください。

title 属性に設定した文言がダイアログのタイトルになります。またタグの中身が、ダイアログの内容としてそのまま出力されます。続いて Javascript です。ボタンのクリックイベントでダイアログを呼び出します。

いきなり $(“#hogehoge”).dialog(); と記述すると、画面表示と共にダイアログが表示されます。今回の例では、ボタンのクリックイベントで表示させるので、自動表示を制御する「autoOpen」のオプションを false にして、予めダイアログが表示されないようにしています。

それでは実際にサンプルプログラムの動作を確認してみましょう。

オリジナルダイアログを表示するサンプル

下記ボタンをクリックすることで、ダイアログが表示されます。ダイアログの右肩にある [×] ボタンで、ダイアログを閉じることができます。

オリジナルダイアログをポップアップ表示するサンプル。

ダイアログにボタンを付ける

前述の通り、ダイアログの内容は HTML へ直接記述しているので、ダイアログ上にチェックボックスやラジオボタン等のフォームオブジェクトを配置することも可能です。しかし、ボタン要素に関してはオプション「buttons」を利用して定義します。具体的にはボタンの名称と共に、ボタンクリック時のアクションも定義します。

では HTML から見てみましょう。せっかくなので、ダイアログにフォームオブジェクトも配置してみます。

続いて Javascript です。サンプルではボタンを 3つ並べます。ボタン名は分かりやすいように「ボタン1」~「ボタン3」としておきます。

「ボタン1」と「ボタン2」をクリックした場合は、単にアラートを表示します。サンプルなので一番簡単な処理にしましたが、ここから更に function を呼ぶような仕組みにしても良いでしょう。ダイアログ内のフォーム値を含め Submit させることもできます。「ボタン3」をクリックした場合は、ダイアログを閉じるようにします。つまり、キャンセルボタンの動きと同じです。

またボタンを 3つ並べると横幅が足りなくなってしまうので「width」オプションを利用してサイズを横幅を指定します。ついでに「modal」オプションも追加し、モーダルダイアログとしています。ここで登場したオプションをまとめると以下の通りです。

オプション内容
autoOpen初期表示時に自動的にダイアログを開くか設定します。
初期値: true
widthダイアログの横幅を指定します。単位はピクセルです。
初期値: 300
modalモーダルダイアログにしたい場合 true を設定します。
初期値: false
buttons{ text: (ボタン名), click: (処理) } の形式で記載します。click 以外のイベントも定義することが可能です。

それでは実際に動作を確認してみましょう。

ボタン付きダイアログのサンプル

オリジナルダイアログをポップアップ表示するサンプル。



ダイアログ内のフォーム値とは連動していません。あくまで表示サンプルに留めた程度です。無理矢理ダイアログ内の HTML にボタンを配置してイベントを仕掛けることも可能ですが、大規模開発の場合は標準の機能を利用するようにルールを決めておかないと、ソースコードの足並みが揃わないリスクを伴うため、力ずくでボタン配置するようなことは極力避けた方が良いでしょう。

以上、jQuery UI の Dialog プラグインを利用して、オリジナルのダイアログボックスを実装する方法でした。

関連記事

記事はありませんでした

PAGE TOP ↑