Jqueryui-dialog

提供：Dev Guides
移動先:案内、検索

JqueryUI-ダイアログ

ダイアログボックスは、HTMLページに情報を表示する優れた方法の1つです。 ダイアログボックスは、タイトルとコンテンツ領域を備えたフローティングウィンドウです。 このウィンドウは、デフォルトで「X」アイコンを使用して移動、サイズ変更、およびもちろん閉じることができます。

jQueryUIは、ダイアログボックスを表示するために、ページに記述されたHTMLコードをHTMLコードに変換する* dialog（）*メソッドを提供します。

構文

  • dialog（）*メソッドは2つの形式で使用できます-
  • link：/jqueryui/jqueryui_dialog＃dialog_options [$（selector、context）.dialog（options）]メソッド
  • link：/jqueryui/jqueryui_dialog＃dialog_methods [$（selector、context）.dialog（ "action"、[params]）]メソッド

[dialog_options]#

$（セレクター、コンテキスト）.dialog（オプション）メソッド

ダイアログ（オプション）オプション

構文

$(selector, context).dialog(options);

Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。 提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します- 

$(selector, context).dialog({option1: value1, option2: value2..... });

次の表は、この方法で使用できるさまざまな_オプション_を示しています-

Sr.No. Option & Description
1

appendTo

このオプションを false に設定すると、 ui-draggable クラスが選択されたDOM要素のリストに追加されなくなります。 デフォルトでは、その値は true です。

  • オプション-appendTo *

このオプションは、指定された要素にダイアログボックスを追加するために使用されます。 デフォルトでは、その値は "body" です。

構文 

$(".selector").dialog(
   { appendTo: "#identifier" }
);
2

autoOpen

このオプションは、_false_に設定されていない限り、作成時にダイアログボックスが開きます。 _false_の場合、dialog（ 'open'）の呼び出し時にダイアログボックスが開きます。 デフォルトでは、その値は true です。

  • オプション-autoOpen *

このオプションは、_false_に設定されていない限り、作成時にダイアログボックスが開きます。 _false_の場合、dialog（ 'open'）の呼び出し時にダイアログボックスが開きます。 デフォルトでは、その値は true です。

構文 

$(".selector").dialog(
   { autoOpen: false }
);
3

buttons

このオプションは、ダイアログボックスにボタンを追加します。 これらはオブジェクトとしてリストされ、各プロパティはボタン上のテキストです。 値は、ユーザーがボタンをクリックしたときに呼び出されるコールバック関数です。 デフォルトでは、その値は \ {} です。

オプション-ボタン

このオプションは、ダイアログボックスにボタンを追加します。 これらはオブジェクトとしてリストされ、各プロパティはボタン上のテキストです。 値は、ユーザーがボタンをクリックしたときに呼び出されるコールバック関数です。 デフォルトでは、その値は \ {} です。

このハンドラーは、ダイアログボックス要素の関数コンテキストで呼び出され、ボタンをターゲットプロパティとして設定してイベントインスタンスを渡します。 省略すると、ダイアログボックス用のボタンは作成されません。

構文 

$(".selector").dialog(
   { buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] }
);
4

closeOnEscape

このオプションを_false_に設定しない限り、ダイアログボックスにフォーカスがあるときにユーザーがEscキーを押すと、ダイアログボックスが閉じられます。 デフォルトでは、その値は true です。

  • オプション-closeOnEscape *

このオプションを_false_に設定しない限り、ダイアログボックスにフォーカスがあるときにユーザーがEscキーを押すと、ダイアログボックスが閉じられます。 デフォルトでは、その値は true です。

構文 

$(".selector").dialog(
   { closeOnEscape: false }
);
5

closeText

このオプションには、閉じるボタンのデフォルトの閉じるを置き換えるテキストが含まれています。 デフォルトでは、その値は "close" です。

  • オプション-closeText *

このオプションには、閉じるボタンのデフォルトの閉じるを置き換えるテキストが含まれています。 デフォルトでは、その値は "close" です。

構文 

