jquery2014-08-05 19:30:48 16107
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类