ホームページ >ウェブフロントエンド >jsチュートリアル >JQUERYの使用法の詳細な分析dialog_jquery
JQUERYの使用法の詳細な分析dialog_jquery
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-05-16 17:08:111590ブラウズ
今日はクライアント側のダイアログ ボックスを使用し、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();
});
このページを開くと、すでにダイアログ ボックスが表示されています。
$("#btn").click(function() {
alert("btn was clicked!");
});
// 初期化ダイアログ ボックス
$("#dialog-confirm").dialog();
});
このページを開くと、すでにダイアログ ボックスが表示されています。
ボタンを使用してダイアログ ボックスをポップアップしますページが初期化されるときはこのダイアログ ボックスが表示されず、ボタンをクリックすると再び表示されることを望みます。次に、これらのタスクが必要になります。
まず、デフォルトでは表示されないダイアログ ボックスにスタイルを追加します。 style="display: none" なので、この部分はデフォルトでは表示されません。
コードをコピー コードは次のとおりです:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。