$(".selector").dialog(
   { closeText: "hide" }
);
6

dialogClass

このオプションを false に設定すると、 ui-draggable クラスが選択されたDOM要素のリストに追加されなくなります。 デフォルトでは、その値は "" です。

  • オプション-dialogClass *

このオプションを false に設定すると、 ui-draggable クラスが選択されたDOM要素のリストに追加されなくなります。 デフォルトでは、その値は "" です。

構文 

$(".selector").dialog(
   { dialogClass: "alert" }
);
7

draggable

このオプションを false にしない限り、タイトルバーをクリックしてドラッグすることでダイアログボックスをドラッグできます。 デフォルトでは、その値は true です。

オプション-ドラッグ可能

このオプションを false にしない限り、タイトルバーをクリックしてドラッグすることでダイアログボックスをドラッグできます。 デフォルトでは、その値は true です。

構文 

$(".selector").dialog(
   { draggable: false }
);
8

height

このオプションは、ダイアログボックスの高さを設定します。 デフォルトでは、その値は "auto" です。

オプション-高さ

このオプションがダイアログボックスの高さを設定する場合。 デフォルトでは、その値は "auto" です。 このオプションはタイプにすることができます-

これはタイプにすることができます-

  • Number -これはミリ秒単位で期間を指定します
  • String -サポートされる唯一の文字列値は_auto_です。これにより、ダイアログの高さをその内容に基づいて調整できます。

構文 

$(".selector").dialog(
   { height: 400 }
);
9

hide

このオプションは、ダイアログボックスが閉じられたときに使用される効果を設定するために使用されます。 デフォルトでは、その値は null です。

オプション-非表示

このオプションは、ダイアログボックスが閉じられたときに使用される効果を設定するために使用されます。 デフォルトでは、その値は null です。

これはタイプにすることができます-

  • ブール-値は_true/false_になります。 _false_の場合、アニメーションは使用されず、ダイアログはすぐに非表示になります。 _true_の場合、ダイアログはデフォルトの持続時間とデフォルトのイージングでフェードアウトします。
  • Number -ダイアログは、指定された期間とデフォルトのイージングでフェードアウトします。
  • String -ダイアログは、slideUp _、 fold_などの指定された効果を使用して非表示になります。
  • オブジェクト-値がオブジェクトの場合、ダイアログを非表示にするために、effect、delay、duration、、および_easing_プロパティが提供されます。 + 10

構文 

$(".selector").dialog(
   { hide: { effect: "explode", duration: 1000 } }
);
11

maxHeight

このオプションは、ダイアログボックスのサイズを変更できる最大の高さをピクセル単位で設定します。 デフォルトでは、その値は false です。

  • オプション-maxHeight *

このオプションは、ダイアログボックスのサイズを変更できる最大の高さをピクセル単位で設定します。 デフォルトでは、その値は false です。

構文 

$(".selector").dialog(
   { maxHeight: 600 }
);
12

maxWidth

このオプションは、ダイアログのサイズを変更できる最大幅をピクセル単位で設定します。 デフォルトでは、その値は false です。

  • オプション-maxWidth *

このオプションは、ダイアログのサイズを変更できる最大幅をピクセル単位で設定します。 デフォルトでは、その値は false です。

構文 

$(".selector").dialog(
   { maxWidth: 600 }
);
13

minHeight

このオプションは、ダイアログボックスのサイズを変更できる最小の高さ（ピクセル単位）です。 デフォルトでは、その値は 150 です。

  • オプション-minHeight *

このオプションは、ダイアログボックスのサイズを変更できる最小の高さ（ピクセル単位）です。 デフォルトでは、その値は 150 です。

構文 

$(".selector").dialog(
   { minHeight: 200 }
);
14

minWidth

このオプションは、ダイアログボックスのサイズを変更できる最小幅（ピクセル単位）です。 デフォルトでは、その値は 150 です。

  • オプション-minWidth *

このオプションは、ダイアログボックスのサイズを変更できる最小幅（ピクセル単位）です。 デフォルトでは、その値は 150 です。

構文 

$(".selector").dialog(
   { minWidth: 200 }
);
15

modal

このオプションが true に設定されている場合、ダイアログはモーダル動作になります。ページ上の他のアイテムは無効になります。つまり、操作することはできません。 モーダルダイアログは、ダイアログの下で、他のページ要素の上にオーバーレイを作成します。 デフォルトでは、その値は false です。

オプション-モーダル

このオプションが true に設定されている場合、ダイアログはモーダル動作になります。ページ上の他のアイテムは無効になります。つまり、操作することはできません。 モーダルダイアログは、ダイアログの下で、他のページ要素の上にオーバーレイを作成します。 デフォルトでは、その値は false です。

構文 

$(".selector").dialog(
   { modal: true }
);
16

position

このオプションは、ダイアログボックスの初期位置を指定します。 _center（デフォルト）、left、right、top、またはbottom_の事前定義された位置のいずれかです。 また、左と上の値（ピクセル単位）が[left、top]のような2要素配列、または['right'、 'top']などのテキスト位置にすることもできます。 デフォルトでは、その値は \ {my： "center"、at： "center"、of：window} です。

オプション-位置

このオプションは、ダイアログボックスの初期位置を指定します。 _center（デフォルト）、left、right、top、またはbottom_の事前定義された位置のいずれかです。 また、左と上の値（ピクセル単位）が[left、top]のような2要素配列、または['right'、 'top']などのテキスト位置にすることもできます。 デフォルトでは、その値は \ {my： "center"、at： "center"、of：window} です。

構文 

$(".selector").dialog(
   { position: { my: "left top", at: "left bottom", of: button } }
);
17

resizable

このオプションは、 false に設定されていない限り、ダイアログボックスはすべての方向にサイズ変更できます。 デフォルトでは、その値は true です。

オプション-サイズ変更可能

このオプションは、 false に設定されていない限り、ダイアログボックスはすべての方向にサイズ変更できます。 デフォルトでは、その値は true です。

構文 

$(".selector").dialog(
   { resizable: false }
);
18

show

このオプションは、ダイアログボックスを開くときに使用する効果です。 デフォルトでは、その値は null です。

オプション-表示

このオプションは、ダイアログボックスを開くときに使用する効果です。 デフォルトでは、その値は null です。

これはタイプにすることができます-

  • ブール-値は_true/false_になります。 _false_の場合、アニメーションは使用されず、ダイアログはすぐに表示されます。 _true_の場合、ダイアログはデフォルトの持続時間とデフォルトのイージングでフェードインします。
  • Number -ダイアログは、指定された期間とデフォルトのイージングでフェードインします。
  • String -ダイアログは、slideDown _、 fold_などの指定された効果を使用して表示されます。
  • オブジェクト-値がオブジェクトの場合、ダイアログを表示するために、effect、delay、duration、、および_easing_プロパティが提供されます。 + 19

構文 

$(".selector").dialog(
   { show: { effect: "blind", duration: 800 } }
);
20

title

このオプションは、ダイアログボックスのタイトルバーに表示するテキストを指定します。 デフォルトでは、その値は null です。

オプション-タイトル

このオプションは、ダイアログボックスのタイトルバーに表示するテキストを指定します。 デフォルトでは、その値は null です。

構文 

$(".selector").dialog(
   { title: "Dialog Title" }
);
21

width

このオプションは、ダイアログボックスの幅をピクセル単位で指定します。 デフォルトでは、その値は 300 です。

オプション-幅

このオプションは、ダイアログボックスの幅をピクセル単位で指定します。 デフォルトでは、その値は 300 です。

構文 

$(".selector").dialog(
   { width: 500 }
);

次のセクションでは、ダイアログ機能の実際の例をいくつか示します。

デフォルトの機能

次の例は、* dialog（）*メソッドにパラメーターを渡さないダイアログ機能の簡単な例を示しています。 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-1" ).dialog({
               autoOpen: false,
            });
            $( "#opener" ).click(function() {
               $( "#dialog-1" ).dialog( "open" );
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div id = "dialog-1"
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener">Open Dialog</button>
   </body>
</html>

上記のコードをHTMLファイル dialogexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。 今、あなたは結果で遊ぶことができます-

ボタン、タイトル、位置の使用

次の例は、JqueryUIのダイアログウィジェットでの3つのオプション*ボタン*、*タイトル*および*位置*の使用方法を示しています。 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-2" ).dialog({
               autoOpen: false,
               buttons: {
                  OK: function() {$(this).dialog("close");}
               },
               title: "Success",
               position: {
                  my: "left center",
                  at: "left center"
               }
            });
            $( "#opener-2" ).click(function() {
               $( "#dialog-2" ).dialog( "open" );
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div id = "dialog-2"
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-2">Open Dialog</button>
   </body>
</html>

上記のコードをHTMLファイル dialogexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。 今、あなたは結果で遊ぶことができます-

hide、show、heightの使用

次の例は、JqueryUIのダイアログウィジェットで3つのオプション hide 、 show および height を使用する方法を示しています。 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-3" ).dialog({
               autoOpen: false,
               hide: "puff",
               show : "slide",
               height: 200
            });
            $( "#opener-3" ).click(function() {
               $( "#dialog-3" ).dialog( "open" );
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div id = "dialog-3"
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-3">Open Dialog</button>
   </body>
</html>

上記のコードをHTMLファイル dialogexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。 今、あなたは結果で遊ぶことができます-

モーダルの使用

次の例は、JqueryUIのダイアログウィジェットでの3つのオプション*ボタン*、*タイトル*および*位置*の使用方法を示しています。 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-4" ).dialog({
               autoOpen: false,
               modal: true,
               buttons: {
                  OK: function() {$(this).dialog("close");}
               },
            });
            $( "#opener-4" ).click(function() {
               $( "#dialog-4" ).dialog( "open" );
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div id = "dialog-4" title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-4">Open Dialog</button>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
         ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
         laboris nisi ut aliquip ex ea commodo consequat.
      </p>
      <label for = "textbox">Enter Name: </label>
      <input type = "text">
   </body>
</html>

上記のコードをHTMLファイル dialogexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。 今、あなたは結果で遊ぶことができます-

$（セレクター、コンテキスト）.dialog（ "action"、[params]）メソッド

_dialog（action、params）_メソッドは、ダイアログボックスに対して、ボックスを閉じるなどのアクションを実行できます。 action は最初の引数で文字列として指定され、オプションで、指定されたアクションに基づいて1つ以上の params を提供できます。

'_基本的に、ここでのアクションは何もありませんが、文字列の形で使用できるjQueryメソッドです。_

構文

$(selector, context).dialog ("action", [params]);

次の表は、このメソッドのアクションを示しています-

Sr.No. Action & Description
1

close()

このアクションにより、ダイアログボックスが閉じます。 このメソッドは引数を取りません。

アクション-close（）

このアクションにより、ダイアログボックスが閉じます。 このメソッドは引数を取りません。

構文 

$(".selector").dialog("close");
2

destroy()

このアクションにより、ダイアログボックスが完全に削除されます。 これにより、要素は初期化前の状態に戻ります。 このメソッドは引数を取りません。

アクション-destroy（）

このアクションにより、ダイアログボックスが完全に削除されます。 これにより、要素は初期化前の状態に戻ります。 このメソッドは引数を取りません。

構文 

$(".selector").dialog("destroy");
3

isOpen()

このアクションは、ダイアログボックスが開いているかどうかを確認します。 このメソッドは引数を取りません。

アクション-isOpen（）

このアクションは、ダイアログボックスが開いているかどうかを確認します。 このメソッドは引数を取りません。

構文 

$(".selector").dialog("isOpen");
4

moveToTop()

このアクションは、対応するダイアログボックスを前景（他のダイアログボックスの上）に配置します。 このメソッドは引数を取りません。

アクション-moveToTop（）

このアクションは、対応するダイアログボックスを前景（他のダイアログボックスの上）に配置します。 このメソッドは引数を取りません。

構文 

$(".selector").dialog("moveToTop");
5

open()

このアクションにより、ダイアログボックスが開きます。 このメソッドは引数を取りません。

アクション-open（）

このアクションにより、ダイアログボックスが開きます。 このメソッドは引数を取りません。

構文 

$(".selector").dialog("open");
6

option( optionName )

このアクションは、指定されたoptionNameに現在関連付けられている値を取得します。 ここで、_optionName_は取得するオプションの名前です。

アクション-option（optionName）

このアクションは、指定されたoptionNameに現在関連付けられている値を取得します。 ここで、_optionName_は取得するオプションの名前です。

構文 

var isDisabled = $( ".selector" ).dialog( "option", "disabled" );
7

option()

このアクションは、現在のダイアログオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。 このメソッドは引数を取りません。

アクション-option（）

このアクションは、現在のダイアログオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。 このメソッドは引数を取りません。

構文 

var options = $( ".selector" ).dialog( "option" );
8

option( optionName, value )

このアクションは、指定されたoptionNameに関連付けられたダイアログオプションの値を設定します。

アクション-option（optionName、value）

このアクションは、指定されたoptionNameに関連付けられたダイアログオプションの値を設定します。

構文 

$(".selector").dialog( "option", "disabled", true );
9

option( options )

このアクションは、ダイアログの1つ以上のオプションを設定します。

アクション-オプション（オプション）

このアクションは、ダイアログの1つ以上のオプションを設定します。

構文 

$(".selector").dialog( "option", { disabled: true });
10

widget()

このアクションは、ダイアログボックスのウィジェット要素を返します。 ui-dialogクラス名で注釈が付けられた要素。 このメソッドは引数を取りません。

アクション-ウィジェット（）

このアクションは、ダイアログボックスのウィジェット要素を返します。 ui-dialogクラス名で注釈が付けられた要素。 このメソッドは引数を取りません。

構文 

$(".selector").dialog("widget");

例

ここで、上の表のアクションを使用した例を見てみましょう。 次の例は、isOpen（）、_ open（）_、および_close（）_メソッドの使用方法を示しています。 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>

      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $("#toggle").click(function() {
               ($("#dialog-5").dialog("isOpen") == false) ? $(
                  "#dialog-5").dialog("open") : $("#dialog-5").dialog("close") ;
            });
            $("#dialog-5").dialog({autoOpen: false});
         });
      </script>
   </head>

   <body>
      <button id = "toggle">Toggle dialog!</button>
      <div id = "dialog-5" title = "Dialog Title!">
         Click on the Toggle button to open and close this dialog box.
      </div>
   </body>
