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

2024-04-10 14:50:54

对此，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.rarjquery.cvbox.min.js代码

代码如下:

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

//弹框的显示
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);

完整的测试代码

代码如下:

</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="jb51_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="jb51_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
});
});

jquery.boxy插件的iframe扩展代码

复制代码代码如下: /* <a href="a.html" onclick="return $.qbox(this);" > <a href="a.html" onclick="return qBox.iFLoad(this);" > <a href="a.html" onclick="return qBox.iFrame({src:'b.html'})"
JQuery boxy插件在IE中边角图片不显示问题的解决

JQuery boxy插件很好用,但也会出现一些问题,比如弹出框的边角在IE中不能显示.本博文将来解决这个问题.将boxy插件引用到项目中后会有一个boxy.css文件和jquery.boxy.js文件.在boxy.css文件中有给弹出框设置四个角图片的样式,如下图: 不做任何修改在Chrome浏览器下没有问题,如下: 在网上查了一些资料,说将css文件中的图片路径给位全路径可以解决问题,如下: 发现这样修改后并没有作用,运行后效果仍然如下: 有效的解决方法将上面css截图的下半部分注释掉,如
AspNet中使用JQuery boxy插件的确认框

JQuery有不少弹出框的插件,boxy应该算的上是功能和效果都还不错的一款了.先来看一张效果图吧. 在Web开发中经常会使用到Alert和Confirm弹出框,在Asp.Net中的删除按钮上我们常常会加上删除的确认提示,以避免误删除数据,就像上面图片那样.我们一般会写出这样的代码. <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>
在jquery boxy中添加百度地图坐标拾取注意流程

作为开发的初学者,这东西仅仅作为个人备份,如果能帮到忙也也不错(我开发用的php,但这是js这本身没多大影响) 这里要说明几个问题: 1.boxy调用的页面中不能出现<script>标签不然不能显示 2.boxy调用的时候要注意流程,要先加载出boxy然后再去渲染地图到boxy页面中 3.百度地图的加载js应放在弹出boxy的那个页面中注意流程:boxy页面其实为单独的一个页面只是用了ajax中$.get('/index.php?r=comm/map_coordinate', functio
boxy基于jquery的弹出层对话框插件扩展应用弹出层选择器

我们使用热门的jquery进行设计,同时我们选择效果比较优秀的boxy弹出插件进行扩展(关于boxy的相关资料,请参照张鑫旭博客http://www.zhangxinxu.com/wordpress/?p=318).下面介绍boxy作为选择器框架的应用. 对于选择器,相信用过招聘网站的人都不会陌生(就是那个点击就弹出的,选择行业.职位和地区的东西),选择器难点就在于样式调试,主要针对的是IE6.这里介绍行业.职位和地区选择器,下载的Demo包含这三个选择器. 行业选择器:无关联,调用语句为Box
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)

对于 Boxy弹出框的使用之前写过一些文章(查看jquery.boxy基础),今天主要是在解决一个需要之后,觉得值得把它记录下来,所以就再写一篇,主要功能是,在弹出对话框后,隔N秒后自动隐藏,还有就是自动跳转! 效果如图: 而所封装的代码如下: 复制代码代码如下: // boxy对话框扩展 var Boxy_Extensions = { options: { title: '艺吧提示', closeText: 'x' }, //弹出后N秒后隐藏 alertDelayFun: function
js弹出层之1：JQuery.Boxy (二)

4.1.手动创建实例复制代码代码如下: <script type="text/javascript"> $(function() { $("#a1").click(function() { //实例化一个Boxy对象 var box1 = new Boxy("<h3>这个参数是显示的内容</h3>" //显示内容 , { title: "标题", //对话框标题 modal: false
jQuery boxy弹出层插件中文演示及使用讲解

使用该jQuery插件要想使用该jQuery插件,需要把$(selector).boxy();放在document.ready中.使用合适的选择器表达式替换这里的"selector",例如:"a[rel=boxy],form.with-confirmation".这会给匹配的元素附加一些行为,如下: 一个href属性中如果锚点包含#,则此锚点相对应的ID的DOM元素的内容就会被添加到boxy对话框中. 如果href锚点内容为其他一些东西,则会试图使用Ajax载入其
js弹出框轻量级插件jquery.boxy使用介绍

当你需要使用弹出框时,当然可以使用jquery-ui,artdiag,blockUI等等,但今天我介绍一个轻量级的插件 boxy!它可以把美工设计的弹出框很容易的体现出来,而且兼容性还不错! 复制代码代码如下: <script type='text/javascript'> $(function() { $('#ask-actuator').click(function() { Boxy.ask("How are you feeling?", ["Great&q
弹出层之1：JQuery.Boxy (一) 使用介绍

1.下载并修改插件可以在官网上下载到最新版(http://plugins.jquery.com/files/boxy-0.1.4.zip),到我写这些文字的时候最新版为0.1.4版,下载解压后有1个主要的js文件:jquery.boxy.js;1个css文件;还有4个图片用于构成弹出层的4个圆角.将文件引入系统中,修改boxy.css,将下面的图片路径修改为项目中实际的位置,如果设置不对会引起图片失效,那时就难看了. 复制代码代码如下: /* 将此处的图片修改为相对于css文件的图片文件的路

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

相关推荐

随机推荐