JqueryUI-ダイアログ

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

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

構文

ザ・ dialog() メソッドは2つの形式で使用できます-

  • $（selector、context）.dialog（options）メソッド

  • $（selector、context）.dialog（ "action"、[params]）メソッド

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

ダイアログ（オプション）メソッドは、HTML要素は、ダイアログボックスの形で投与することができることを宣言します。 オプションのパラメータは、そのウィンドウの外観と動作を指定するオブジェクトです。

構文

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

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

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

次の表に、この方法で使用できるさまざまなオプションを示します。

シニア番号 オプションと説明
1 appendTo

このオプションがに設定されている場合 false、それは防止します ui-draggable選択したDOM要素のリストにクラスが追加されないようにします。デフォルトでは、その値はtrue。

Option - appendTo

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

Syntax

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

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

Option - autoOpen

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

Syntax

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

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

Option - buttons

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

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

Syntax

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

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

Option - closeOnEscape

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

Syntax

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

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

Option - closeText

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

Syntax

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

このオプションがに設定されている場合 false、それは防止します ui-draggable選択したDOM要素のリストにクラスが追加されないようにします。デフォルトでは、その値は""。

Option - dialogClass

このオプションがに設定されている場合 false、それは防止します ui-draggable選択したDOM要素のリストにクラスが追加されないようにします。デフォルトでは、その値は""。

Syntax

$(".selector").dialog(
   { dialogClass: "alert" }
);
7 ドラッグ可能

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

Option - draggable

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

Syntax

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

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

Option - height

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

これはタイプの可能性があります-

  • Number −これはミリ秒単位で期間を指定します

  • String−サポートされている文字列値はautoのみで、コンテンツに基づいてダイアログの高さを調整できます。

Syntax

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

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

Option - hide

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

これはタイプの可能性があります-

  • Boolean−値はtrue / falseである可能性があります。falseの場合、アニメーションは使用されず、ダイアログはすぐに非表示になります。場合は真、ダイアログがデフォルトの継続時間とデフォルトの緩和にフェードアウトします。

  • Number −ダイアログは、指定された期間とデフォルトのイージングでフェードアウトします。

  • String−ダイアログは、slideUp、foldなどの指定された効果を使用して非表示になります。

  • Object−値がオブジェクトの場合、ダイアログを非表示にするために、エフェクト、遅延、期間、およびイージングのプロパティが提供される場合があります。

    10

Syntax

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

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

Option - maxHeight

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

Syntax

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

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

Option - maxWidth

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

Syntax

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

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

Option - minHeight

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

Syntax

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

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

Option - minWidth

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

Syntax

$(".selector").dialog(
   { minWidth: 200 }
);
15 モーダル

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

Option - modal

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

Syntax

$(".selector").dialog(
   { modal: true }
);
16 ポジション

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

Option - position

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

Syntax

$(".selector").dialog(
   { position: { my: "left top", at: "left bottom", of: button } }
);
17 サイズ変更可能

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

Option - resizable

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

Syntax

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

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

Option - show

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

これはタイプの可能性があります-

  • Boolean−値はtrue / falseである可能性があります。falseの場合、アニメーションは使用されず、ダイアログはすぐに表示されます。場合は真、ダイアログがデフォルトの継続時間とデフォルトの緩和でフェードインします。

  • Number −ダイアログは、指定された期間とデフォルトのイージングでフェードインします。

  • String−ダイアログは、slideDown、foldなどの指定された効果を使用して表示されます。

  • Object−値がオブジェクトの場合、ダイアログを表示するために、エフェクト、遅延、期間、およびイージングのプロパティが提供される場合があります。

    19

Syntax

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

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

Option - title

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

Syntax

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

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

Option - width

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

Syntax