</html>

上記のコードをHTMLファイル dialogexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

ダイアログボックスでのイベント管理

前のセクションで見たダイアログ（オプション）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。 これらのイベントメソッドは以下のとおりです-

Sr.No. Event Method & Description
1

beforeClose(event, ui)

このイベントは、ダイアログボックスが閉じようとするときにトリガーされます。 _false_を返すと、ダイアログボックスが閉じなくなります。 検証に失敗したフォームを持つダイアログボックスに便利です。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-beforeClose（event、ui）

このイベントは、ダイアログボックスが閉じようとするときにトリガーされます。 _false_を返すと、ダイアログボックスが閉じなくなります。 検証に失敗したフォームを持つダイアログボックスに便利です。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

構文 

$(".selector").dialog (
   beforeClose: function(event, ui) {}
);
2

close(event, ui)

このイベントは、ダイアログボックスが閉じられるとトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-close（event、ui）

このイベントは、ダイアログボックスが閉じられるとトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

構文 

$(".selector").dialog (
   close: function(event, ui) {}
);
3

create(event, ui)

このイベントは、ダイアログボックスが作成されたときにトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-create（event、ui）

このイベントは、ダイアログボックスが作成されたときにトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

構文 

$(".selector").dialog (
   create: function(event, ui) {}
);
4

drag(event, ui)

