jQuery UI Dialog は使いやすいポップアップダイアログボックスの実装 code

主なパラメータ
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 = $(
'

'
' < ;p> '
' ' 🎜>'

'
'

');
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/