jQueryでダイアログを実装する方法【jQueryUIのdialogの使い方】

jQueryUIとは、フォームの入力などユーザーの操作面における機能をパッケージ化したjQueryのライブラリです。 Javascriptを簡単に扱えるようにしたjQueryを使って、更にパーツやエフェクトに特化して誰でも手軽に利用しやすいようにしてくれたものがjQueryUIです。今回説明するダイアログ機能は、通常であれば複雑なコードを記述してプログラミングしなければ実装できませんが、jQuery UIを用いることで短いコードで簡単に扱えるようになります。

jQuery UIをCDNで読み込む

jQueryUIはjQueryとは別で新たに読み込む必要があります。ダウンロードしたものを使う方法もありますが、ここでは CDN を使ってサイトに読みこむ方法を説明します。下記のコードをコピーして貼りつければOKです。なお、jQuery UIは本体であるJavascriptファイルとスタイルシートの2つをセットで読み込みます。また、jQuery UIを動作させるためにはあらかじめjQeuryを読み込ませておく必要があるため、 jQueryの読み込みのコードよりも後に記述します。

jQuery UIについて詳しくはこちら jQuery UIの使い方

jQuery UIとは、jQueryを用いて作られた便利な機能を簡単にサイトに実装することができるライブラリです。具体的には、カレンダーやタブなどの装飾やオートコンプリートなどの機能、フェードインなどのアニメーションが簡単な記述だけで使用することが可能です. 【もっと読む】

jQueryUIのdialogの使い方

ここからは実際にjQueryUIのダイアログを導入する手順を説明していきます。まずは、ダイアログとして表示させる要素をHTMLで作成します。ダイアログの中身をここに記載します。この要素はダイアログとして表示させたいので、最初は display:noneを指定して非表示にしておきます。 .sample_dg 続いてダイアログを開くきっかけとなるボタンをHTMLで用意します。ボタンのデザインはCSSで自由に作成してください。

HTML側の準備ができたので、jQueryでボタンがクリックされたらダイアログが開くようにプログラミングします。 jQueryのダイアログは下記のように記述して有効化します。クリックされたら開くようにしたいので、onメソッドを使ってクリックイベントを作ります。

$(function()< $(".btn_open").on("click",function()< $(".sample_dg").dialog(< title:"サンプル", >); >); >); 以上がjQuery UIのdialogの基本的な使い方です。ここまでをまとめると次のようになります。開くダイアログの中身をここに記載します。 .sample_dg $(function()< $(".btn_open").on("click",function()< $(".sample_dg").dialog(< title:"サンプル", >); >); >); dialogのオプションを設定する

先程の状態ではダイアログ表示ができただけですので、jQueryUIに用意されているオプションを設定していきカスタマイズします。既に設定している「title」もオプションのひとつで、その他にもjQuery UIのdialogには次のようなオプションが設けられています。

titleダイアログのタイトルを設定できます。 autoOpentrueを指定するとはじめからダイアログが開いた状態になります。初期値はfalseです。 buttonsダイアログにボタンを設置することができます。 closeText閉じるボタンのテキストを設定できます。なおjQuery UIのテーマを使用している場合は「×」マークが表示されるようになっているのでここで設定したテキストが表示されることはありません。 draggablefalseを指定するとダイアログをドラッグで移動できなくなります。初期値はtrueです。 showダイアログを開くときのアニメーションを選択できます。 hideダイアログを閉じるときのアニメーションを選択できます。 modaltrueを指定するとダイアログが開いている間はページ上の他の操作ができないようになります。初期値はfalseです。 resizablefalseを指定するとユーザーがダイアログのサイズを変更できなくなります。初期値はtrueです。 heightダイアログの高さをpxで指定します。 widthダイアログの幅をpxで指定します。 maxHeightダイアログの高さの上限をpxで指定します。 maxWidthダイアログの幅の上限をpxで指定します。 minHeightダイアログの最小の高さをpxで指定します。 minWidthダイアログの最小の幅をpxで指定します。 positionダイアログの表示位置を指定します。オプションは下記のように「,」（カンマ）で区切って必要なオプションをdialogへ追記していきます。 autoOpenの使い方 autoOpenを設定すると元の要素に対してdisplay:noneを使って非表示にする必要は無くなりますが、jQuery側での記述に少し修正が必要になります。 $(function()< $(".sample_dg").dialog(< title:"サンプル", autoOpen:false,//trueにするとはじめから表示 >); $(".btn_open").on("click",function()< $(".sample_dg").dialog("open"); >); >); buttonsの使い方

buttonsを使うとダイアログ内へ新しいボタンの追加し、押した際の処理を設定することができます。閉じるなどダイアログに関する処理の他、アラートメッセージを出すなどjQueryによる他の処理を実行させることも可能です。

$(function()< $(".btn_open").on("click",function()< $(".sample_dg").dialog(< title:"サンプル", buttons:< "キャンセル":function()< $(this).dialog("close"); >, "実行":function()< alert("実行ボタンが押されました。"); >, >, >); >); >); showとhideの使い方

showとhideを使うとダイアログが開閉するときのアニメーションを変更することができます。設定できるアニメーションのパターンは、「blind」「bounce」「clip」「drop」「explode」「fade」「fold」「highlight」「puff」「pulsate」「scale」「shake」「size」「slide」の中から選びます。各アニメーションの動きについてはjQuery UIの公式サイトでご確認ください。 https://jqueryui.com/show/

$(function()< $(".btn_open").on("click",function()< $(".sample_dg").dialog(< show:"fold", hide:"slide", >); >); >); modalの使い方

modalを有効にするとダイアログが開いている間は、ダイアログとページの間にフィルターが掛かり、スクロールやクリックといった他の操作ができなくなります。ユーザーに対してダイアログ内の操作を優先させたい場合などに設定します。下の例を見てもらうとわかるように、ダイアログが開いているとボタンを押すことができなくなります。

$(function()< $("#btn1").on("click",function()< $("#dialog1").dialog(< title:"ダイアログ1", modal:true, >); >); $("#btn2").on("click",function()< $("#dialog2").dialog(< title:"ダイアログ2", modal:true, >); >); >); dialogのデザインを変更する

jQuery UIは読み込むテーマを変えることで、簡単にデザインを変更することができます。なお、テーマを変更するとdialogだけでなくjQuery UIの他の機能のデザインも全て変更になりますのでご注意下さい。下記のCSSファイルを読み込んでいるコードの中の「 smoothness 」が今回使用しているテーマを示しています。

この部分を変更したいテーマ名に書き換えれば、読み込むテーマが変更されデザインが切り替わります。テーマは「base」「ui-lightness」「ui-darkness」「smoothness」「start」「redmond」「sunny」「overcast」「re-frog」「flick」「pepper-grinder」「eggplant」「dart-hive」「cupertino」「south-street」「blitzer」「humanity」「hot-sneaks」「excite-bike」「vader」「dot-luv」「mint-choc」「black-tie」「trontastic」「swanky-purse」の中から選択します。「ui-lightness」というテーマを使う場合は下記のように変更します。

📎📎📎📎📎📎📎📎📎📎