• HOME > 
  • JavaScript > 
  • jQueryでダイアログを実装する方法【jQueryUIのd...

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

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像

本記事は執筆時点(2022年03月05日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

jQueryUIのdialogとは?

WEBサイトを制作しているうえでは、メッセージや入力フォームを扱う時にポップアップされるダイアログを表示させたい場面があります。

本来であればJavascriptでプログラミングして作らなければなりませんが、jQueryUIを使えば簡単に実装することができます。

下のサンプルがjQueryUIのdialogです。ボタンをクリックしてみてください。ダイアログが開きます。

jQuery UIのdialog

jQueryUIを使えば、このようなリッチなデザインと機能を持つダイアログを手軽にサイトに実装することが可能です。

jQueryUIについて

jQueryUIとは、フォームの入力などユーザーの操作面における機能をパッケージ化したjQueryのライブラリです。

Javascriptを簡単に扱えるようにしたjQueryを使って、更にパーツやエフェクトに特化して誰でも手軽に利用しやすいようにしてくれたものがjQueryUIです。

今回説明するダイアログ機能は、通常であれば複雑なコードを記述してプログラミングしなければ実装できませんが、jQuery UIを用いることで短いコードで簡単に扱えるようになります。

jQuery UIをCDNで読み込む

jQueryUIはjQueryとは別で新たに読み込む必要があります。

ダウンロードしたものを使う方法もありますが、ここではCDNを使ってサイトに読みこむ方法を説明します。

下記のコードをコピーして貼りつければOKです。なお、jQuery UIは本体であるJavascriptファイルとスタイルシートの2つをセットで読み込みます。

また、jQuery UIを動作させるためにはあらかじめjQeuryを読み込ませておく必要があるため、jQueryの読み込みのコードよりも後に記述します。

CDN

<!--jQueryを読み込み-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--jQuery UIを読み込み-->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
リンク先のサムネイル
jQuery UIの使い方

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

jQueryUIのdialogの使い方

ここからは実際にjQueryUIのダイアログを導入する手順を説明していきます。

まずは、ダイアログとして表示させる要素をHTMLで作成します。

HTML

<div class="sample_dg">ダイアログの中身をここに記載します。</div>

この要素はダイアログとして表示させたいので、最初はdisplay:noneを指定して非表示にしておきます。

CSS

.sample_dg{
    display: none;
}

続いてダイアログを開くきっかけとなるボタンをHTMLで用意します。ボタンのデザインはCSSで自由に作成してください。

HTML

<button class="btn_open">開く</button>

HTML側の準備ができたので、jQueryでボタンがクリックされたらダイアログが開くようにプログラミングします。

jQueryのダイアログは下記のように記述して有効化します。

ダイアログの記述

クリックされたら開くようにしたいので、onメソッドを使ってクリックイベントを作ります。

jQuery

$(function(){
    $(".btn_open").on("click",function(){
        $(".sample_dg").dialog({
            title:"サンプル",
        });
    });
});

以上がjQuery UIのdialogの基本的な使い方です。ここまでをまとめると次のようになります。

HTML

<button class="btn_open">開く</button>
<div class="sample_dg">ダイアログの中身をここに記載します。</div>

CSS

.sample_dg{
    display: none;
}

jQuery

$(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側での記述に少し修正が必要になります。

jQuery

$(function(){
    $(".sample_dg").dialog({
        title:"サンプル",
        autoOpen:false,//trueにするとはじめから表示
    });
    $(".btn_open").on("click",function(){
        $(".sample_dg").dialog("open");
    });
});

buttonsの使い方

buttonsを使うとダイアログ内へ新しいボタンの追加し、押した際の処理を設定することができます。

閉じるなどダイアログに関する処理の他、アラートメッセージを出すなどjQueryによる他の処理を実行させることも可能です。

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」の中から選びます。

https://jqueryui.com/show/

jQuery

$(function(){
    $(".btn_open").on("click",function(){
        $(".sample_dg").dialog({
            show:"fold",
            hide:"slide",
        });
    });
});

プレビュー

modalの使い方

modalを有効にするとダイアログが開いている間は、ダイアログとページの間にフィルターが掛かり、スクロールやクリックといった他の操作ができなくなります。

ユーザーに対してダイアログ内の操作を優先させたい場合などに設定します。

下の例を見てもらうとわかるように、ダイアログが開いているとボタンを押すことができなくなります。

jQuery

$(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」が今回使用しているテーマを示しています。

CDN

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

この部分を変更したいテーマ名に書き換えれば、読み込むテーマが変更されデザインが切り替わります。

テーマは「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」というテーマを使う場合は下記のように変更します。

CDN

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css">

下のサンプルでは、プルダウンメニューでダイアログデザインが切り替わるようにしてありますので、テーマを選ぶ際の参考にしてください。

jQueryUIのテーマ別デザイン

他のパーツのデザインがどのように変わるかなどテーマの詳細についてはjQuery UIの公式サイトのテーマページをご確認下さい。

https://jqueryui.com/themeroller/

まとめ

ダイアログの開閉をはじめ、モーダル設定やドラッグの可否など自作するには難しい機能もjQueryUIを使えば簡単に導入することができます。デザインも豊富に用意されている点も使いやすいです。またクリックイベント以外でもjQueryでカスタマイズすればさまざまなサービスに活用できると思います。

広告
広告

関連する記事

サムネイル

JSでビデオやピクチャが現在どのソース要素を表示しているか取……

2024年11月07日
表示中のsource要素のファイルパスをJSで取得したい picture要素(video)要素とsource要素を使って画像(動画)を表示させている時に、Jav […]
サムネイル

JSで入力値が英数字や半角かどうか即時文字チェックする【ma……

2024年10月02日
JavaScriptのmatch()は、正規表現を使って対象の文字列の中に一致するものがあるか検索できるメソッドです。このページではテキストボックスに入力された文字が数字や半角かどうかチェックする機能をmatchメソッドを使って実装する方法ついてご紹介します。
サムネイル

JSでHTMLのデータ属性を取得・更新する方法【datase……

2024年10月02日
JavaScriptのdatasetで要素のdata属性を操作する JavaScriptのdatasetは、HTML要素に設定されたデータ属性(data-*** […]
サムネイル

JavaScriptでラジオボタンの値(value)を取得す……

2024年10月02日
JSでラジオボタンの値を取得・操作する JavaScriptによるラジオボタンの操作(値の取得やチェックの切り替え)の方法を備忘録として残しておきます。 JSで […]
サムネイル

JSで大文字から小文字(小文字から大文字)へ変換する方法

2024年10月02日
JavaScriptで大文字と小文字を変換する JavaScriptを使った文字検索フォームを作るにあたり、大文字小文字どちらで入力されても良いよう、変換処理を […]
サムネイル

JSのclassList.toggleでクラスの付け外しを行……

2024年09月04日
classList.toggleとは? まず「classList」とは要素のクラス属性の情報を参照するプロパティで、「classList.add()」や「cla […]
サムネイル

JSで要素が特定のクラスを持つか調べる【classList.……

2024年09月04日
JSで要素が特定のクラスを持つか調べるには? JavaScriptで要素が特定のクラスを持つか調べるには「classList.contains」を使います。 「 […]