欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

自制輕量級(jí)仿jQuery.boxy對(duì)話框插件代碼

 更新時(shí)間：2010年10月26日 11:03:07   作者：  
最近再做價(jià)值中國(guó)微博，從用戶體驗(yàn)的角度，將很多常用的window.alert或者window.confirm之類比較生硬死板冷不丁的提示改為彈出層的方式實(shí)現(xiàn)。
對(duì)此，jquery.boxy插件已經(jīng)做得非常強(qiáng)大了，常用的提示、確認(rèn)，拖拽、改變大小、異步加載都非常實(shí)用，導(dǎo)致文件較大（可忽略不計(jì)），很多功能并不需要，為此，抱著在邊學(xué)邊實(shí)踐的態(tài)度和想法，自制一款適用于本項(xiàng)目的輕量級(jí)彈出層插件，這是第一次寫jqeury插件，也為了以后能將常用操作封裝為jquery插件做準(zhǔn)備吧。

首先來個(gè)插件名字，這樣才能去唬人，就叫jquey.cvbox.min.js吧，cv就是網(wǎng)站域名ChinaValue的縮寫，壓縮后的容量控制在6K以下。因?yàn)檫€未完成，所以先將思想記錄下來。

1.在頁面增加用來顯示內(nèi)容的容器元素，以及彈出層的背景，僅只需要有就可以了，至于說在哪兒出生（也就是顯示在頁面什么位置）、長(zhǎng)成什么樣兒，后邊會(huì)培養(yǎng)（設(shè)置），樣子自然要由美術(shù)指導(dǎo)來打扮了。
2.根據(jù)我們的需要，我們事先定義好常用的一些對(duì)象，比如說遮罩的背景、彈出層的容器、彈出層的標(biāo)題欄、彈出層的內(nèi)容區(qū)域、以及當(dāng)前瀏覽器窗口的高寬等，有了這些，在后邊的使用中就方便多了。
3.開始往容器中塞內(nèi)容，內(nèi)容可以是一句提示語（對(duì)應(yīng)提示功能），可以是詢問語（對(duì)應(yīng)確認(rèn)框），可以是一張圖片（比如用于小圖放大），還可以是一段HTML代碼（代替直接在JS中寫HTML的不便）。
4.定義用戶點(diǎn)擊關(guān)閉的事件，也就是隱藏或者移除背景層和彈出層，留著給操作完成時(shí)調(diào)用。
5.設(shè)置背景層透明度以及滾動(dòng)高度，設(shè)置彈出層的位置，居中隨滾動(dòng)或者固定不動(dòng)。
6.最后，為了方便多個(gè)場(chǎng)合中使用，提取可變參數(shù)，參數(shù)要有默認(rèn)值，使用$.extend搞定。

預(yù)計(jì)將于節(jié)后發(fā)布測(cè)試版，還是未刪節(jié)的。
在線演示：http://demo.jb51.net/js/jquery_cvbox/index.htm
打包下載：http://xiazai.jb51.net/201010/yuanma/jquery_cvbox.rar
jquery.cvbox.min.js代碼
復(fù)制代碼 代碼如下:

