自作の軽量 jQuery.boxy ダイアログ プラグイン code_jquery

この点で、jquery.boxy プラグインは非常に強力に作られており、一般的に使用されるプロンプト、確認、ドラッグ、サイズ変更、非同期ロードはすべて非常に実用的であり、ファイルが (無視できるほど) 大きくなり、多くの機能は必要ありません。このため、学習と実践を同時に行うという姿勢と考え方で、このプロジェクトに適した軽量のポップアップ レイヤー プラグインを作成しました。また、将来的には一般的な操作を jquery プラグインにカプセル化する準備も進めています。

まず、プラグインに名前を付けます。これを jquey.cvbox.min.js と呼びます。cv は Web サイトのドメイン名 ChinaValue の略称です。 6K未満に制御されます。まだ終わっていないので、まずは感想を書いていきます。

1. コンテンツを表示するページにコンテナ要素とポップアップ レイヤーの背景を追加します。ページ上に表示されます）と成長後の外観は後から育成（設定）され、外観はアートディレクターによって自然に着せ替えられます。
2. 必要に応じて、マスクの背景、ポップアップ レイヤーのコンテナ、ポップアップ レイヤーのタイトル バー、コンテンツ領域など、よく使用されるオブジェクトを事前に定義します。ポップアップレイヤー、現在のブラウザウィンドウの高さなどを設定すると、後で使用するのがさらに便利になります。
3. コンテナへのコンテンツの詰め込みを開始します。コンテンツには、プロンプト (プロンプト機能に対応)、質問 (確認ボックスに対応)、画像 (小さな画像を拡大するためのものなど) を指定できます。これは HTML コードの一部です (HTML を JS で直接記述する不便さを置き換えます)。
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 += '

';
cvBoxElement += '

' + param.titleBarText + '

' + param.titleBarClose + '

';
cvBoxElement += '

';
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({
幅: xw,
上: t,
左: l,
zIndex: 9999
});
},

//位置
posfix: function() {
if (window.XMLHttpRequest) {
cbBorder.css("位置", "修正済み");
} else {
$(window).scroll(function() {
cb.position();
});
}
},

//center
center : function() {
$(window).resize(function() {
cb.position();
});

bgclick: function() {
cbBg.click(function() {
cb.hide();
}); : function() {
cbBg.hide ();
},

//ポップアップボックスを非表示にする
hide: function() {
if (param.confirmText == "" && param.alertText == "") {
cb.content().hide().appendTo($("body"));
}

//cbBorder .fadeOut(300);
cbBorder.remove();
return
},

barhide: function() cbTitleBar.hide();
},

show: function() {
if (cbBody.html() == "") {
cbBody.append(cb.content() ));

cb.position();

if (param.titleBarText == "") {
cb. barhide();
}
if ( !param.bgShow) {
cb.bghide();
}
if (param.bgClickClose) {
cb.bgclick() ;
}
if (param.layClose > 0) {
setTimeout(cb.hide, param.delayClose)
}
}; >cb.show();

//一部のイベントのバインド
$("#cvBoxBtnSubmit").bind("click", function() {
if (param.confirmText != ""){
param.submitAfter() ;
}

$("#cvBoxBtnCancel"); ", function() {
cb.hide ();
});

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


完全なテストコード




コードをコピーします


コードは次のとおりです:

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

 

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

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

2. The prompt box will automatically close after 1 second. Click to view the effect.

$("#A2").click(function() { <BR>$(this).cvbox({ <BR>titleBarText: "The pop-up prompt box will automatically close after 1 second", <BR>alertText: "The farthest distance in the world is not the distance between life and death<br /&gt ;But I am in front of you<br />You don’t know that my father is Li Gang", <BR>delayClose:1000 <BR>}); <BR>}); <BR>

3. A dialog box will pop up, click to view the effect.
> ;

$("#A3").click(function() { <BR>$(this).cvbox({ <BR>titleBarText: "Pop-up dialog box", <BR>confirmText: "The farthest distance in the world is not the distance between life and death<br /> but me In front of you<br />But you don’t know that my father is Li Gang<br <BR>/><br />Are you sure that your father is Li Gang? ", <BR>submitAfter:HelloLiGang <BR>}); <BR>}); <br><br>function HelloLiGang(){ <BR>alert("The admiration for your father is like the endless river!"); <BR>} <BR>&lt ;/pre> <BR></div> <BR><div> <BR><a id="A4" href="javascript:void(0);">4. Load a piece of HTML content , click to see the effect. </a> <BR><div class="A4Demo" style="display: none; width: 550px; padding: 10px;"> <BR><div> <BR>Usual display of this content All are set to hidden. This is just to demonstrate that the HTML content is on the current page rather than dynamically written. You can view the page source file <BR>. <BR><br /> <BR>The content can be any element, including iframe. <BR></div> <BR><div> <BR></div> <BR></div> <BR><script type="text/javascript">// < ![CDATA[ <BR>$("#A4").click(function() { <BR>$(".A4Demo").cvbox({ <BR>titleBarText: "Load a piece of HTML content" <BR> }); <BR>}); <BR>// ]]></script> <BR></div> <BR><div class="jb51_Highlighter"> <BR><pre class="brush:html"><div class="A4Demo" style="display:none; width:550px; padding:10px; "> <BR><div> <BR>Usually this content The display is set to hidden. This is just to demonstrate that the HTML content is on the current page rather than dynamically written. You can view the page source file. <BR><br /> <BR>The content can be any element, including 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: "Loading a piece of HTML content" <BR>}); <BR>}); <BR>

, so that the dialog layer is not limited to being displayed in the middle of the screen.