封装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]



[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')


[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;
});
});



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

// 提示框
var WSC_ShowTip = function (sender, message, icon, duration, uiState) {
///

/// 显示提示
///

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 = $("

")
.attr("id", id)
.append("") //图标容器
.append("") //消息容器
.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 = $("

")
.attr("id", id)
.append("") //图标容器
.append("") //消息容器
.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) {
///

/// 显示消息
///

if (!title) {
title = WSC_SystemName;
}
if (!icon) {
icon = "Info";
}
//容器
var id = "WSC_Message";
var container = $("#" + id);
if (container.size() == 0) { //不存在则创建
container = $("

").attr("id", id)
.append("") //图标容器
.append("") //消息容器
.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 = div + ""; //图标容器
div = div + "" + message + ""; //消息容器
div = div + "

";

//$('body').append("

" + message + "

");
$('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 = "

";
loadingDiv = loadingDiv + "[list]

[/list]

";

container = $("

" + loadingDiv + "

").attr("id", id)
.append("") //内容容器
.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);

}