自作の軽量 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.

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

<🎜>：庭を育てる - 完全な突然変異ガイド

3週間前 By DDD

<🎜>：バブルガムシミュレーターインフィニティ - ロイヤルキーの取得と使用方法

3週間前 By 尊渡假赌尊渡假赌尊渡假赌

KB5055612を修正する方法Windows 10にインストールできませんか？

3週間前 By DDD

Nordhold：Fusion System、説明

3週間前 By 尊渡假赌尊渡假赌尊渡假赌

マンドラゴラ：魔女の木のささやき - グラップリングフックのロックを解除する方法

3週間前 By 尊渡假赌尊渡假赌尊渡假赌

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Java チュートリアル

1666

14

CakePHP チュートリアル

1425

52

Laravel チュートリアル

1324

25

PHP チュートリアル

1272

29

C# チュートリアル

1251

24

もっと見る