jQuery UI Dialog は使いやすいポップアップ ダイアログ ボックスの実装 code_jquery を作成します

主なパラメータ
jQuery UI ダイアログの一般的に使用されるパラメータは次のとおりです:

1. autoOpen: デフォルトは true、つまりダイアログ メソッドの作成時にダイアログ ボックスが表示されます
2.デフォルトでは、表示されるボタンを設定するために使用され、JSON または配列形式で指定できます:
{"OK": function(){}, "Cancel": function(){}}
[{text : "OK"、クリック: function(){} },{text:"Cancel",click:function(){}}]
3. モーダル: ダイアログ ボックスがモーダルであるかどうかのデフォルト。 true、ページの他の要素を覆うマスクレイヤーが作成されます。
4. title: タイトル
5. ドラッグ可能かどうか、デフォルトは true
6.サイズ変更可能、デフォルトは true
7. width: 幅、デフォルトは 300
8. height: 高さ、デフォルトは "auto"
その他のあまり使用されないパラメータ:

1. true、esc キーを押してダイアログ ボックスを閉じます
2. show: ダイアログ ボックスを開くアニメーション効果
3. Hide: ダイアログ ボックスを閉じるアニメーション効果
4. Position: ダイアログ ボックスを閉じる位置ダイアログ ボックスが表示されます。デフォルトは「center」で、文字列または配列に設定できます:
'center', ' left', 'right', 'top', 'bottom'
['right ','top']、上記の文字列の組み合わせ (x, y)
[350,100]、絶対数値 (x,y)
5. minWidth: デフォルト 150、最小幅
6. minHeight : デフォルトは 150、最小高さ
使用法:

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

$("...").dialog({
title: "タイトル",
//. ..その他のパラメータ
}); Method
jQuery UI Dialog には、ダイアログ ボックスを制御するためのメソッドがいくつかあります。一般的に使用されるメソッドのみがリストされています。

open : ダイアログ ボックスを開きます。
close : ダイアログ ボックスを閉じます (ダイアログ ボックスは閉じられません)。 close によって破棄され、引き続き使用できます)
destroy: ダイアログ ボックスを破棄します。
オプション: パラメーターを設定します。つまり、前にリストされたパラメーターです。
使用 ダイアログ メソッドのパラメーターとして使用される場合:

コードをコピー コードは次のとおりです: var dlg = $ ("...") .dialog({

//...各種パラメータ

});
dlg.dialog("option", { title: "title" }); // パラメータを設定します
dlg.dialog ("open"); // open メソッドを使用してダイアログ ボックスを開きます


メイン イベント
jQuery UI ダイアログには、ダイアログ ボックスの開閉などのいくつかの追加の処理を行うイベントが用意されています。 :

open: 開くとき
close: 閉じるとき
create: 作成するとき
resize: サイズ変更するとき
drag: ドラッグするとき
使用方法はパラメーターの使用法 (開くときに閉じるボタンを非表示にするなど):

コードをコピーします コードは次のとおりです: $("...").dialog({

//...各種パラメータ

open: function(event, ui) {
$(".ui-dialog -titlebar -close", $(this).parent()).hide();
}
});


特定の用途
以下は、一般的に使用されるプロンプト情報の一部をカプセル化しています。 、これ以上の説明はありません:

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