ドラッグ中にダイアログボックスが移動すると、このイベントが繰り返しトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-drag（event、ui）

ドラッグ中にダイアログボックスが移動すると、このイベントが繰り返しトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

  • position -ダイアログの現在のCSS位置を表すjQueryオブジェクト。
  • offset -ダイアログの現在のオフセット位置を表すjQueryオブジェクト。

構文 

$(".selector").dialog (
   drag: function(event, ui) {}
);
5

dragStart(event, ui)

このイベントは、タイトルバーをドラッグしてダイアログボックスの位置を変更すると開始されます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-dragStart（event、ui）

このイベントは、タイトルバーをドラッグしてダイアログボックスの位置を変更すると開始されます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

  • position -ダイアログの現在のCSS位置を表すjQueryオブジェクト。
  • offset -ダイアログの現在のオフセット位置を表すjQueryオブジェクト。

構文 

$(".selector").dialog (
   dragStart: function(event, ui) {}
);
6

dragStop(event, ui)

このイベントは、ドラッグ操作が終了するとトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-dragStop（event、ui）

このイベントは、ドラッグ操作が終了するとトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

  • position -ダイアログの現在のCSS位置を表すjQueryオブジェクト。
  • offset -ダイアログの現在のオフセット位置を表すjQueryオブジェクト。

構文 

$(".selector").dialog (
   dragStop: function(event, ui) {}
);
7

focus(event, ui)

このイベントは、ダイアログがフォーカスを取得したときにトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-focus（event、ui）

このイベントは、ダイアログがフォーカスを取得したときにトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

構文 

$(".selector").dialog (
   focus: function(event, ui) {}
);
8

open(event, ui)

このイベントは、ダイアログボックスが開いたときにトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-open（event、ui）

このイベントは、ダイアログボックスが開いたときにトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

構文 

$(".selector").dialog (
   open: function(event, ui) {}
);
9

resize(event, ui)

このイベントは、ダイアログボックスのサイズが変更されると繰り返しトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-resize（event、ui）

このイベントは、ダイアログボックスのサイズが変更されると繰り返しトリガーされます。 _event_は_Event_型であり、_ui_は_Object_型です。_ui_の可能な値は-

  • originalPosition -サイズ変更される前のダイアログのCSS位置を表すjQueryオブジェクト。
  • position -ダイアログの現在のCSS位置を表すjQueryオブジェクト。
  • originalSize -サイズ変更される前のダイアログのサイズを表すjQueryオブジェクト。
  • size -ダイアログの現在のサイズを表すjQueryオブジェクト。

構文 

$(".selector").dialog (
   resize: function(event, ui) {}
);
10

resizeStart(event, ui)

このイベントは、ダイアログボックスのサイズ変更が開始されるとトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-resizeStart（event、ui）

このイベントは、ダイアログボックスのサイズ変更が開始されるとトリガーされます。 _event_は_Event_型であり、_ui_は_Object_型です。_ui_の可能な値は-

  • originalPosition -サイズ変更される前のダイアログのCSS位置を表すjQueryオブジェクト。
  • position -ダイアログの現在のCSS位置を表すjQueryオブジェクト。
  • originalSize -サイズ変更される前のダイアログのサイズを表すjQueryオブジェクト。
  • size -ダイアログの現在のサイズを表すjQueryオブジェクト。

構文 

$(".selector").dialog (
   resizeStart: function(event, ui) {}
);
11

resizeStop(event, ui)

このイベントは、ダイアログボックスのサイズ変更が終了するとトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-resizeStop（event、ui）

このイベントは、ダイアログボックスのサイズ変更が終了するとトリガーされます。 _event_は_Event_型であり、_ui_は_Object_型です。_ui_の可能な値は-

  • originalPosition -サイズ変更される前のダイアログのCSS位置を表すjQueryオブジェクト。
  • position -ダイアログの現在のCSS位置を表すjQueryオブジェクト。
  • originalSize -サイズ変更される前のダイアログのサイズを表すjQueryオブジェクト。
  • size -ダイアログの現在のサイズを表すjQueryオブジェクト。

