|
/**
*项目名：IBMETP常熟ETP主页
*文件名：MessageBox.js
*作者：李明成
*创建时间：2009-12-21
*当前版本：1.0
*最后修改时间：2009-12-23 22:00
*功能说明：实现页面中弹出消息窗口Js 封装
*/
/**以下定义全局操作函数**/
//是否是IE
var isIE = (document.all) ? true : false;
//$ id选择器
var $ = function(id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
//Class 类对象
var Class = {
create: function() {
return function() { this.initialize.apply(this, arguments); }
}
}
//函数绑定
var Bind = function(object, fun) {
return function() {
return fun.apply(object, arguments);
}
}
//For Each循环
var Each = function(list, fun) {
for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};
var MessageBox = Class.create();
MessageBox.prototype = {
initialize: function(id){
//弹出框宽度
this._boxWidth = 400;
//弹出框高度
this._boxHeight = 180;
//标题
this._title = "";
this._titleId ="";
this._message = "";
this._messageId ="";
this._info = "";
this._boxId = id;
//附加消息框
this.appendBody();
//初始化消息框
this.initMessageBox();
},
appendBody : function(){
//创建用于显示的对话框容器
var messageBox = document.createElement("div");
messageBox.id = this._boxId;
document.body.appendChild(messageBox);
//创建用于显示遮罩容器
var messageBoxMask = document.createElement("div");
messageBoxMask.id = this._boxId + "Mask";
document.body.appendChild(messageBoxMask);
},
show : function(title, message){
//只传如一个参数的情况
if(!message){
//警告显示
this.alert(title);
}
this._title = title;
this._message = message;
this.popup();
},
//模仿系统alert
alert : function(message){
this._title = "来自页面的提示信息";
this._message = message;
this.popup();
},
//弹出窗口
popup : function() {
$(this._titleId).innerHTML = this._title;
$(this._messageId).innerHTML = this._message;
if(isIE){
$(this._boxId).style.pixelWidth = this._boxWidth;
//控制高度
//$(this._boxId).style.pixelHeight = this._boxHeight;
//控制最小宽度
//$(this._boxId).style.minHeight = this._boxHeight;
$(this._boxId).style.pixelLeft = Math.ceil(document.body.clientWidth - this._boxWidth) / 2;
//尚未实现
$(this._boxId).style.pixelTop = Math.ceil(Math.abs((document.body.clientHeight - this._boxHeight) / 2)) + document.body.scrollTop;
//设置遮罩属性
$(this._boxId + "Mask").style.pixelWidth = document.body.clientWidth;
$(this._boxId + "Mask").style.pixelHeight = document.body.clientHeight;
}
else{
$(this._boxId).style.width = this._boxWidth + "px";
$(this._boxId).style.left = Math.ceil((document.body.clientWidth - this._boxWidth) / 2) + "px";
//尚未实现
$(this._boxId).style.top = Math.ceil(Math.abs((document.body.clientHeight - this._boxHeight) / 2)) + document.body.scrollTop + "px";
//设置遮罩属性
$(this._boxId + "Mask").style.width = document.body.clientWidth + "px";
$(this._boxId + "Mask").style.height = document.body.clientHeight + "px";
}
//隐藏选择框
this.hiddeSelect();
//显示提示窗口
$(this._boxId).style.display = "block";
//显示遮罩层
$(this._boxId + "Mask").style.display = "block";
},
close : function(message){
$(this._boxId).style.display = "none";
$(this._boxId + "Mask").style.display = "none";
//恢复选择框
this.showSelect();
},
//Ok按钮CallBack
btnOk : function(){
this.close();
return true;
},
//取消按钮CallBack
btnCancel : function(){
this.close();
return false;
},
//创建按钮
createButton : function(caption , callback){
//追加按钮
var button = document.createElement("a");
button.innerHTML = caption;
button.className = "button";
button.onclick = Bind(this, callback);
return button;
},
//以下代码用于选择框（SELECT）的控制，适用于IE6及以下版本
//隐藏选择框
hiddeSelect : function(){
var sels = $(document).getElementsByTagName("select");
Each(sels , function(sel){sel.style.visibility = "hidden";});
},
//显示选择框
showSelect : function(){
var sels = $(document).getElementsByTagName("select");
Each(sels , function(sel){sel.style.visibility = "visible";});
},
//初始化消息窗口
initMessageBox : function(){
var container = $(this._boxId);
//对话框标题
var msgTop = document.createElement("h2");
//对话框标题内容
var msgTitle = document.createElement("span");
//使用时间来设置唯一ID
msgTitle.id = "MsgTitle" + new Date().getTime().toString();
this._titleId = msgTitle.id;
//关闭按钮
var msgTopClose = document.createElement("a");
msgTopClose.className="right";
msgTopClose.onclick = Bind(this, this.close);
msgTopClose.innerHTML="关闭";
//追加
//首先添加关闭按钮，居右显示
msgTop.appendChild(msgTopClose);
msgTop.appendChild(msgTitle);
//添加内容元素
var msgContent = document.createElement("p");
msgContent.className = "content";
//使用时间来设置唯一ID
msgContent.id = "MsgContent" + new Date().getTime().toString();
this._messageId = msgContent.id;
//添加按钮
var msgButtons = document.createElement("p");
msgButtons.className = "buttons";
//追加确定按钮
msgButtons.appendChild(this.createButton("确定",this.btnOk));
//追加取消按钮
msgButtons.appendChild(this.createButton("取消",this.btnCancel));
//追加元素
container.appendChild(msgTop);
container.appendChild(msgContent);
container.appendChild(msgButtons);
}
}
|