jQuery.extend(jQuery, {
// jQuery UI アラート ポップアップ プロンプト
jqalert: function(text, title, fn) {
var html =
'< ;div class="ダイアログ" id="ダイアログメッセージ">'
'

'
' ' テキスト
'

';
return $(html) .dialog ({
//autoOpen: false,
resizable: false,
modal: true,
show: {
effect: 'fade',
duration: 300
} ,
title: title || "プロンプトメッセージ",
buttons: {
"OK": function() {
var dlg = $(this).dialog("close") ;
fn && fn.call(dlg);
}
}
});
},
// jQuery UI アラートが表示され、一定の時間が経過すると自動的に閉じます。 🎜>jqtimeralert : function(text, title, fn, timerMax) {
var dd = $(
'

'
' '
' ' 🎜>' '
'

');
dd.dialog({
//) autoOpen: false 、
resizable: false、
modal: true、
show: {
effect: 'fade'、
duration: 300
}、
open: function (e, ui) {
var me = this,
dlg = $(this),
btn = dlg.parent().find(".ui-button-text").text(" OK(" me.timerMax ")");
--me.timerMax;
me.timer = window.setInterval(function() {
btn.text("OK(" me.timerMax " )") ;
if (me.timerMax-- dlg.dialog("close");
fn && fn.call(dlg);
window.clearInterval (me.timer); // 時間切れになったらタイマーをクリア
}
},
title: title || "プロンプト メッセージ",
buttons: {
" OK": function() {
var dlg = $(this).dialog("close");
fn && fn.call(dlg);
window.clearInterval(this. timer); // タイマー
}
},
close: function() {
window.clearInterval(this.timer); // タイマー
}
}) ;
},
// jQuery UI verify は確認プロンプトを表示します
jqconfirm: function(text, title, fn1, fn2) {
var html =
'

'
'

'
' ' テキスト
'

';
return $(html).dialog({
//autoOpen : false,
resizable: false,
modal: true,
show: {
effect: 'fade',
duration: 300
},
タイトル: タイトル | "プロンプト メッセージ"、
ボタン: {
"OK": function() {
var dlg = $(this).dialog("close"); fn1.call( dlg, true);
},
"キャンセル": function() {
var dlg = $(this).dialog("close");
fn2 && fn2( dlg, false) ;
}
}
});
},
// jQuery UI が iframe ウィンドウをポップアップします
jqopen: function(url, options) {
var html =
'

'
' '
'

'; return $( html).dialog( $.extend({
modal: true,
closeOnEscape: false,
ドラッグ可能: false,
サイズ変更可能: false,
close: function(event, ui) {
$( this).dialog("destroy"); //
}
}, options));
},
// jQuery UI 確認プロンプト
確認: function(evt , text, title) {
evt = $.event.fix(evt);
var me = evt.target;
if (me.confirmResult) {
me. confirmResult = false;
return true;
}
jQuery.jqconfirm(text, title, function(e) {
me.confirmResult = true;
if (e) {
if (me.href && $.trim(me.href).indexOf("javascript:") == 0) {
$.globalEval(me.href);
me.confirmResult = false; >return;
}
var t = me.type && me.type.toLowerCase();
if (t == "画像" || t == "送信" || t = = "ボタン")) {
__doPostBack(me.name, "");
me.confirmResult = false;
return;
}
if (me. click) me.click (evt);
}
});


上記のコードには別の問題があります。問題は、ポップアップ ボックスが閉じるたびに破棄されないことです。

解決策は次のとおりです (具体的なデモはありません):

close イベントで破棄します
アラート/確認プロバイダーのダイアログ インスタンスを静的に設定します
外部から呼び出す場合は単一を使用しますダイアログ インスタンス
デモ プログラム
HTML コードは次のとおりです:

コードをコピー


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

🎜 >
対応する js コードは次のとおりです:

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

$(function () {

$("#button1").click(function() {
$.jqalert("これは通常のプロンプトです!");
});
$("#button2 ").click(function() {
$.jqtimeralert("これは自動終了プロンプトです!", "自動終了プロンプト",
function() {
$.jqalert("時間切れです" );
})
});
$("#button3").click(function() {
$.jqconfirm("本当にこれを実行しますか?", "確認プロンプト ",
function() {
$.jqalert("OK をクリック");
},
function() {
$ .jqalert("クリックキャンセル");
});
$("#button4").click(e) {
if ($.confirm(e, "本当にこれを実行しますか?"))
$.jqalert("OK をクリック")
});
$("#button5").click(function(e) {
$.jqopen("http:// lwme.cnblogs.com/", { タイトル: "私のブログ", 幅: 700, 高さ: 500 });
});


サーバーの場合 エンドコントロールで確認を使用するには、次のメソッドが必要になる場合があります:

コードをコピー

コードは次のとおりです: $( "#button4").click(function(e) { if (!$.confirm(e, "よろしいですか?これをするの？」 ")) {

e.stopPropagation();

return false;
}
});


また、jQuery UI で使用されるフォントはこれにより、通常の使用中にダイアログが大きくなる可能性があります。さらに次のスタイルを設定できます:

コードをコピー

コード以下のように: body { font-size: 12px; } //デフォルトのフォント サイズ/*jQuery UI のフェイク*/

.ui-widget { font-size: 1em; }

.ui-dialog .ui-dialog-buttonpane {padding-top: .1em; padding-bottom: .1em; }


このように、ダイアログのサイズは次のようになります。
asp.net ajax の Telerik RadControls での
の使用は、主に Telerik RadButton コントロール用であり、次の 2 つの関数を定義します:

コードをコピー

コードは次のとおりです: // RadButton の確認コールバックに使用され、ボタンのクリックをトリガーします。 function radcallback(s) {

return Function.createDelegate (s , function(argument) {

if (argument) {
this.click();
}
});
}
// 確認プロンプトを追加するために使用されます。 RadButton の場合
function radconfirm2(textOrFn, title, callback) {
return function(s, e) {
$.jqconfirm(textOrFn, title, callback || radcallback(s)); /radconfirm( textOrFn, callback, 280, 50, null, title);
e.set_cancel(true)
}


;これ:

コードをコピー

コードは次のとおりです: 終了 詳細については、jQuery UI ダイアログの公式デモを参照してください:

http ://jqueryui.com/demos/dialog

。

スクリプト ホームのダウンロード アドレス
http://www.jb51.net/jiaoben/15574.html

この記事のデモをダウンロードしますlwme-jquery-ui-dialog-demo。 7z
著者: 囧月出典: http://lwme.cnblogs.com/