jQuery UI Dialog 創(chuàng)建友好的彈出對(duì)話框?qū)崿F(xiàn)代碼

更新時(shí)間：2012年04月12日 16:48:55 作者：

jQuery UI Dialog是jQuery UI的彈出對(duì)話框組件，使用它可以創(chuàng)建各種美觀的彈出對(duì)話框；它可以設(shè)置對(duì)話框的標(biāo)題、內(nèi)容，并且使對(duì)話框可以拖動(dòng)、調(diào)整大小、及關(guān)閉；平常主要用來(lái)替代瀏覽囂自帶的alert、confirm、open等方法

主要參數(shù)
jQuery UI Dialog常用的參數(shù)有：

1、autoOpen：默認(rèn)true，即dialog方法創(chuàng)建就顯示對(duì)話框
2、buttons：默認(rèn)無(wú)，用于設(shè)置顯示的按鈕，可以是JSON和Array形式:
{"確定":function(){},"取消":function(){}}
[{text:"確定", click: function(){}},{text:"取消",click:function(){}}]
3、modal：默認(rèn)false，是否模態(tài)對(duì)話框，如果設(shè)置為true則會(huì)創(chuàng)建一個(gè)遮罩層把頁(yè)面其他元素遮住
4、title：標(biāo)題
5、draggable：是否可手動(dòng)，默認(rèn)true
6、resizable：是否可調(diào)整大小，默認(rèn)true
7、width：寬度，默認(rèn)300
8、height：高度，默認(rèn)"auto"
其他一些不太常用的參數(shù)：

1、closeOnEscape：默認(rèn)true，按esc鍵關(guān)閉對(duì)話框
2、show：打開(kāi)對(duì)話框的動(dòng)畫(huà)效果
3、hide：關(guān)閉對(duì)話框的動(dòng)畫(huà)效果
4、position：對(duì)話框顯示的位置，默認(rèn)"center"，可以設(shè)置成字符串或數(shù)組：
'center', 'left', 'right', 'top', 'bottom'
['right','top']，通過(guò)上面的幾個(gè)字符串組合(x,y)
[350,100]，絕對(duì)的數(shù)值(x,y)
5、minWidth：默認(rèn)150，最小寬度
6、minHeight：默認(rèn)150，最小高度
使用方法：

復(fù)制代碼代碼如下:

 
$("...").dialog({ 
title: "標(biāo)題", 
//...更多參數(shù) 
}); 

主要方法
jQuery UI Dialog提供了一些方法來(lái)控制對(duì)話框，僅列出常用的：

open：打開(kāi)對(duì)話框
close：關(guān)閉對(duì)話框（通過(guò)close不會(huì)銷(xiāo)毀，還能繼續(xù)使用）
destroy：銷(xiāo)毀對(duì)話框
option：設(shè)置參數(shù)，即前面列出的參數(shù)
使用的時(shí)候作為dialog方法的參數(shù)：

復(fù)制代碼代碼如下:

 
var dlg = $("...").dialog({ 
//...各種參數(shù) 
}); 
dlg.dialog("option", { title: "標(biāo)題" }); // 設(shè)置參數(shù) 
dlg.dialog("open"); // 使用open方法打開(kāi)對(duì)話框 

主要事件
jQuery UI Dialog提供了一些事件，比如打開(kāi)、關(guān)閉對(duì)話框的時(shí)候做一些額外的事情：

open：打開(kāi)時(shí)
close：關(guān)閉時(shí)
create：創(chuàng)建時(shí)
resize：調(diào)整大小時(shí)
drag：拖動(dòng)時(shí)
使用方法同參數(shù)的使用方法，比如在打開(kāi)時(shí)隱藏關(guān)閉按鈕：

復(fù)制代碼代碼如下:

 
$("...").dialog({ 
//...各種參數(shù) 
open: function(event, ui) { 
$(".ui-dialog-titlebar-close", $(this).parent()).hide(); 
} 
}); 

具體使用
以下封裝了一些常用的提示信息，不再詳細(xì)解釋?zhuān)?

復(fù)制代碼代碼如下:

 
jQuery.extend(jQuery, { 
// jQuery UI alert彈出提示 
jqalert: function(text, title, fn) { 
var html = 
'<div class="dialog" id="dialog-message">' + 
' <p>' + 
' <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 0 0;"></span>' + text + 
' </p>' + 
'</div>'; 
return $(html).dialog({ 
//autoOpen: false, 
resizable: false, 
modal: true, 
show: { 
effect: 'fade', 
duration: 300 
}, 
title: title || "提示信息", 
buttons: { 
"確定": function() { 
var dlg = $(this).dialog("close"); 
fn && fn.call(dlg); 
} 
} 
}); 
}, 
// jQuery UI alert彈出提示,一定間隔之后自動(dòng)關(guān)閉 
jqtimeralert: function(text, title, fn, timerMax) { 
var dd = $( 
'<div class="dialog" id="dialog-message">' + 
' <p>' + 
' <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 0 0;"></span>' + text + 
' </p>' + 
'</div>'); 
dd[0].timerMax = timerMax || 3; 
return 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("確定(" + me.timerMax + ")"); 
--me.timerMax; 
me.timer = window.setInterval(function() { 
btn.text("確定(" + me.timerMax + ")"); 
if (me.timerMax-- <= 0) { 
dlg.dialog("close"); 
fn && fn.call(dlg); 
window.clearInterval(me.timer); // 時(shí)間到了清除計(jì)時(shí)器 
} 
}, 1000); 
}, 
title: title || "提示信息", 
buttons: { 
"確定": function() { 
var dlg = $(this).dialog("close"); 
fn && fn.call(dlg); 
window.clearInterval(this.timer); // 清除計(jì)時(shí)器 
} 
}, 
close: function() { 
window.clearInterval(this.timer); // 清除計(jì)時(shí)器 
} 
}); 
}, 
// jQuery UI confirm彈出確認(rèn)提示 
jqconfirm: function(text, title, fn1, fn2) { 
var html = 
'<div class="dialog" id="dialog-confirm">' + 
' <p>' + 
' <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>' + text + 
' </p>' + 
'</div>'; 
return $(html).dialog({ 
//autoOpen: false, 
resizable: false, 
modal: true, 
show: { 
effect: 'fade', 
duration: 300 
}, 
title: title || "提示信息", 
buttons: { 
"確定": function() { 
var dlg = $(this).dialog("close"); 
fn1 && fn1.call(dlg, true); 
}, 
"取消": function() { 
var dlg = $(this).dialog("close"); 
fn2 && fn2(dlg, false); 
} 
} 
}); 
}, 
// jQuery UI 彈出iframe窗口 
jqopen: function(url, options) { 
var html = 
'<div class="dialog" id="dialog-window" title="提示信息">' + 
' <iframe src="' + url + '" frameBorder="0" style="border: 0; " scrolling="auto" width="100%" height="100%"></iframe>' + 
'</div>'; 
return $(html).dialog($.extend({ 
modal: true, 
closeOnEscape: false, 
draggable: false, 
resizable: false, 
close: function(event, ui) { 
$(this).dialog("destroy"); // 關(guān)閉時(shí)銷(xiāo)毀 
} 
}, options)); 
}, 
// jQuery UI confirm提示 
confirm: 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 && me.name && (t == "image" || t == "submit" || t == "button")) { 
__doPostBack(me.name, ""); 
me.confirmResult = false; 
return; 
} 
if (me.click) me.click(evt); 
} 
return false; 
}); 
return false; 
} 
}); 

以上代碼還存在一個(gè)問(wèn)題，就是每次彈出框關(guān)閉之后都沒(méi)有銷(xiāo)毀。

解決辦法有（具體不演示）：

在close事件里面destroy
把a(bǔ)lert/confirm提供里的dialog實(shí)例設(shè)置成靜態(tài)的
在外部調(diào)用使用單個(gè)dialog實(shí)例
演示程序
html代碼如下：

復(fù)制代碼代碼如下:

 
<div> 
<input type="button" id="button1" value="普通提示" /> 
<input type="button" id="button2" value="自動(dòng)關(guān)閉提示" /> 
<input type="button" id="button3" value="確認(rèn)提示" /> 
<input type="button" id="button4" value="確認(rèn)提示2" /> 
<input type="button" id="button5" value="打開(kāi)窗口" /> 
</div> 

相應(yīng)js代碼如下：

復(fù)制代碼代碼如下:

 
$(function() { 
$("#button1").click(function() { 
$.jqalert("這是普通提示！"); 
}); 
$("#button2").click(function() { 
$.jqtimeralert("這是自動(dòng)關(guān)閉的提示！", "自動(dòng)關(guān)閉提示", 
function() { 
$.jqalert("時(shí)間到"); 
}); 
}); 
$("#button3").click(function() { 
$.jqconfirm("確定要這么做嗎？", "確認(rèn)提示", 
function() { 
$.jqalert("點(diǎn)了確定"); 
}, 
function() { 
$.jqalert("點(diǎn)了取消"); 
}); 
}); 
$("#button4").click(function(e) { 
if ($.confirm(e, "確定要這么做嗎？")) 
$.jqalert("點(diǎn)了確定"); 
}); 
$("#button5").click(function(e) { 
$.jqopen("http://lwme.cnblogs.com/", { title: "我的博客", width: 700, height: 500 }); 
}); 
}); 

對(duì)于服務(wù)器端控件使用confirm，可能需要如下方法：

復(fù)制代碼代碼如下:

 
$("#button4").click(function(e) { 
if (!$.confirm(e, "確定要這么做嗎？")) { 
e.stopPropagation(); 
return false; 
} 
}); 

額外再提一下，jQuery UI使用的字體都是以em為單位，可能會(huì)導(dǎo)致平常使用時(shí)dialog變得比較大，可以額外設(shè)置以下樣式：

復(fù)制代碼代碼如下:

 
body { font-size: 12px; } // 默認(rèn)字體大小 
/*jQuery UI fakes*/ 
.ui-widget { font-size: 1em; } 
.ui-dialog .ui-dialog-buttonpane { padding-top: .1em; padding-bottom: .1em; } 

這樣子，dialog的大小看起來(lái)就比較正常了。
在Telerik RadControls for asp.net ajax中使用
主要是針對(duì)telerik RadButton控件，定義如下兩個(gè)函數(shù)：

復(fù)制代碼代碼如下:

 
// 用于RadButton的confirm確認(rèn)回調(diào)，即觸發(fā)按鈕點(diǎn)擊 
function radcallback(s) { 
return Function.createDelegate(s, function(argument) { 
if (argument) { 
this.click(); 
} 
}); 
} 
// 用于為RadButton添加confirm提示 
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); 
}; 
} 

然后可以這樣使用：

復(fù)制代碼代碼如下:

<telerik:RadButton ... OnClientClicking="radconfirm2('確定要這么做嗎?')" /> 

結(jié)尾
更多的資料請(qǐng)看jQuery UI Dialog官方演示：http://jqueryui.com/demos/dialog。
腳本之家下載地址 http://www.dhdzp.com/jiaoben/15574.html
本文演示下載 lwme-jquery-ui-dialog-demo.7z
作者：囧月
出處：http://lwme.cnblogs.com/

您可能感興趣的文章: