직접 만든 경량 jQuery.boxy 대화 상자 플러그인 code

직접 만든 경량 jQuery.boxy 대화 상자 플러그인 code_jquery

WBOY

풀어 주다： 2016-05-16 18:17:36

원래의

1090명이 탐색했습니다.

이런 점에서 jquery.boxy 플러그인은 매우 강력해졌습니다. 일반적으로 사용되는 프롬프트, 확인, 드래그, 크기 변경 및 비동기 로딩은 모두 매우 실용적이어서 파일 크기가 커지고(무시할 수 있음) 많은 기능이 필요하지 않습니다. 그렇기 때문에 배움과 실천을 동시에 하겠다는 마음가짐과 생각으로 이번 프로젝트에 적합한 경량 팝업 레이어 플러그인을 처음으로 작성하게 되었습니다. 그리고 앞으로는 일반적인 작업을 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 = '

';
cvBoxElement += '

' + param.titleBarText + '

' + param.titleBarClose + '

';
cvBoxElement += '

';

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 = $('

' + param.confirmText + '

');
}
else if (param.alertText != "") {
text = $('

' + param.alertText + '

');
}
else {
self.show();
text = self;
}

return text;
},

hw: function(obj) {
//获取任意元素的高宽
var hwSize = {};
$('

').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", " 고정됨");
} else {
$(window).scroll(function() {
cb.position();
});
}
},

//center
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();
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("클릭 ", function() {
cb.hide ();
});

$("#cvBoxTitleBarClose").bind("click", function() {
cb. hide();
});
}
})(jQuery);

테스트 코드 완성

코드 복사

코드는 다음과 같습니다.

未压缩版本是6K大小，压缩后只有2K大，应该算很轻了。

1.弹出提示框，点击查看效果。

$(this).cvbox({ <br>titleBarText: "弹出提示框", <br>alertText: "世界上最远的距离不是生与死的距离<br />而是我在你面前<br />你却不知道我爸爸是李刚" <br>}); <br>

2. 효과를 보려면 클릭하세요.

$("# A2").click(function() { <BR>$(this).cvbox({ <BR>titleBarText: "팝업 프롬프트 상자는 1초 후에 자동으로 닫힙니다.", <BR>alertText: "가장 먼 거리 세상에는 삶과 죽음의 거리가 없습니다<br /&gt ;하지만 나는 당신 앞에 있습니다<br />당신은 내 아버지가 리강이라는 것을 모르고 있습니다", <BR>delayClose:1000 <BR> }); <BR>

3. 대화 상자가 나타나면 클릭하여 효과를 확인하세요.

$("#A3"). click(function() { <BR>$(this).cvbox({ <BR>titleBarText: "팝업 대화 상자", <BR>confirmText: "세상에서 가장 먼 거리는 삶과 죽음의 거리가 아닙니다&lt ;br /> 근데 나야 너 앞에서는<br />그런데 내 아버지가 리강이라는 걸 모르시나봐요<br <BR>/><br />네 아버지가 리강인 게 확실해? Gang? ", <BR>submitAfter:HelloLiGang <BR>}); <BR>}); <BR><BR>function HelloLiGang(){ <BR>alert("아버지에 대한 존경심은 끝없는 강과 같습니다! "); <br>} <br>&lt ;/pre> <BR></div> <BR><div> <BR><a id="A4" href="javascript:void(0) ;">4. HTML 콘텐츠를 로드하고 클릭하여 효과를 확인하세요. </a> <BR><div class="A4Demo" style="display: none; width: 550px; padding: 10px;"> <BR><div> <BR>이 콘텐츠의 일반적인 표시 이는 HTML 콘텐츠가 동적으로 작성되지 않고 현재 페이지에 있음을 보여주기 위한 것입니다. <BR>. <BR><br /> <BR>콘텐츠는 iframe을 포함한 모든 요소일 수 있습니다. <BR></div> <BR><div> <BR></div> <BR><script type="text/javascript"< ![CDATA[ <BR>$("#A4").click(function() { <BR>$(".A4Demo").cvbox({ <BR>titleBarText: "HTML 콘텐츠 로드" <BR> }); <BR>// ]]</script> <BR></div><BR><BR>< pre class="brush:html"><div class="A4Demo" style="display:none; width:550px; padding:10px; "> <BR><div> 표시가 숨겨짐으로 설정되어 있습니다. 이는 HTML 콘텐츠가 동적으로 작성되지 않고 현재 페이지에 있음을 보여주기 위한 것입니다. <BR><br /> <BR>콘텐츠는 iframe을 포함한 모든 요소일 수 있습니다. <BR></div> <BR><div> <BR><iframe width="100%"frameborder="0" src="http://a.cvimg.cn/UploadFile/MiniBlog/2010 /10-20/7a09cf13-eeb6-491b-aa63- <BR>18dd67bde0a1_Big.jpg"></iframe> <BR></div> <BR></div> <BR></pre&gt ; <BR></div> <BR><br /> <BR><div class="jb51_Highlighter"><BR><pre class="brush:javascript">$("# A4").click(function() { <BR>$(".A4Demo").cvbox({ <BR>titleBarText: "HTML 콘텐츠 로드 중" <BR>}); <BR>}); <BR>

그래야 대화상자 레이어가 화면 중앙에만 표시됩니다.