封装JQuery Dialog实现Dialog、Tip、alert和confirm

继续回馈ITEYE， 绝对原创，封装JQuery Dialog实现Dialog、Tip、类似alert和confirm的MessageBox，项目使用中，如有bug请指正。

Dialog可以显示定义好的Div，也可以传入网址url，一般我们用于显示网页传入url，因为如果是显示本页div的话就没必要调用该函数，直接$('#divName').dialog('open')....就行了。

style效果引用了JQuery CSS，体现为方法的uiState参数，具体可参考jquery-ui-1.8.23.custom.css文件中定义的样式。

[b]dialog中图标自定义用到的样式：[/b]

<style type="text/css">
body
{ font-size: 9pt; font-family: "Microsoft YaHei", 微软雅黑; color: #000000; margin: 20px; }
.ImageLoading { background-image: url('css/images/Loading.gif'); background-repeat: no-repeat; background-color: Transparent; width: 26px; height: 16px; border-style: none; }
.ImageLoadingText { background-image: url('css/images/loading_text.gif'); background-repeat: no-repeat; background-color: Transparent; width: 39px; height: 5px; border-style: none; }
ul { margin: 0px; padding: 0px; list-style-type: none; }
li { float: left; }

/* JQuery对话框 */
.DialogIcon { display: block; width: 29px; height: 31px; overflow: hidden; background-image: url('css/images/WSC_DialogIcon.png'); background-repeat: no-repeat; text-indent: -99999px; }
.DialogIconInfo { background-position: 0px 0px; }
.DialogIconWarning { background-position: -24px 0px; }
.DialogIconError { background-position: -48px 0px; }
.DialogIconQuestion{ display: block; width: 29px; height: 31px; overflow: hidden; background-image: url('css/images/delete.png'); background-repeat: no-repeat; text-indent: -99999px; }
.contentSectionWhite { border: 1px solid #CCCCCC; background-color: white; border-radius: 4px; padding:10px; margin: 0px 0 10px; -moz-box-shadow:0 0 10px #C4C4C4; -webkit-box-shadow:0 0 10px #C4C4C4; box-shadow:0 0 10px #C4C4C4; }

</style>

[color=red]特别提示，JS运行是和代码中引用顺序有关的，一定要在实际调用前引用JQuery库。[/color]

运行前提：
引用JQuery的JS库和CSS文件，不是一定要用下面涉及到的版本，这只是我用到的版本：
jquery-1.8.1.min.js
jquery-ui-1.8.23.custom.min.js
jquery-ui-1.8.23.custom.css


效果如附件
[img]http://dl.iteye.com/upload/attachment/0074/5572/dbb4e2c1-913d-3b2e-a748-fa016d639127.png[/img]
[img]http://dl.iteye.com/upload/attachment/0074/5574/234fa626-91b9-3c05-a3de-6979520b2ac9.png[/img]

[color=darkred][b]调用示列：[/b][/color]
[b]Tip调用：[/b]
//第一个参数是对象，所以此处需要传入document.getElementById('xx')
<input name="GridViewPager:btnPageF" id="GridViewPager_btnPageF" οnmοuseοver="WSC_ShowPersistentTip(document.getElementById('GridViewPager_btnPageF'), '首页', 'x', 100, 'ui-state-active', 'Bottom');" οnmοuseοut="WSC_HidePersistentTip();" src="PagerImages/nv_First2.gif" border="0" type="image">

[b]Dialog调用：[/b]
// 初始化
$(function () {
// 新增

$("#btnAdd").click(function () {
WSC_ShowDialog("WSC_UserEdit.aspx?ACTION=NEW&LOGIN_NAME=", 810, 300, "新增用户");
return false;
});

// 编辑

$(".JQueryDialog").click(function () {
WSC_ShowDialog("WSC_UserEdit.aspx?ACTION=EDIT&LOGIN_NAME=" + escape($(this).attr("title")), 810, 300, "编辑用户");
return false;
});
});
</script>


=========================================================
[color=darkred][b]JS代码：[/b][/color]

// 提示框
var WSC_ShowTip = function (sender, message, icon, duration, uiState) {
/// <summary>
/// 显示提示
/// </summary>
if (typeof (sender) != "object") {
return;
}
if (!icon) {
icon = "info";
}
if (!duration) {
duration = 200;
}
if (!uiState)
uiState = "ui-state-active";

//容器
var id = "WSC_Tip";
var container = $("#" + id);
if (container.size() == 0) { //不存在则创建
container = $("<div id='WSC_JQueryDialogAutoGenTipDiv' class='" + uiState + " ui-corner-all ui-helper-hidden' style='padding: 5px; position: absolute; z-index:999999;'></div>")
.attr("id", id)
.append("<span style='float: left; margin: 2px 0px 0px 0px;'></span>") //图标容器
.append("<span style='display: block; margin: 2px 0px 2px 20px;'></span>") //消息容器
.appendTo($(document.body));
}

//图标
container.children("span:first")
.removeClass()
.addClass("ui-icon").addClass("ui-icon-" + icon);

//消息
container.children("span:last").html(message);

//呈现位置
var senderPosition = $(sender).position();

container
.stop(true, true) //初始化动画
.css("left", senderPosition.left + $(sender).outerWidth() + 2).css("top", senderPosition.top) //位置
.fadeIn() //显示
//.delay(duration)
.fadeOut(duration); //隐藏
};

var persistentTipContainer;

// 显示持久提示信息
var WSC_ShowPersistentTip = function (sender, message, icon, duration, uiState, pos) {
//persistentTipContainer = null;

if (typeof (sender) != "object") {
return;
}

if (!icon) {
icon = "info";
}

if (!duration) {
duration = 50;
}

if (!uiState)
uiState = "ui-state-active";

if (!pos)
pos = "right";
pos = pos.toLowerCase();
if (pos != "left" && pos != "right" && pos != "top" && pos != "bottom")
pos = "right";

//容器
var id = "WSC_Tip";
persistentTipContainer = $("#" + id);
if (persistentTipContainer.size() == 0) { //不存在则创建
persistentTipContainer = $("<div id='WSC_JQueryDialogAutoGenTipDiv' class='" + uiState + " ui-corner-all ui-helper-hidden' style='padding: 5px; position: absolute; z-index:999999;'></div>")
.attr("id", id)
.append("<span style='float: left; margin: 2px 0px 0px 0px;'></span>") //图标容器
.append("<span style='display: block; margin: 2px 0px 2px 20px;'></span>") //消息容器
.appendTo($(document.body));
}

//样式
persistentTipContainer.removeClass()
.addClass(uiState).addClass("ui-corner-all").addClass("ui-helper-hidden");

//图标
persistentTipContainer.children("span:first")
.removeClass()
.addClass("ui-icon").addClass("ui-icon-" + icon);

//消息
persistentTipContainer.children("span:last").html(message);

//呈现位置
var senderPosition = $(sender).position();
var left = 0, top = 0;
if (pos == "right") {
left = senderPosition.left + $(sender).outerWidth() + 2;
top = senderPosition.top;
}
else if (pos == "left") {
left = senderPosition.left - persistentTipContainer.outerWidth() - 2;
top = senderPosition.top;
}
else if (pos == "top") {
left = senderPosition.left;
top = senderPosition.top - $(sender).outerHeight() - 2;
}
else if (pos == "bottom") {
left = senderPosition.left;
top = senderPosition.top + $(sender).outerHeight() + 2;
}

persistentTipContainer
.stop(true, true) //初始化动画
.css("left", left).css("top", top) //位置
.fadeIn(duration) //显示
.delay('slow');
};

// 隐藏持久提示信息
var WSC_HidePersistentTip = function () {
persistentTipContainer
//.delay(10)
.hide();
//.fadeOut("slow"); //隐藏
};

// 消息框
WSC_ShowMessage = function (message, title, icon) {
/// <summary>
/// 显示消息
/// </summary>
if (!title) {
title = WSC_SystemName;
}
if (!icon) {
icon = "Info";
}
//容器
var id = "WSC_Message";
var container = $("#" + id);
if (container.size() == 0) { //不存在则创建
container = $("<div id='WSC_JQueryDialogAutoGenMessageDiv' class='ui-helper-hidden' style='margin:16px 0px 0px 2px; z-index:999999;'></div>").attr("id", id)
.append("<span style='float: left; width: 24px; height: 24px;'></span>") //图标容器
.append("<span style='display: block; margin: 2px 0px 0px 36px;'></span>") //消息容器
.appendTo($(document.body))
.dialog({
autoOpen: false,
modal: true,
buttons: [
{
text: "OK",
click: function () { $(this).dialog("close"); }
}
],
minWidth: 320,
minHeight: 160,
show: "fade",
hide: "fade"
});
}
//标题
container.dialog("option", "title", title);
//图标
container.children("span:first")
.removeClass()
.addClass("DialogIcon").addClass("DialogIcon" + icon);
//消息
container.children("span:last").html(message);
//呈现
container.dialog("open");
};


// 确认框
var dialogConfirmed = false;

ShowConfirmationDialog = function ConfirmDialog(obj, title, message, icon) {
if (!title)
title = "确认";

if (!icon) {
icon = "Info";
}
if (!message)
message = "确认吗？";

if (!dialogConfirmed) {
var div = "<div id='WSC_JQueryDialogAutoGenConfirmationDiv' style='margin:16px 0px 0px 2px; z-index:999999;' title='" + title + "'>";
div = div + "<span style='float: left; width: 24px; height: 24px;' class='DialogIcon DialogIcon" + icon + "'></span>"; //图标容器
div = div + "<span style='display: block; margin: 2px 0px 0px 36px;'>" + message + "</span>"; //消息容器
div = div + "</div>";

//$('body').append("<div id='WSC_DialogConfirmation' title='" + title + "'>" + message + "
</div>");
$('body').append(div);

$('#WSC_JQueryDialogAutoGenConfirmationDiv').dialog({
autoOpen: false,
minWidth: 320,
minHeight: 160,
modal: true,
title: title,
overlay: { opacity: 0.5, background: "black", overflow: "auto" },
show: "fade",
hide: "fade",
close: function (event, ui) { $('body').find('#WSC_JQueryDialogAutoGenConfirmationDiv').remove(); },
buttons:
{
'Yes': function () {
$(this).dialog('close');
dialogConfirmed = true;
if (obj) obj.click();
},
'No': function () {
$(this).dialog('close');
}
}
});

$('#WSC_JQueryDialogAutoGenConfirmationDiv').dialog("open");
}

return dialogConfirmed;
}

var WSC_SystemName = "WSC";

// 对话框
WSC_ShowDialog = function (url, width, height, title) {
if (!title) {
title = WSC_SystemName;
}

//容器
var id = "WSC_Dialog";
var container = $("#" + id);
if (container.size() == 0) { //不存在则创建

var loadingDiv = "<div id='WSC_JQueryDialogLoading' class='contentSectionWhite' style='display: block; background-color:White; width:92px; height:20px; margin: 120px auto auto 40%; position:absolute;'>";
loadingDiv = loadingDiv + "[list]<li class='ImageLoading' style=' width:30px;'></li><li class='ImageLoadingText' style='margin: 8px 0px 0px 2px; width:60px;'></li>[/list]</div>";

container = $("<div id='WSC_JQueryDialogAutoGenDiv' class='ui-helper-hidden' style='z-index:999990;'>" + loadingDiv + "</div>").attr("id", id)
.append("<iframe frameborder='0' style='width: 100%; height: 100%;'></iframe>") //内容容器
.appendTo($(document.body))
.dialog({
autoOpen: false,
modal: true,
minWidth: 320,
minHeight: 220,
show: "fade",
hide: "blind",
open: function (event, ui) {
DelayToShowLoading();
},
close: function (event, ui) {
$(this).children("iframe:first").removeAttr("src"); //清除内容
}
});
}

$("#WSC_JQueryDialogLoading").css("display", "block");

//标题
container.dialog("option", "title", title);
//尺寸
container.dialog("option", "width", width).dialog("option", "height", height);
//内容
container.children("iframe:first").attr("src", url);
//呈现
container.dialog("open");
};

var count = 0;
function DelayToShowLoading() {

count++;
if (count > 2) {
$("#WSC_JQueryDialogLoading").css("display", "none");
count = 0;
return true;
}
window.setTimeout("DelayToShowLoading()", 800);

}