自制轻量级仿jQuery.boxy对话框插件代码_jquery

对此，jquery.boxy插件已经做得非常强大了，常用的提示、确认，拖拽、改变大小、异步加载都非常实用，导致文件较大（可忽略不计），很多功能并不需要，为此，抱着在边学边实践的态度和想法，自制一款适用于本项目的轻量级弹出层插件，这是第一次写jqeury插件，也为了以后能将常用操作封装为jquery插件做准备吧。

首先来个插件名字，这样才能去唬人，就叫jquey.cvbox.min.js吧，cv就是网站域名ChinaValue的缩写，压缩后的容量控制在6K以下。因为还未完成，所以先将思想记录下来。

1.在页面增加用来显示内容的容器元素，以及弹出层的背景，仅只需要有就可以了，至于说在哪儿出生（也就是显示在页面什么位置）、长成什么样儿，后边会培养（设置），样子自然要由美术指导来打扮了。
2.根据我们的需要，我们事先定义好常用的一些对象，比如说遮罩的背景、弹出层的容器、弹出层的标题栏、弹出层的内容区域、以及当前浏览器窗口的高宽等，有了这些，在后边的使用中就方便多了。
3.开始往容器中塞内容，内容可以是一句提示语（对应提示功能），可以是询问语（对应确认框），可以是一张图片（比如用于小图放大），还可以是一段HTML代码（代替直接在JS中写HTML的不便）。
4.定义用户点击关闭的事件，也就是隐藏或者移除背景层和弹出层，留着给操作完成时调用。
5.设置背景层透明度以及滚动高度，设置弹出层的位置，居中随滚动或者固定不动。
6.最后，为了方便多个场合中使用，提取可变参数，参数要有默认值，使用$.extend搞定。

预计将于节后发布测试版，还是未删节的。
在线演示：http://demo.jb51.net/js/jquery_cvbox/index.htm
打包下载：http://xiazai.jb51.net/201010/yuanma/jquery_cvbox.rar
jquery.cvbox.min.js代码

复制代码 代码如下:

/*
* JQuery.cvbox.js
* http://www.chinavalue.net
*
* J.Wang
* http://0417.cnblog.socm
*
* 2010.09.30
*/

(function($) {
$.fn.cvbox = function(options) {
var self = $(this);
var defaults = {
titleBarText: "",
titleBarClose: "关闭",
bgClickClose: false,
bgShow: true,
bgOpacity: 0.2,
confirmText: "",
alertText: "",
delayClose: 0,
submitAfter: function() {
$.noop();
}
};
var param = $.extend({}, defaults, options || {});

//弹框的显示
var cvBoxElement = '

';
cvBoxElement += '

';
cvBoxElement += '

' + param.titleBarText + '

' + param.titleBarClose + '

';
cvBoxElement += '

';
cvBoxElement += '

';

if ($("#cvBoxBorder").size()) {
$("#cvBoxBorder").show();

if (param.bgShow) {
$("#cvBoxShade").show();
}
else {
$("#cvBoxShade").hide();
}
}
else {
$("body").append(cvBoxElement);
}

//一些元素对象，浏览器宽高，滚动高度，页面高度
var cbBg = $("#cvBoxShade");
var cbBorder = $("#cvBoxBorder");
var cbTitleBar = $("#cvBoxTitleBar");
var cbBody = $("#cvBoxBody");
var w, h, st, ph;

var cb = {
//装载的内容
content: function() {
var text;

if (param.confirmText != "") {
text = $('

' + param.confirmText + '

  

');
}
else if (param.alertText != "") {
text = $('

' + param.alertText + '

');
}
else {
self.show();
text = self;
}

return text;
},

hw: function(obj) {
//获取任意元素的高宽
var hwSize = {};
$('

').appendTo("body").append(obj.clone());
hwSize.w = $("#cbBox").width();
hwSize.h = $("#cbBox").height();
$("#cbBox").remove();
return hwSize;
},

//黑背景的宽高透明度等，弹框的位置
position: function() {
w = $(window).width(), h = $(window).height(), st = $(window).scrollTop(), ph = $(document).height();
cbBg.width(w).height(ph).css("opacity", param.bgOpacity);
//主体内容的位置
var x_size = cb.hw(cb.content());
var xh = x_size.h, xw = x_size.w;
var t = st + (h - xh) / 2, l = (w - xw) / 2;
cbBorder.css({
width: xw,
top: t,
left: l,
zIndex: 9999
});
},

//定位
posfix: function() {
if (window.XMLHttpRequest) {
cbBorder.css("position", "fixed");
} else {
$(window).scroll(function() {
cb.position();
});
}
},

//居中
center: function() {
$(window).resize(function() {
cb.position();
});
},

bgclick: function() {
cbBg.click(function() {
cb.hide();
});
},

bghide: function() {
cbBg.hide();
},

//弹框的隐藏
hide: function() {
if (param.confirmText == "" && param.alertText == "") {
cb.content().hide().appendTo($("body"));
}

//cbBorder.fadeOut(300);
cbBorder.remove();
cbBg.remove();
return false;
},

barhide: function() {
cbTitleBar.hide();
},

show: function() {
if (cbBody.html() == "") {
cbBody.append(cb.content());
}

cb.position();
cb.center();

if (param.titleBarText == "") {
cb.barhide();
}
if (!param.bgShow) {
cb.bghide();
}
if (param.bgClickClose) {
cb.bgclick();
}
if (param.delayClose > 0) {
setTimeout(cb.hide, param.delayClose);
}
}
};

cb.show();

//一些事件的绑定
$("#cvBoxBtnSubmit").bind("click", function() {
if (param.confirmText != ""){
param.submitAfter();
}
cb.hide();
});

$("#cvBoxBtnCancel").bind("click", function() {
cb.hide();
});

$("#cvBoxTitleBarClose").bind("click", function() {
cb.hide();
});
}
})(jQuery);

完整的测试代码

复制代码 代码如下:

未压缩版本是6K大小，压缩后只有2K大，应该算很轻了。

 

1.弹出提示框，点击查看效果。

$(this).cvbox({ <BR>titleBarText: "弹出提示框", <BR>alertText: "世界上最远的距离不是生与死的距离<br />而是我在你面前<br />你却不知道我爸爸是李刚" <BR>}); <BR>

2.弹出提示框1秒后自动关闭，点击查看效果。

$("#A2").click(function() { <BR>$(this).cvbox({ <BR>titleBarText: "弹出提示框1秒后自动关闭", <BR>alertText: "世界上最远的距离不是生与死的距离<br />而是我在你面前<br />你却不知道我爸爸是李刚", <BR>delayClose:1000 <BR>}); <BR>}); <BR>

3.弹出对话框，点击查看效果。

$("#A3").click(function() { <BR>$(this).cvbox({ <BR>titleBarText: "弹出对话框", <BR>confirmText: "世界上最远的距离不是生与死的距离<br />而是我在你面前<br />你却不知道我爸爸是李刚<br <BR>/><br />你确认你爸是李刚吗？", <BR>submitAfter:HelloLiGang <BR>}); <BR>}); <br><br>function HelloLiGang(){ <BR>alert("对您爸爸的敬仰犹如滔滔江水连绵不绝！"); <BR>} <BR>

4.载入一段HTML内容，点击查看效果。

通常这段内容的display都设置为hidden，此处只是为了演示该HTML内容是在当前页面，而不是动态write出来的，可查看页面源文
件。


内容可以是任意元素，包括iframe也可以。

<div class="A4Demo" style="display:none; width:550px; padding:10px; "> <BR><div> <BR>通常这段内容的display都设置为hidden，此处只是为了演示该HTML内容是在当前页面，而不是动态write出来的，可查看页面源文件。 <BR><br /> <BR>内容可以是任意元素，包括iframe也可以。 <BR></div> <BR><div> <BR><iframe width="100%" frameborder="0" src="http://a.cvimg.cn/UploadFile/MiniBlog/2010/10-20/7a09cf13-eeb6-491b-aa63- <BR>18dd67bde0a1_Big.jpg"></iframe> <BR></div> <BR></div> <BR>

$("#A4").click(function() { <BR>$(".A4Demo").cvbox({ <BR>titleBarText: "载入一段HTML内容" <BR>}); <BR>}); <BR>

目前只是很简单的应用，后续增加位置的参数，使对话层不局限于只显示在屏幕中间。