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

この点で、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 += '

' + 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({
幅: 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.

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

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