/*
* 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: "關(guān)閉",
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);
}

//一些元素對(duì)象，瀏覽器寬高，滾動(dòng)高度，頁面高度
var cbBg = $("#cvBoxShade");
var cbBorder = $("#cvBoxBorder");
var cbTitleBar = $("#cvBoxTitleBar");
var cbBody = $("#cvBoxBody");
var w, h, st, ph;

var cb = {
//裝載的內(nèi)容
content: function() {
var text;

if (param.confirmText != "") {
text = $('<div class="cvBoxBodyBtn">' + param.confirmText + '<p><input type="button" id="cvBoxBtnSubmit" class="cvBoxBtnSubmit" value="確認(rèn)" />&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="確認(rèn)" /></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);
//主體內(nèi)容的位置
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);

完整的測(cè)試代碼
復(fù)制代碼 代碼如下:

<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大，應(yīng)該算很輕了。</div>
<div>&nbsp;</div>
<div id="jquerycvbox">
<div>
<a id="A1" href="javascript:void(0);">1.彈出提示框，點(diǎn)擊查看效果。</a>
<script type="text/javascript">// <![CDATA[
$("#A1").click(function() {
$(this).cvbox({
titleBarText: "彈出提示框",
alertText: "世界上最遠(yuǎn)的距離不是生與死的距離<br />而是我在你面前<br />你卻不知道我爸爸是李剛"
});
});
// ]]></script>
</div>
<div class="jb51_Highlighter">
<pre class="brush:javascript">$(this).cvbox({
titleBarText: "彈出提示框",
alertText: "世界上最遠(yuǎn)的距離不是生與死的距離&lt;br /&gt;而是我在你面前&lt;br /&gt;你卻不知道我爸爸是李剛"
});
</pre>
</div>
<div>
<a id="A2" href="javascript:void(0);">2.彈出提示框1秒后自動(dòng)關(guān)閉，點(diǎn)擊查看效果。</a>
<script type="text/javascript">// <![CDATA[
$("#A2").click(function() {
$(this).cvbox({
titleBarText: "彈出提示框1秒后自動(dòng)關(guān)閉",
alertText: "世界上最遠(yuǎn)的距離不是生與死的距離<br />而是我在你面前<br />你卻不知道我爸爸是李剛",
delayClose: 1000
});
});
// ]]></script>
</div>
<div class="jb51_Highlighter">
<pre class="brush:javascript">$("#A2").click(function() {
$(this).cvbox({
titleBarText: "彈出提示框1秒后自動(dòng)關(guān)閉",
alertText: "世界上最遠(yuǎn)的距離不是生與死的距離&lt;br /&gt;而是我在你面前&lt;br /&gt;你卻不知道我爸爸是李剛",
delayClose:1000
});
});
</pre>
</div>
<div>
<a id="A3" href="javascript:void(0);">3.彈出對(duì)話框，點(diǎn)擊查看效果。</a>
<script type="text/javascript">// <![CDATA[
$("#A3").click(function() {
$(this).cvbox({
titleBarText: "彈出對(duì)話框",
confirmText: "世界上最遠(yuǎn)的距離不是生與死的距離<br />而是我在你面前<br />你卻不知道我爸爸是李剛<br /><br />你確認(rèn)你爸是李剛嗎？",
submitAfter: HelloLiGang
});
});

function HelloLiGang() {
alert("對(duì)您爸爸的敬仰猶如滔滔江水連綿不絕！");
}
// ]]></script>
</div>
<div class="jb51_Highlighter">
<pre class="brush:javascript">$("#A3").click(function() {
$(this).cvbox({
titleBarText: "彈出對(duì)話框",
confirmText: "世界上最遠(yuǎn)的距離不是生與死的距離&lt;br /&gt;而是我在你面前&lt;br /&gt;你卻不知道我爸爸是李剛&lt;br
/&gt;&lt;br /&gt;你確認(rèn)你爸是李剛嗎？",
submitAfter:HelloLiGang
});
});

function HelloLiGang(){
alert("對(duì)您爸爸的敬仰猶如滔滔江水連綿不絕！");
}
</pre>
</div>
<div>
<a id="A4" href="javascript:void(0);">4.載入一段HTML內(nèi)容，點(diǎn)擊查看效果。</a>
<div class="A4Demo" style="display: none; width: 550px; padding: 10px;">
<div>
通常這段內(nèi)容的display都設(shè)置為hidden，此處只是為了演示該HTML內(nèi)容是在當(dāng)前頁面，而不是動(dòng)態(tài)write出來的，可查看頁面源文
件。
<br />
內(nèi)容可以是任意元素，包括iframe也可以。
</div>
<div>
</div>
</div>
<script type="text/javascript">// <![CDATA[
$("#A4").click(function() {
$(".A4Demo").cvbox({
titleBarText: "載入一段HTML內(nèi)容"
});
});
// ]]></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;
通常這段內(nèi)容的display都設(shè)置為hidden，此處只是為了演示該HTML內(nèi)容是在當(dāng)前頁面，而不是動(dòng)態(tài)write出來的，可查看頁面源文件。
&lt;br /&gt;
內(nèi)容可以是任意元素，包括iframe也可以。
&lt;/div&gt;
&lt;div&gt;
&lt;iframe width="100%" frameborder="0" src="http://a.cvimg.cn/UploadFile/MiniBlog/2010/10-20/7a09cf13-eeb6-491b-aa63-
18dd67bde0a1_Big.jpg"&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
<br />
<div class="jb51_Highlighter">
<pre class="brush:javascript">$("#A4").click(function() {
$(".A4Demo").cvbox({
titleBarText: "載入一段HTML內(nèi)容"
});
});
</pre>
</div>
</div>
<div>
<br />目前只是很簡(jiǎn)單的應(yīng)用，后續(xù)增加位置的參數(shù)，使對(duì)話層不局限于只顯示在屏幕中間。
</div>
<div id="c_jquery_test" style="display:none"></div>
<script type="text/javascript">
if ($ != jQuery) {
$ = jQuery.noConflict();
}
</script>
</body>

相關(guān)文章

最新評(píng)論