構文 

$(".selector").dialog (
   resizeStop: function(event, ui) {}
);

次の例は、上記の表にリストされているイベントの使用法を示しています。

beforeCloseイベントメソッドの使用

次の例は、 beforeClose イベントメソッドの使用方法を示しています。 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .invalid { color: red; }
         textarea {
            display: inline-block;
            width: 100%;
            margin-bottom: 10px;
         }
      </style>

      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $( "#dialog-6" ).dialog({
           autoOpen: false,
               buttons: {
                  OK: function() {
                     $( this ).dialog( "close" );
                  }
               },
               beforeClose: function( event, ui ) {
                  if ( !$( "#terms" ).prop( "checked" ) ) {
                     event.preventDefault();
                     $( "[for = terms]" ).addClass( "invalid" );
                  }
               },
               width: 600
            });
            $( "#opener-5" ).click(function() {
               $( "#dialog-6" ).dialog( "open" );
            });
         });
      </script>
   </head>

   <body>
      <div id = "dialog-6">
         <p>You must accept these terms before continuing.</p>
         <textarea>This Agreement and the Request constitute the entire agreement of the
         parties with respect to the subject matter of the Request. This Agreement shall be
         governed by and construed in accordance with the laws of the State, without giving
         effect to principles of conflicts of law.</textarea>
         <div>
            <label for = "terms">I accept the terms</label>
            <input type = "checkbox" id = "terms">
         </div>
      </div>
      <button id = "opener-5">Open Dialog</button>
   </body>
</html>

上記のコードをHTMLファイル dialogexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

resize Eventメソッドの使用

次の例は、 resize イベントメソッドの使用方法を示しています。 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>

      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $( "#dialog-7" ).dialog({
               autoOpen: false,
               resize: function( event, ui ) {
                  $( this ).dialog( "option", "title",
             ui.size.height + " x " + ui.size.width );
               }
            });
            $( "#opener-6" ).click(function() {
               $( "#dialog-7" ).dialog( "open" );
            });
         });
      </script>
   </head>

   <body>
      <div id = "dialog-7" title = "Dialog Title goes here..."
         >Resize this dialog to see the dialog co-ordinates in the title!</div>
      <button id = "opener-6">Open Dialog</button>
   </body>
</html>

上記のコードをHTMLファイル dialogexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

拡張ポイント

ダイアログウィジェットは、ウィジェットファクトリで構築されており、拡張できます。 ウィジェットを拡張するには、既存のメソッドの動作をオーバーライドまたは追加できます。 次のメソッドは、ダイアログメソッドと同じAPI安定性を拡張ポイントとして提供します。 リンク：/jqueryui/jqueryui_dialog＃dialog_methods [上記の表]にリストされています。

Sr.No. Method & Description
1

_allowInteraction(event)

このメソッドを使用すると、ユーザーはダイアログの子ではないがユーザーは使用できるようにする要素をホワイトリストに登録することで、指定されたターゲット要素と対話できます。 ここで、_event_は_Event_型です。

拡張ポイント-allowInteraction（event、ui）

このメソッドを使用すると、ユーザーはダイアログの子ではないがユーザーは使用できるようにする要素をホワイトリストに登録することで、指定されたターゲット要素と対話できます。 ここで、_event_は_Event_型です。

コード例 

_allowInteraction: function( event ) {
  return !!$( event.target ).is( ".select2-input" )

this._super( event ); } ----

  • Select2プラグインはモーダルダイアログ内で使用されます * super（）呼び出しは、ダイアログ内の要素が引き続き対話できるようにします。

'_jQuery UIウィジェットファクトリは、jQuery UIのすべてのウィジェットが構築される拡張可能なベースです。 ウィジェットファクトリを使用してプラグインを作成すると、状態管理に便利なだけでなく、プラグインメソッドの公開やインスタンス化後のオプションの変更などの一般的なタスクの規則が提供されます。_

「https://www.finddevguides.com/index.php?title=Jqueryui-dialog&oldid=2335」から取得
Powered by MediaWiki