自制轻量级仿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 相关文章推荐
网页自动刷新,不产生嗒嗒声的一个解决方法
Mar 27 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
jQuery表单验证之密码确认
May 22 jQuery
vue 设置路由的登录权限的方法
Jul 03 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
node中的密码安全(加密)
Sep 17 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 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读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
优化PHP代码技巧的小结
2013/06/02 PHP
php实现通过ftp上传文件
2015/06/19 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
Python处理字符串之isspace()方法的使用
2015/05/19 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
python微信撤回监测代码
2019/04/29 Python
python获取txt文件词向量过程详解
2019/07/05 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
鲜花方阵解说词
2014/02/13 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
2014年环保局工作总结
2014/12/11 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
教师个人年终总结
2015/02/11 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS
Java实现二分搜索树的示例代码
2022/03/17 Java/Android