自制轻量级仿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 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
JavaScript RegExp方法获取地址栏参数(面向对象)
Mar 10 Javascript
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
Javascript中For In语句用法实例
May 14 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
Javascript的this用法
Jan 16 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
vue路由结构可设一层方便动态添加路由操作
Aug 31 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 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计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
Laravel日志用法详解
2016/10/09 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
浅析Javascript使用include/require
2013/11/13 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
2017/08/04 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
Python实现把回车符\r\n转换成\n
2015/04/23 Python
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
python修改FTP服务器上的文件名
2019/09/11 Python
Python3实现二叉树的最大深度
2019/09/30 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
假日旅行社实习自我鉴定
2013/09/24 职场文书
简历上的自我评价
2014/02/03 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS