初学javascript，就想动手重写下alter和confirm，自带的真的太丑了,刚看了javascript oo写法,就想着模仿一下,直接上代码
//消息对话框
var MessageBox = (function () {
var
Msg = {
baseUrl: "",
//初始化函数
init: function () {
this.omask = null;
this.messageBox = null;
this.callback = null;
this.frame = null;
this.clientWidth = $(window).width();
this.clientHeight = $(window).height();
this.offsetWidth = $(document).width();
this.offsetHeight = $(document).height();
if($.browser.msie){ //判断ie
this.offsetWidth -= 4;
this.offsetHeight -= 4;
}
$("body").append("<div class=\"messageObody\"></div>");
this.obody = $(".messageObody");
this.obody.width(this.offsetWidth);
this.obody.height(this.offsetHeight);
},
//创建对话框
createMessageBox: function (title, msg, btn, icon) {
if (!title) title = "消息";
if (!msg) msg = "";
var messageBoxDiv = "<div class=\"messageBox\">";
messageBoxDiv += "<div class=\"messageBox-top \">";
messageBoxDiv += "<div class=\"messageBox-top-title messageBox-bg\">" + title + "</div>"
messageBoxDiv += "<div class=\"messageBox-top-close messageBox-bg\" onclick=\"MessageBox.cancle();\"><img src=\"" + this.baseUrl + "img/cancel.png\" /></div>";
messageBoxDiv += "</div>";
messageBoxDiv += "<div class=\"messageBox-content\">";
messageBoxDiv += "<div class=\"messageBox-context-img\">";
if (icon) {
messageBoxDiv += "<img src=\"" + icon + "\"/>";
}
messageBoxDiv += "</div>";
messageBoxDiv += "<div class=\"messageBox-context-msg\">" + msg + "</div>";
messageBoxDiv += "</div>"
messageBoxDiv += "<div class=\"messageBox-button\">";
messageBoxDiv += "[list]";
if (btn == "YESORNO") {
messageBoxDiv += "[*]<a href=\"javascript:MessageBox.cancle();\" class=\"button messageBox-bg\"><img src=\"" + this.baseUrl + "img/cancel.png\" />取消</a>
"
}
messageBoxDiv += "[*]<a href=\"javascript:MessageBox.deter();\" class=\"button messageBox-bg\"><img src=\"" + this.baseUrl + "img/ok.png\" />确定</a>
"
messageBoxDiv += "[/list]";
messageBoxDiv += "</div>";
this.obody.append(messageBoxDiv);
this.messageBox = $(".messageBox");
this.frame = $(".messageBox-top-title");
this.messageBox.css("left", Math.ceil((this.clientWidth - this.messageBox.width()) / 2) + "px");
this.messageBox.css("top", Math.ceil((this.clientHeight - this.messageBox.height()) / 2) + "px");
//鼠标按下事件
this.frame.bind("mousedown", function(){
var point = { x: event.clientX, y: event.clientY };
if (Msg.frame.setCapture) { //防止ie下拖动过快丢失对象
Msg.frame.setCapture();
} else if (window.captureEvents) {
window.captureEvents(event.MOUSEMOVE | event.MOUSEUP);
}
$(document).bind("mousemove", function(){
var
left = Msg.messageBox.css("left"),
top = Msg.messageBox.css("top"),
width = $(document).width(),
height = $(document).height();
left = left.substring(0, left.length - 2);
top = top.substring(0, top.length - 2);
left = event.clientX - point.x + parseInt(left);
top = event.clientY - point.y + parseInt(top);
//超出窗口边界
if(left < 0) left = 0;
else if(left + Msg.messageBox.width() > width)left = width - Msg.messageBox.width() - 1;
if(top < 0) top = 0;
else if(top + Msg.messageBox.height() > height) top = height - Msg.messageBox.height() - 1;
Msg.messageBox.css("left", left + "px");
Msg.messageBox.css("top", top + "px");
point = { x: event.clientX, y: event.clientY };
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //取消选择文本,好像没什么用
});
return false; //返回flase就可以使chorme下 鼠标：move样式丢失
});
//鼠标弹出
$(document).bind("mouseup", function(){
if (Msg.frame.releaseCapture) {
Msg.frame.releaseCapture();
} else if (window.captureEvents) {
window.captureEvents(event.MOUSEMOVE | event.MOUSEUP);
}
$(document).unbind("mousemove");
});
//绑定窗口大小改变事件
$(window).bind("resize", function(){
//没跟新函数里面的值
var
width = $(document).width(),
height = $(window).height();
Msg.omask.width(width);
Msg.omask.height($(document).height());
Msg.messageBox.css("left", Math.ceil((width - Msg.messageBox.width()) / 2) + "px");
Msg.messageBox.css("top", Math.ceil((height - Msg.messageBox.height()) / 2) + "px");
});
},
//带确认按钮的对话框
//title: 标题
//msg: 正文消息
//callback: 关闭文本框后的回调函数
//isModel: 是否有遮罩层 true非模态
alert: function (title, msg, callback, icon, isModel) {
if (!isModel) {
this.mask(); //弹出遮罩
}
this.createMessageBox(title, msg, "YES", icon);
this.callback = callback;
},
//带是和否的对话框
confirm: function (title, msg, callback, icon, isModel) {
if (!isModel) {
this.mask();
}
this.createMessageBox(title, msg, "YESORNO", icon);
this.callback = callback;
},
//隐藏对话框
hide: function () {
if (this.mask) {
this.omask.hide();
}
this.messageBox.hide();
},
//显示隐藏对话框
show: function () {
if (this.omask) {
this.omask.show();
}
this.messageBox.show();
},
//销毁对话框
destory: function (callback) {
$(window).unbind("resize"); //取消窗口大小改变事件
this.obody.remove();
/*this.messageBox.unbind();
if (this.omask) {
this.omask.remove();
}
this.messageBox.remove();*/
},
deter: function () {
this.destory();
if (this.callback) {
this.callback(true);
}
},
cancle: function () {
this.destory();
if (this.callback) {
this.callback(false);
}
},
//遮罩
mask: function () {
var maskDiv = "<div class=\"maskDiv\"></div>";
this.obody.append(maskDiv);
this.omask = $(".maskDiv");
this.omask.width(this.offsetWidth);
this.omask.height(this.offsetHeight);
}
};
return {
//错误图标
ERROR: Msg.baseUrl + "img/icon-error.gif",
//信息图标
INFO: Msg.baseUrl + "img/icon-info.gif",
//疑问图标
QUESTION: Msg.baseUrl + "img/icon-question.gif",
//提醒图标
WARNING: Msg.baseUrl + "img/icon-warning.gif",
alert: function (title, msg, callback, icon, isModel) {
Msg.init();
Msg.alert(title, msg, callback, icon);
},
confirm: function (title, msg, callback, icon, isModel) {
Msg.init();
Msg.confirm(title, msg, callback, icon, isModel);
},
deter: function () {
Msg.deter();
},
//取消按钮
cancle: function () {
Msg.cancle();
}
}
})();用法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="MessageBox.js"></script>
<link href="MessageBox.css" type="text/css" rel="stylesheet" />
</head>
<body >
[url=javascript:test()]confirm[/url]
[url=javascript:MessageBox.alert('提示', 'aa',null, MessageBox.WARNING)]alert[/url]
<script type="text/javascript">
function test(){
MessageBox.confirm('消息', "提示,请登录后在操作!", function(btn){
if(btn){
// alert('你点了是');
}else{
// alert('你点了否');
}
}, MessageBox.ERROR);
}
</script>
</body>
</html>
效果图:
