JQUERYの使用法の詳細な分析dialog_jquery

今日はクライアント側のダイアログ ボックスを使用し、jQuery UI のダイアログ ボックスについて学びました。

jQuery環境を準備する

まず、ボタンを作成します。このボタンをクリックすると、ダイアログ ボックスが表示されます。

このボタンのクリックイベントを設定するには、jQuery環境を準備する必要があります。

ボタンのクリックイベントを準備完了に設定します。

コードをコピー コードは次のとおりです。

$(function() {
// 初期化
$("#btn").click(function() {
alert("btn was clicked!");
}
);

確認 この手順で問題ありません。 ダイアログ ボックスを準備する

2 番目のステップは、ダイアログ ボックスのコンテンツを準備することです。このコンテンツは、jQuery UI デモ ファイルから取得されます。

コードをコピー コードは次のとおりです:

;
これらのアイテムは完全に削除されます。復元できません。よろしいですか?



jQuery UI ダイアログ ボックスを使用するには、これらのファイルへの参照を追加する必要があります。

> ;


スタイルを追加
jQuery UI で使用多数のスタイルを装飾するには、jQuery UI のスタイルを参照する必要があります。jquery.ui.all.css ファイルは、jQuery UI のdevelopment-bundlethemesbase フォルダーの内容をコピーすることに注意してください。 。

ready関数では、このダイアログボックスも初期化されます。

コードをコピー コードは次のとおりです。

$(function() {

// 初期化
$("#btn").click(function() {
alert("btn was clicked!");
});

// 初期化ダイアログ ボックス
$("#dialog-confirm").dialog();
});


このページを開くと、すでにダイアログ ボックスが表示されています。

ボタンを使用してダイアログ ボックスをポップアップしますページが初期化されるときはこのダイアログ ボックスが表示されず、ボタンをクリックすると再び表示されることを望みます。次に、これらのタスクが必要になります。

まず、デフォルトでは表示されないダイアログ ボックスにスタイルを追加します。 style="display: none" なので、この部分はデフォルトでは表示されません。

コードをコピー コードは次のとおりです:

これらのアイテムは完全に削除され、復元できません。よろしいですか?

その後、初期化を行う際にはダイアログボックスは表示されず、初期化作業のみが完了します。

ダイアログ ボックスを初期化するときに、パラメータ autoOpen: false を渡します

コードをコピー コードは次のとおりです:

$("#dialog-confirm").dialog(
{
autoOpen: false
}
);

クリック イベント内ボタンをクリックすると、このダイアログボックスが表示されます。

コードをコピー コードは次のとおりです:

$("#btn").click (function( ) {
//alert("btn がクリックされました!");
$("#dialog-confirm").dialog("open");
});

close を渡すと、ダイアログ ボックスが閉じます。

モーダル ダイアログ ボックスの実装
実際のアプリケーションでは、Web では、基礎となる要素をブロックしてモーダル効果をシミュレートするためにマスク レイヤーを追加する必要があることがよくあります。ダイアログ ボックスを初期化するには、パラメーター modal: true を渡します。変更された初期化コードは次のようになります:

コードをコピー コードは次のとおりです:

$(" #dialog -confirm").dialog(
{
modal: true, // モーダル ダイアログ ボックスを作成します
autoOpen: false, // 初期化のみ、表示しません
}
) ;

ダイアログ ボックスにボタンを追加します
ダイアログ ボックスにボタンを追加し、ボタンのイベント処理をカスタマイズできます。まず、[OK] と [キャンセル] の 2 つのボタンを追加し、最初にダイアログ ボックスを閉じます。

コードをコピー コードは次のとおりです:

// 初期化ダイアログ ボックス
$ ("# ダイアログ確認").dialog(
{
modal: true, "Ok": function() {
$(this).dialog('close');
🎜> }
});