自制轻量级仿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 相关文章推荐
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
JavaScript实现页面实时显示当前时间的简单实例
Jul 20 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
node前端开发模板引擎Jade的入门
May 11 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 Javascript
分享15个Webpack实用的插件!!!
Mar 31 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实现小型站点广告管理(修正版)
2006/10/09 PHP
php基础学习之变量的使用
2011/06/09 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
Web开发之JavaScript
2012/03/29 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
Python实现抢购IPhone手机
2018/02/07 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
银行先进个人事迹材料
2014/05/11 职场文书
文明班集体申报材料
2014/05/23 职场文书
个人委托书怎么写
2014/09/17 职场文书
表扬通报怎么写
2015/01/16 职场文书
工作岗位职责范本
2015/02/15 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL