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


Posted in Javascript onOctober 26, 2010

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

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

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

预计将于节后发布测试版,还是未删节的。
在线演示:http://demo.3water.com/js/jquery_cvbox/index.htm
打包下载:http://xiazai.3water.com/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 = '<div id="cvBoxShade" class="cvBoxShade"></div>'; 
cvBoxElement += '<div id="cvBoxBorder" class="cvBoxBorder">'; 
cvBoxElement += '<div id="cvBoxTitleBar" class="cvBoxTitleBar"><div class="cvBoxTitleBarText">' + param.titleBarText + '</div><div class="cvBoxTitleBarClose"><a href="javascript:void(0);" id="cvBoxTitleBarClose">' + param.titleBarClose + '</a></div><div class="cvBoxClear"></div></div>'; 
cvBoxElement += '<div id="cvBoxBody" class="cvBoxBody"></div>'; 
cvBoxElement += '</div>'; 
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 = $('<div class="cvBoxBodyBtn">' + param.confirmText + '<p><input type="button" id="cvBoxBtnSubmit" class="cvBoxBtnSubmit" value="确认" />  <input type="button" id="cvBoxBtnCancel" class="cvBoxBtnCancel" value="取消" /></p></div>'); 
} 
else if (param.alertText != "") { 
text = $('<div class="cvBoxBodyBtn">' + param.alertText + '<p><input type="button" id="cvBoxBtnSubmit" class="cvBoxBtnSubmit" value="确认" /></p></div>'); 
} 
else { 
self.show(); 
text = self; 
} 
return text; 
}, 
hw: function(obj) { 
//获取任意元素的高宽 
var hwSize = {}; 
$('<div id="cbBox" style="position:absolute;left:-999px;"></div>').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);

完整的测试代码
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<script src="jquery.js" type="text/javascript"></script> 
<script src="jquery.blockUI.js" type="text/javascript"></script> 
<script src="jquery.cvbox.min.js" type="text/javascript"></script> 
<style type="text/css"> 
DIV.postCon { 
FONT-SIZE: 12px; COLOR: #666666 
} 
DIV.postBody { 
FONT-SIZE: 12px; COLOR: #666666; LINE-HEIGHT: 150% 
} 
.mySearch { 
DISPLAY: none 
} 
#mainContent { 
MARGIN-TOP: 5px; MARGIN-LEFT: 5px 
} 
#author_profile { 
DISPLAY: none 
} 
.postCon A { 
COLOR: #0099ff 
} 
.postBody A { 
COLOR: #0099ff 
} 
.feedbackCon A { 
COLOR: #0099ff 
} 
#sideBar { 
BORDER-RIGHT: #ced7ce 1px solid; BORDER-TOP: #ced7ce 1px solid; MARGIN: 0px 0px 0px 4px; BORDER-LEFT: #ced7ce 1px solid; WIDTH: auto; BORDER-BOTTOM: #ced7ce 1px solid; POSITION: fixed; TOP: 24% 
} 
.newsItem { 
DISPLAY: none 
} 
#calendar { 
DISPLAY: none 
} 
.catListLink { 
DISPLAY: none 
} 
.catListComment { 
DISPLAY: none 
} 
.catListFeedback { 
DISPLAY: none 
} 
#sideBarMain { 
DISPLAY: none 
} 
#EntryTag { 
DISPLAY: none 
} 
.catListTag { 
DISPLAY: none 
} 
.cvBoxShade { 
Z-INDEX: 2000; BACKGROUND: #ccc; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 0px 
} 
.cvBoxBorder { 
BORDER-RIGHT: #000000 0px solid; PADDING-RIGHT: 8px; BORDER-TOP: #000000 0px solid; PADDING-LEFT: 8px; FONT-SIZE: 12px; Z-INDEX: 2000; PADDING-BOTTOM: 8px; BORDER-LEFT: #000000 0px solid; WIDTH: 100%; PADDING-TOP: 8px; BORDER-BOTTOM: #000000 0px solid; POSITION: absolute; BACKGROUND-COLOR: #ccc 
} 
.cvBoxBorder A { 
COLOR: #486aaa; TEXT-DECORATION: none 
} 
.cvBoxBorder A:hover { 
COLOR: #c00; TEXT-DECORATION: none 
} 
.cvBoxTitleBar { 
WIDTH: 100%; LINE-HEIGHT: 27px; HEIGHT: 26px; BACKGROUND-COLOR: #eeeeee 
} 
.cvBoxTitleBarText { 
PADDING-LEFT: 10px; FONT-WEIGHT: bold; FLOAT: left; COLOR: #333 
} 
.cvBoxTitleBarClose { 
PADDING-RIGHT: 10px; FLOAT: right; COLOR: #3867af; FONT-FAMILY: Verdana 
} 
.cvBoxTitleBarClose IMG { 
BORDER-TOP-WIDTH: 0px; DISPLAY: block; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 4px 0px 0px; BORDER-RIGHT-WIDTH: 0px 
} 
.cvBoxBody { 
WIDTH: 100%; BACKGROUND-COLOR: #ffffff 
} 
.cvBoxBodyBtn { 
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 20px; PADDING-TOP: 20px 
} 
.cvBoxBodyBtn P { 
MARGIN: 20px 0px 0px 
} 
.cvBoxBtnSubmit { 
BORDER-RIGHT: #34538b 1px solid; BORDER-TOP: #34538b 1px solid; BACKGROUND: #486aaa; BORDER-LEFT: #34538b 1px solid; WIDTH: 60px; CURSOR: pointer; COLOR: #fff; LINE-HEIGHT: 23px; BORDER-BOTTOM: #34538b 1px solid; HEIGHT: 24px 
} 
.cvBoxBtnCancel { 
BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; BACKGROUND: #eee; BORDER-LEFT: #ccc 1px solid; WIDTH: 60px; CURSOR: pointer; COLOR: #333; LINE-HEIGHT: 23px; BORDER-BOTTOM: #ccc 1px solid; HEIGHT: 24px 
} 
.cvBoxClear { 
CLEAR: both; PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; FONT-SIZE: 1px; PADDING-BOTTOM: 0px; MARGIN: 0px; LINE-HEIGHT: 1px; PADDING-TOP: 0px 
} </style> 
<body> 
<div> 
未压缩版本是6K大小,压缩后只有2K大,应该算很轻了。</div> 
<div> </div> 
<div id="jquerycvbox"> 
<div> 
<a id="A1" href="javascript:void(0);">1.弹出提示框,点击查看效果。</a> 
<script type="text/javascript">// <![CDATA[ 
$("#A1").click(function() { 
$(this).cvbox({ 
titleBarText: "弹出提示框", 
alertText: "世界上最远的距离不是生与死的距离<br />而是我在你面前<br />你却不知道我爸爸是李刚" 
}); 
}); 
// ]]></script> 
</div> 
<div class="3water_Highlighter"> 
<pre class="brush:javascript">$(this).cvbox({ 
titleBarText: "弹出提示框", 
alertText: "世界上最远的距离不是生与死的距离<br />而是我在你面前<br />你却不知道我爸爸是李刚" 
}); 
</pre> 
</div> 
<div> 
<a id="A2" href="javascript:void(0);">2.弹出提示框1秒后自动关闭,点击查看效果。</a> 
<script type="text/javascript">// <![CDATA[ 
$("#A2").click(function() { 
$(this).cvbox({ 
titleBarText: "弹出提示框1秒后自动关闭", 
alertText: "世界上最远的距离不是生与死的距离<br />而是我在你面前<br />你却不知道我爸爸是李刚", 
delayClose: 1000 
}); 
}); 
// ]]></script> 
</div> 
<div class="3water_Highlighter"> 
<pre class="brush:javascript">$("#A2").click(function() { 
$(this).cvbox({ 
titleBarText: "弹出提示框1秒后自动关闭", 
alertText: "世界上最远的距离不是生与死的距离<br />而是我在你面前<br />你却不知道我爸爸是李刚", 
delayClose:1000 
}); 
}); 
</pre> 
</div> 
<div> 
<a id="A3" href="javascript:void(0);">3.弹出对话框,点击查看效果。</a> 
<script type="text/javascript">// <![CDATA[ 
$("#A3").click(function() { 
$(this).cvbox({ 
titleBarText: "弹出对话框", 
confirmText: "世界上最远的距离不是生与死的距离<br />而是我在你面前<br />你却不知道我爸爸是李刚<br /><br />你确认你爸是李刚吗?", 
submitAfter: HelloLiGang 
}); 
}); 
function HelloLiGang() { 
alert("对您爸爸的敬仰犹如滔滔江水连绵不绝!"); 
} 
// ]]></script> 
</div> 
<div class="3water_Highlighter"> 
<pre class="brush:javascript">$("#A3").click(function() { 
$(this).cvbox({ 
titleBarText: "弹出对话框", 
confirmText: "世界上最远的距离不是生与死的距离<br />而是我在你面前<br />你却不知道我爸爸是李刚<br 
/><br />你确认你爸是李刚吗?", 
submitAfter:HelloLiGang 
}); 
}); 
function HelloLiGang(){ 
alert("对您爸爸的敬仰犹如滔滔江水连绵不绝!"); 
} 
</pre> 
</div> 
<div> 
<a id="A4" href="javascript:void(0);">4.载入一段HTML内容,点击查看效果。</a> 
<div class="A4Demo" style="display: none; width: 550px; padding: 10px;"> 
<div> 
通常这段内容的display都设置为hidden,此处只是为了演示该HTML内容是在当前页面,而不是动态write出来的,可查看页面源文 
件。 
<br /> 
内容可以是任意元素,包括iframe也可以。 
</div> 
<div> 
</div> 
</div> 
<script type="text/javascript">// <![CDATA[ 
$("#A4").click(function() { 
$(".A4Demo").cvbox({ 
titleBarText: "载入一段HTML内容" 
}); 
}); 
// ]]></script> 
</div> 
<div class="3water_Highlighter"> 
<pre class="brush:html"><div class="A4Demo" style="display:none; width:550px; padding:10px; "> 
<div> 
通常这段内容的display都设置为hidden,此处只是为了演示该HTML内容是在当前页面,而不是动态write出来的,可查看页面源文件。 
<br /> 
内容可以是任意元素,包括iframe也可以。 
</div> 
<div> 
<iframe width="100%" frameborder="0" src="http://a.cvimg.cn/UploadFile/MiniBlog/2010/10-20/7a09cf13-eeb6-491b-aa63- 
18dd67bde0a1_Big.jpg"></iframe> 
</div> 
</div> 
</pre> 
</div> 
<br /> 
<div class="3water_Highlighter"> 
<pre class="brush:javascript">$("#A4").click(function() { 
$(".A4Demo").cvbox({ 
titleBarText: "载入一段HTML内容" 
}); 
}); 
</pre> 
</div> 
</div> 
<div> 
<br />目前只是很简单的应用,后续增加位置的参数,使对话层不局限于只显示在屏幕中间。 
</div> 
<div id="c_jquery_test" style="display:none"></div> 
<script type="text/javascript"> 
if ($ != jQuery) { 
$ = jQuery.noConflict(); 
} 
</script> 
</body>
Javascript 相关文章推荐
由Javascript实现的页面日历
Nov 04 Javascript
JS跨域总结
Aug 30 Javascript
js返回上一页并刷新代码整理
Dec 21 Javascript
jQuery function的正确书写方法
Aug 02 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
AngularJS基础 ng-csp 指令详解
Aug 01 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 Javascript
jquery ui resizable bug解决方法
Oct 26 #Javascript
HTML Dom与Css控制方法
Oct 25 #Javascript
Dom在ajax技术中的作用说明
Oct 25 #Javascript
Dom与浏览器兼容性说明
Oct 25 #Javascript
Dom 是什么的详细说明
Oct 25 #Javascript
Javascript类库的顶层对象名用户体验分析
Oct 24 #Javascript
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 #Javascript
You might like
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
微信小程序实现换肤功能
2018/03/14 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
vue devtools的安装与使用教程
2018/08/08 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
python中的列表推导浅析
2014/04/26 Python
详解Python中的四种队列
2018/05/21 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
基于python实现学生信息管理系统
2019/11/22 Python
Python unittest生成测试报告过程解析
2020/09/08 Python
“学雷锋活动月”总结
2014/03/09 职场文书
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
求职导师推荐信范文
2015/03/27 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
婚礼父母致辞
2015/07/28 职场文书
工作简历的自我评价
2019/05/16 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技
DQL数据查询语句使用示例
2022/12/24 MySQL