主要參數(shù)
jQuery UI Dialog常用的參數(shù)有：
1、autoOpen：默認(rèn)true，即dialog方法創(chuàng)建就顯示對話框
2、buttons：默認(rèn)無，用于設(shè)置顯示的按鈕，可以是JSON和Array形式:
{"確定":function(){},"取消":function(){}}
[{text:"確定", click: function(){}},{text:"取消",click:function(){}}]
3、modal：默認(rèn)false，是否模態(tài)對話框，如果設(shè)置為true則會創(chuàng)建一個遮罩層把頁面其他元素遮住
4、title：標(biāo)題
5、draggable：是否可手動，默認(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)閉對話框
2、show：打開對話框的動畫效果
3、hide：關(guān)閉對話框的動畫效果
4、position：對話框顯示的位置，默認(rèn)"center"，可以設(shè)置成字符串或數(shù)組：
'center', 'left', 'right', 'top', 'bottom'
['right','top']，通過上面的幾個字符串組合(x,y)
[350,100]，絕對的數(shù)值(x,y)
5、minWidth：默認(rèn)150，最小寬度
6、minHeight：默認(rèn)150，最小高度
使用方法：
代碼如下:
$("...").dialog({
title: "標(biāo)題",
//...更多參數(shù)
});
主要方法
jQuery UI Dialog提供了一些方法來控制對話框，僅列出常用的：
open：打開對話框
close：關(guān)閉對話框（通過close不會銷毀，還能繼續(xù)使用）
destroy：銷毀對話框
option：設(shè)置參數(shù)，即前面列出的參數(shù)
使用的時候作為dialog方法的參數(shù)：
代碼如下:
var dlg = $("...").dialog({
//...各種參數(shù)
});
dlg.dialog("option", { title: "標(biāo)題" }); // 設(shè)置參數(shù)
dlg.dialog("open"); // 使用open方法打開對話框
主要事件
jQuery UI Dialog提供了一些事件，比如打開、關(guān)閉對話框的時候做一些額外的事情：
open：打開時
close：關(guān)閉時
create：創(chuàng)建時
resize：調(diào)整大小時
drag：拖動時
使用方法同參數(shù)的使用方法，比如在打開時隱藏關(guān)閉按鈕：
代碼如下:
$("...").dialog({
//...各種參數(shù)
open: function(event, ui) {
$(".ui-dialog-titlebar-close", $(this).parent()).hide();
}
});
具體使用
以下封裝了一些常用的提示信息，不再詳細(xì)解釋：
代碼如下:
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");
