LINE2019.07.22この記事は約16分で読めます。スポンサーリンクWEBプログラミングに於いて、ダイアログウインドウを開きたい場面は良くある。対話型のユーザーインターフェースを作成する場合には、下図のようなダイアログウインドウを表示して、必要なら入力欄などを設けてユーザーに必要なデータを入力してもらうなどの使い方が多い。Dialogの機能だ。動的にダイアログの中身を変更する方法が分からない表示させる場所の指定方法が分からないなどのトラブルに巻き込まれ易い。ワテの場合も、最初は悪戦苦闘した。Dialogの基本的な使い方を解説したい。WEBサイト作成において、実用上必要となる基本的な機能はほぼ全て解説しているつもりである。Dialogでこんなダイアログを作成してみるボタン[Dialogを開く]をクリックするとダイアログが開く(下図)。[OK]や[Cancel]ボタンがクリックされたら、必要な処理を行ってダイアログを閉じる。そのHTMLコードを以下に示す。aquamarine;}</style></body></html>では、このHTMLファイルの説明をしよう。Dialogに必要なファイル最低限、以下の四つのファイルが必要となる。以下の三つのファイルだ。UIのCSSファイル。これを読み込み忘れると、ダイアログがポップアップで開かない。その結果、上のhtmlファイルの中にdialog定義のhtmlがそのまま表示されてしまう。初心者の人が良くやる失敗だ。ワテの場合も、原因が分からずに数時間くらい試行錯誤した苦い経験がある。二行目はjQueryの本体、三行目はjQueryUIの本体だ。この三つだけでもダイアログは表示されるのだが、まだ足りないものがある。それが以下に示す画像ファイルだ。jquery-ui.min.cssファイルがあるフォルダにimagesと言うサブフォルダを作成して、その中に入れておく必要がある。この画像ファイルは、jquery-ui.min.cssの中で以下のように読み込まれているのだ。url("images/ui-icons_777777_256x240.png")これは何をやっているかというと、ダイアログ右上の閉じるボタン[x]部分が画像なのだが、そのバツボタンの画像を読み込んでいる。この画像ファイルが無いと、ダイアログは開くのだが[x]ボタンが表示されないという不完全な結果となる。ワテの場合も、この辺りのトラブルで良く失敗した経験がある。次に必要なものは以下のhtml定義だ。ダイアログ本体の定義と、そのダイアログを開く為の何らかのボタンやaタグなどのクリック出来る要素の定義だ。div要素をダイアログ用に定義している。div以外の要素でも問題無いはずだ。ダイアログの中身の定義は上のdiv要素内にズラズラと書けば良い。WEBプログラミングの現場では複数のダイアログを使いたい場合が多いだろう。一個しか使わないなら上のようにhtmlをベタで書き込めば良い。複数のダイアログを使い分けたいなら、ダイアログを開く直前でそのダイアログの中身を動的に設定したい。それは、この後説明する。その前に、ダイアログ定義を行うjQueryコードを紹介しょう。})この二つの記述方法は全く同じだ。ワテの場合は最初は後者を使っていたが、最近では前者を良く使う。・・・の部分に必要な処理を書く。}の部分に記述されている処理を行うと言う意味だ。jQueryやJavaScriptでプログラミングをする場合には、そのページのHTMLが完全に読み込まれないまま何か処理をすると、正常動作しない場合がある。エラーメッセージが出れば良いのだが、jQueryの場合には元々設計思想がエラーをあまり出さないように出来ているので、存在しないDOM要素のイベントハンドラを割り当てても何らエラーも出ない。実行しても全く反応しないので、とても厄介だ。});の部分がダイアログの定義処理だ。幾つかのパラメータをオブジェクトの形式で与える事が出来る。width/heightと言った単なるパラメータだけでなく、ボタンクリック時に実行されるイベントハンドラ関数も記述出来る。autoOpen=falseにしているので、ページが読み込まれた時点では表示されない。[Dialogを開く]ボタンの定義ダイアログを開くボタンを作成する。'クリックで開いた時点でタイトルを変更した'}).html('<h1>ダイアログの中身を変更した</h1>').dialog('open');});クリックしたら、ダイアログのタイトルと中身のhtmlを指定してからopenしている。この手法を使えば、一つのダイアログ定義を使って複数のダイアログを表示させたい場合に応用できるだろう。$('#MyDialog_ID').dialog('open');を実行すれば良い。});の部分も、先ほど説明したブロックに入れておくほうが安全だったと思う。});今回のような簡単なページの場合には、入れても入れなくても期待通り動いているが、複雑なWEBサイトを作成する場合には、やはりDOM構築が完了した時点で各種のイベントハンドラ定義を実行するのが確実だから。ダイアログ表示位置の指定、追加のボタンさて、これでjQueryUIダイアログを開く事が出来るようになったが、多くの皆さんはこの後、幾つか疑問が湧くと思う。ダイアログを表示する場所を指定する方法は?[OK]、[Cancel]以外のボタンを使いたい場合は?と言った疑問だ。その疑問に答える為に以下のようなサンプルプログラムを紹介しよう。[Dialogを開く]ボタンをクリックすると、そのボタンの場所から相対位置を指定してダイアログを開く。そのダイアログには、自分で追加したボタンが一個あると言うサンプルだ。このサンプルの全HTMLソースコードは以下の通り。表示(show)と非表示(hide)の処理にヘンテコなアニメーション効果を入れてみた。</body></html>jQueryUIでボタン追加の方法ダイアログ本体の部分にボタンを追加したい場合には.html(‘<button>追加ボタン</button>’)などの手法で可能だ。・・・のように、好きな名前とそのイベントハンドラ関数名を追加すれば良い。言った独特の手法で行うので、取っつきにくいのだが、慣れてしまえばとっても便利。言ってもワテもほんの少ししか使いこなせていいないが。'#buttonDialogOpen_ID'のようにして表示するダイアログの位置を指定している。その意味は以下の通り。100pxの位置に配置すると言う意味だ。その実行結果は以下の通り。atの指定方法は多彩でいろんな種類があるのだが、ワテの場合、上で紹介したやり方しか知らない。まとめこの記事ではWEBプログラミングで良く使うjQUeryUIダイアログの基本を紹介した。自前で追加のボタンを与える手法とそのイベントハンドラのコール方法ダイアログを表示する場所をクリックしたボタン要素から特定の距離に置く方法などだ。それ以外にも、ダイアログをリサイズした場合のイベントを検出するresizeイベントハンドラも上記例の中にあるがコメント化している。興味ある人はコメントを解除して試してみると良いだろう。PROFESSIONAL)アスキー・メディアワークスAmazonの商品レビュー・口コミを見るAmazon楽天Yahoo!ショッピングコーディングが5倍速くなる!jQueryセレクター超入門Amazonの商品レビュー・口コミを見るAmazon楽天Yahoo!ショッピング三冊のjQuery関連本をアマゾンで見付けた。これ以外にも沢山あるが、ランキングの高いものを選んでみた。出版年数が数年前のものもあるが、数年経っても人気が高いという事は良書を言う事かもしれない。ちなみに、ワテの場合、jQuery関連の本は一冊も持っていない。理由は、ネット検索で情報を仕入れているので。前途有望な皆さんは、一冊くらいはちゃんとした教科書を読み通すほうが良いだろう。jQueryの全体像を掴んでおく事が重要だ。ワテみたいに毎回ネット検索していても、その場しのぎなので、記憶に残らないからだ。スポンサーリンクワテ推薦のプログラミングスクールで学ぶコメント募集この記事に関して何か質問とか補足など有りましたら、このページ下部にあるコメント欄からお知らせ下さい。どっちの関数を使えば良いのか良く迷う。カウント・部分文字列Indexワテの場合、WEBプログラミングの文法が中々覚えられない。