jQueryにダイアログはありますか？

jquery にはダイアログがあります。ダイアログは jQuery UI ライブラリの UI コンポーネントです。このコンポーネントを使用する利点は、Web ページを更新する必要がなく、div レイヤーをポップできることです。ユーザーが情報を入力できるようにするために直接アップします。このコンポーネントを使用する場合は、jquery を導入するだけでなく、jQueryUI を導入する js および関連 CSS ファイルも導入する必要があります。

このチュートリアルの動作環境: Windows10 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。

jquery にはダイアログがありますか?

Dialog は jQuery UI ライブラリの UI コンポーネントであるため、ダイアログを使用する場合は、jQuery.js を導入するだけでなく、jQuery.js を導入する必要があります。軽量の基盤フレームワークのみ)、jQueryUI js および関連する CSS ファイルを導入する必要もあります。

ダイアログを使用する利点は、Web ページを更新する必要がなく、div レイヤーが直接ポップアップ表示されることです。ユーザーが情報を入力できるようにします。使い方もさらに便利になりました。

jquery ui-dialog は現在でも Web 開発で広く使用されています。最も一般的な例は、ログイン機能の実装です。

例は次のとおりです。

最も簡単な実装は、jquery の Ready メソッドでダイアログ ボックスを構成することです。例:

 $("#dialogDiv").dialog();

しかし、これは要件を満たしていないため、その共通のプロパティとメソッドを理解する必要があります。これは私のデモでの構成です。次のようになります:

$("#dialogDiv").dialog({
autoOpen : false,   // 是否自动弹出窗口
modal : true,    // 设置为模态对话框
resizable : true,
width : 410,   //弹出框宽度
height : 240,   //弹出框高度
title : "用户登录",  //弹出框标题
position : "center",  //窗口显示的位置
buttons:{
'确定':function(){
//调用登录的方法
},
'取消':function(){
$(this).dialog("close");
}
}
});

注: 「dialogDiv」は要素の ID を表します。

よく使用される属性

autoOpen: この属性が true の場合、ダイアログが呼び出されたときにダイアログ ウィンドウが自動的に開きます。属性が false の場合、ウィンドウは最初は非表示になっており、dialog("open") が呼び出されたときにダイアログ ウィンドウがポップアップします。デフォルト: true。

position: ダイアログの表示位置: 'center'、'left'、'right'、'top'、'bottom'、または上と左のオフセットにすることもできます。 ['right','top'] などの 1 文字の String 配列にすることができます。

title: ダイアログのタイトル。デフォルトでは空です。

modal: モーダル ウィンドウを使用するかどうか。モーダル ウィンドウが開いた後は、モーダル ウィンドウが閉じるまでページ上の他の要素をクリックできなくなります。ウィンドウをモーダルにしない場合、デフォルトは false です。

closeOnEscape: true の場合、キーボードの ESC キーをクリックしてダイアログを閉じます。デフォルトは true です。

draggable: タイトル ヘッダーを使用してドラッグ可能かどうか。デフォルトは true で、ドラッグ可能です。

resizable: resizable がダイアログのサイズを変更できるかどうか。デフォルトは true で、サイズは変更できます。

一般的に使用されるメソッド

open: ダイアログを開きます。$("#id").dialog("open") という 1 つの文を入力します。

close: ダイアログを閉じます。$("#id").dialog("close") という一文を入力します。

disable: ダイアログを使用できないように設定します。

enable: ダイアログを使用できるように設定します。

isOpen: ダイアログが開いているかどうかを確認し、開いている場合は true を返します。

destroy: ダイアログを破棄します。

moveToTop: ダイアログを一番上に移動します。

option: ダイアログの値を設定および削除するために使用されます。たとえば、ダイアログのタイトルを設定します。コード: $("#dialogDiv").dialog("option", "title", "Login")

私のデモを見てください。これは単に open メソッドを呼び出しているだけです。その他の属性とメソッドについては、公式 Web サイト (アドレス: http://api.jqueryui.com/dialog/) にアクセスして API を参照してください。これは私のログインページです。メソッドの呼び出し:

 $("#dialogDiv").dialog("open");

結果は次のとおりです:

これは、次のようなページのコードです:

## ページは次のとおりです。とてもきれいで、スタイルは自分で決めてOKです。 Dialog はシンプルで使いやすく、誰でも使用することをお勧めします。

推奨される関連ビデオ チュートリアル:

jQuery ビデオ チュートリアル

以上がjQueryにダイアログはありますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。