$(".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.htmjavascriptをサポートする標準のブラウザで開くと、次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

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

次の例は、3つのオプションの使用法を示しています buttons、 title そして position JqueryUIのダイアログウィジェットで。

<!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.htmjavascriptをサポートする標準のブラウザで開くと、次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

非表示、表示、高さの使用

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

<!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.htmjavascriptをサポートする標準のブラウザで開くと、次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

モーダルの使用

次の例は、3つのオプションの使用法を示しています buttons、 title そして position JqueryUIのダイアログウィジェットで。

<!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.htmjavascriptをサポートする標準のブラウザで開くと、次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

$（selector、context）.dialog（ "action"、[params]）メソッド

ダイアログ（アクション、paramsは）方法は、このようなボックスを閉じるように、ダイアログボックスのアクションを実行することができます。ザ・action 最初の引数で文字列として指定され、オプションで1つ以上が指定されます params 与えられたアクションに基づいて提供することができます。

基本的に、ここでのアクションは、文字列の形式で使用できるjQueryメソッドに他なりません。

構文

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

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

シニア番号 アクションと説明
1 閉じる（）

この操作により、ダイアログボックスが閉じます。このメソッドは引数を受け入れません。

Action - close()

この操作により、ダイアログボックスが閉じます。このメソッドは引数を受け入れません。

Syntax

$(".selector").dialog("close");
2 破壊（）

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

Action - destroy()

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

Syntax

$(".selector").dialog("destroy");
3 isOpen（）

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

Action - isOpen()

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

Syntax

$(".selector").dialog("isOpen");
4 moveToTop（）

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

Action - moveToTop()

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

Syntax

$(".selector").dialog("moveToTop");
5 開いた（）

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

Action - open()

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

Syntax

$(".selector").dialog("open");
6 option（optionName）

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

Action - option( optionName )

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

Syntax

var isDisabled = $( ".selector" ).dialog( "option", "disabled" );
7 オプション（）

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

Action - option()

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

Syntax

var options = $( ".selector" ).dialog( "option" );
8 option（optionName、value）

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

Action - option( optionName, value )

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

Syntax

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

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

Action - option( options )

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

Syntax

$(".selector").dialog( "option", { disabled: true });
10 ウィジェット（）

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

Action - widget()

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

Syntax

$(".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.htm javascriptをサポートする標準のブラウザで開くと、次の出力も表示される必要があります-

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

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

シニア番号 イベントの方法と説明
1 beforeClose（event、ui）

このイベントは、ダイアログボックスが閉じようとしているときにトリガーされます。falseを返すと、ダイアログボックスが閉じなくなります。検証に失敗したフォームのあるダイアログボックスに便利です。ここで、eventはEvent型であり、uiはObject型です。

Event - beforeClose(event, ui)

このイベントは、ダイアログボックスが閉じようとしているときにトリガーされます。falseを返すと、ダイアログボックスが閉じなくなります。検証に失敗したフォームのあるダイアログボックスに便利です。ここで、eventはEvent型であり、uiはObject型です。

Syntax

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

このイベントは、ダイアログボックスが閉じられたときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。

Event - close(event, ui)

このイベントは、ダイアログボックスが閉じられたときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。

Syntax

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

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

Event - create(event, ui)

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

Syntax

$(".selector").dialog (
   create: function(event, ui) {}
);
4 ドラッグ（イベント、UI）

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

Event - drag(event, ui)

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

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

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

Syntax

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

このイベントは、タイトルバーをドラッグしてダイアログボックスの再配置を開始したときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。

Event - dragStart(event, ui)

このイベントは、タイトルバーをドラッグしてダイアログボックスの再配置を開始したときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。

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

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

Syntax

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

このイベントは、ドラッグ操作が終了したときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。

Event - dragStop(event, ui)

このイベントは、ドラッグ操作が終了したときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。

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

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

Syntax

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

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

Event - focus(event, ui)

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

Syntax

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

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

Event - open(event, ui)

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

Syntax

$(".selector").dialog (
   open: function(event, ui) {}
);
9 サイズ変更（イベント、UI）

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

Event - resize(event, ui)

このイベントは、ダイアログボックスのサイズが変更されると繰り返しトリガーされます。どこでイベントがタイプのものであり、イベント、およびUIは型であるオブジェクトの.Possible値UIがあります-

  • originalPosition −サイズ変更前のダイアログのCSS位置を表すjQueryオブジェクト。

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

  • originalSize −サイズ変更前のダイアログのサイズを表すjQueryオブジェクト。

  • size −ダイアログの現在のサイズを表すjQueryオブジェクト。

Syntax

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

このイベントは、ダイアログボックスのサイズ変更が開始されたときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。

Event - resizeStart(event, ui)

このイベントは、ダイアログボックスのサイズ変更が開始されたときにトリガーされます。どこでイベントがタイプのものであり、イベント、およびUIは型であるオブジェクトの.Possible値UIがあります-

  • originalPosition −サイズ変更前のダイアログのCSS位置を表すjQueryオブジェクト。

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

  • originalSize −サイズ変更前のダイアログのサイズを表すjQueryオブジェクト。

  • size −ダイアログの現在のサイズを表すjQueryオブジェクト。

Syntax

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

このイベントは、ダイアログボックスのサイズ変更が終了したときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。

Event - resizeStop(event, ui)

このイベントは、ダイアログボックスのサイズ変更が終了したときにトリガーされます。どこでイベントがタイプのものであり、イベント、およびUIは型であるオブジェクトの.Possible値UIがあります-

  • originalPosition −サイズ変更前のダイアログのCSS位置を表すjQueryオブジェクト。

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

  • originalSize −サイズ変更前のダイアログのサイズを表すjQueryオブジェクト。

  • size −ダイアログの現在のサイズを表すjQueryオブジェクト。

Syntax

$(".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.htm javascriptをサポートする標準のブラウザで開くと、次の出力も表示される必要があります-

サイズ変更イベントメソッドの使用

次の例は、 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.htm javascriptをサポートする標準のブラウザで開くと、次の出力も表示される必要があります-

拡張ポイント

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

シニア番号 方法と説明
1 _allowInteraction（event）

このメソッドを使用すると、ユーザーはダイアログの子ではない要素をホワイトリストに登録することで特定のターゲット要素を操作できますが、ユーザーは使用できます。どこでイベントがタイプであるイベント。

Extension Point - allowInteraction(event, ui)

このメソッドを使用すると、ユーザーはダイアログの子ではない要素をホワイトリストに登録することで特定のターゲット要素を操作できますが、ユーザーは使用できます。どこでイベントがタイプであるイベント。

Code Example

_allowInteraction: function( event ) {
  return !!$( event.target ).is( ".select2-input" ) || this._super( event );
}

  • Select2プラグインはモーダルダイアログ内で使用されます

  • super（）呼び出しにより、ダイアログ内の要素を引き続き操作できるようになります。
jQuery UI Widget Factoryは、jQueryUIのすべてのウィジェットが構築される拡張可能なベースです。ウィジェットファクトリを使用してプラグインを構築すると、状態管理に便利なだけでなく、プラグインメソッドの公開やインスタンス化後のオプションの変更などの一般的なタスクの規則が提供されます。
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved