jquery2014-08-05 19:30:48 16774
Jq制作的对话框插件,包括单按钮,2双按钮,普通对话框和模态对话框。只需要一句代码就可以调用,非常方便。
先说下用法:
MessageBox.Show(aTitle, aMsg, btnNub, aYesFunction, aNoFunction); //初始化参数介绍 aTitle:弹出框标题 必填 aMsg:显示信息 必填 isModal:true或者false,是否为模态窗口(true为模态,false为非模态,不填写默认为非模态) 选填 btnNub:按钮个数(最多为2个,不填写默认为一个) 选填 aYesFunction:点击确定按钮的回调函数(不填写默认为null) 选填 aNoFunction:点击取消按钮的回调函数(不填写默认为null) 选填 //其他属性: MessageBox.mWidth:对话框宽度,默认为300px MessageBox.mHeight:对话框高度,默认为180px MessageBox.isMoving:是否使用动态效果,默认为true MessageBox.titleMaxLength:标题最大长度,默认为10
Js代码:
var MessageBox = {
mWidth: "300",
mHeight: "180",
isMoving: true,
titleMaxLength: 10,
target: null,
bgTar:null,
currentX: 0,
currentY: 0,
Show: function(aTitle, aMsg, isModal,btnNub, aYesFunction, aNoFunction) {
MessageBox.Close();
aMsg = aMsg.length >= this.titleMaxLength ? aMsg.substr(0, this.titleMaxLength) "..." : aMsg;
//浏览器宽度
var browserWidth = $(window).width();
var browserHeight = $(window).height();
if(isModal==true){
$bg = $("");
$bg.css({"width": browserWidth "px","height": browserWidth "px","position": "fixed","top":"0px","left":"0px","z-index": 998,"background-color": "#efefef","opacity":"0.5"});
$("body").append($bg);
MessageBox.bgTar=$bg;
$bg.click(function(){
});
}
$box = $("");
MessageBox.target = $box;
$box.css({"width": "0px","height": "0px","position": "fixed","border": "1px solid #ccc","z-index": 999,"background-color": "#fff"});
$title = $("");
$title.css({"width": "100%","border-bottom": "1px solid #ccc"});
$title.find("h3").css({"line-height": "20px","padding": "5px 0 5px 10px","margin": "0","font": "15px "微软雅黑", Arial, Helvetica, sans-serif"});
$title.find("h3").html(aTitle);
$title.hover(function() {
$title.css({
"cursor": "move"
});
});
var drog = false;
$title.mousedown(function(e) {
drog = true;
MessageBox.currentX = e.pageX;
MessageBox.currentY = e.pageY;
$("body").mousemove(function(e) {
if (drog == true) MessageBox.Drog(e);
});
});
$("body").mouseup(function() {
drog = false;
});
$box.append($title);
if (MessageBox.isMoving == true) {
$box.animate({
width: this.mWidth "px",
height: this.mHeight "px",
"left": browserWidth / 2 - this.mWidth / 2 "px",
"top": browserHeight / 2 - this.mHeight / 2 "px"
}, 300);
} else {
$box.css("width", this.mWidth "px").css("height", this.mHeight "px");
}
$box.hover(function() {$box.css({"-webkit-box-shadow": "0px 0px 8px #ccc","-moz-box-shadow": "0px 0px 8px #ccc","box-shadow": "0px 0px 8px #ccc"});
}, function() {
$box.css({"-webkit-box-shadow": "0px 0px 5px #ccc","-moz-box-shadow": "0px 0px 5px #ccc","box-shadow": "0px 0px 5px #ccc"});
});
$center = $("");
$center.html(aMsg);
$center.css({"height": MessageBox.mHeight - 80 "px","width": "95%","margin": "0 auto","margin-top": "5px","color": "#808080","font": "13px "微软雅黑", Arial, Helvetica, sans-serif"});
$box.append($center);
$foot = $("");
$foot.css({"height": "39px","width": "100%","margin-top": "5px","background-color": "#efefef"});
if (btnNub == 2) {
$btnNo = $("取消");
$btnNo.css({
"font": "13px "微软雅黑", Arial, Helvetica, sans-serif",
"-webkit-border-radius": "3px",
"-moz-border-radius": "3px",
"border-radius": "3px",
"float": "right",
"padding": "3px 10px 3px 10px",
"margin": "5px 10px 0 0",
"cursor": "pointer",
"background-color": "#fff",
"border": "1px solid #ccc"
});
$btnNo.hover(function() {
$btnNo.css("background-color", "#efefef");
}, function() {
$btnNo.css("background-color", "#fff");
});
$foot.append($btnNo);
$btnNo.click(function() {
if (aNoFunction != null) aNoFunction();
MessageBox.Close();
});
}
$btnYes = $("确定");
$btnYes.attr("class", "button");
$btnYes.css({"font": "13px "微软雅黑", Arial, Helvetica, sans-serif","-webkit-border-radius": "3px","-moz-border-radius": "3px","border-radius": "3px","float": "right","padding": "3px 10px 3px 10px","margin": "5px 10px 0 0",
"cursor": "pointer",
"background-color": "#fff",
"border": "1px solid #ccc"
});
$btnYes.hover(function() {$btnYes.css("background-color", "#efefef");}, function() {$btnYes.css("background-color", "#fff");});
$foot.append($btnYes);
$btnYes.click(function() {
if (aYesFunction != null) aYesFunction();
MessageBox.Close();
});
$box.append($foot);
$("body").append($box);
},
//关闭
Close: function() {
$(this.target).remove();
if(this.bgTar!=null)$(this.bgTar).remove();
},
//拖动
Drog: function(e) {
var x = e.pageX;
var y = e.pageY;
var cy = $box.offset().top - $(document.body).scrollTop() (y - $(document.body).scrollTop() - (MessageBox.currentY - $(document.body).scrollTop()));
$("#headMenuItema").html(cy);
$box.css("left", $box.offset().left (x - MessageBox.currentX) "px").css("top", cy "px");
MessageBox.currentX = x;
MessageBox.currentY = y;
}
}
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:Jq对话框插件,Jq是否选择对话框,Jq模态对话框
文章固定链接:https://www.pengyaou.com/legendsz/front/codejq/NzU=.html
上一篇 JqueryCombox选择框
下一篇 javascript类