无为清净楼资源网

自制轻量级仿jQuery.boxy对话框插件代码
网络编程 2024/11/17 佚名
3 2
无为清净楼资源网 Design By www.qnjia.com
对此，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.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="确认" />&nbsp;&nbsp;<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="/UploadFiles/2021-04-02/jquery.js"><script src="jquery.blockUI.js"><script src="jquery.cvbox.min.js"><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>&nbsp;</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: "世界上最远的距离不是生与死的距离&lt;br /&gt;而是我在你面前&lt;br /&gt;你却不知道我爸爸是李刚"
});
</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: "世界上最远的距离不是生与死的距离&lt;br /&gt;而是我在你面前&lt;br /&gt;你却不知道我爸爸是李刚",
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="jb51_Highlighter">
<pre class="brush:javascript">$("#A3").click(function() {
$(this).cvbox({
titleBarText: "弹出对话框",
confirmText: "世界上最远的距离不是生与死的距离&lt;br /&gt;而是我在你面前&lt;br /&gt;你却不知道我爸爸是李刚&lt;br
/&gt;&lt;br /&gt;你确认你爸是李刚吗？",
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="jb51_Highlighter">
<pre class="brush:html">&lt;div class="A4Demo" style="display:none; width:550px; padding:10px; "&gt;
&lt;div&gt;
通常这段内容的display都设置为hidden，此处只是为了演示该HTML内容是在当前页面，而不是动态write出来的，可查看页面源文件。
&lt;br /&gt;
内容可以是任意元素，包括iframe也可以。
&lt;/div&gt;
&lt;div&gt;
&lt;iframe width="100%" frameborder="0" src="/UploadFiles/2021-04-02/7a09cf13-eeb6-491b-aa63-
18dd67bde0a1_Big.jpg">&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
<br />
<div class="jb51_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>
标签：
对话框
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
www.qnjia.com 无为清净楼资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接