シンプルな jQuery プラグインの制作学習プロセスと example_jquery

1. まず、jQuery プラグインを作成するにはクロージャが必要です

コードをコピーします コードは次のとおりです

(function ($) {
//ここにコード
})(jQuery);

これは公式プラグインですjQuery からの開発仕様要件。これを使用します。この書き方の利点は何ですか?
a) グローバルな依存関係を回避します。
b) 第三者による妨害行為を避けてください。
c) jQuery 演算子 '$' および 'jQuery ' と互換性があります。

次に、クロージャーを使用して、プラグインのスケルトンを追加します。

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

$.fn.dBox = function (options) {
var defaults = {
//さまざまな属性とそのデフォルト値
}
var opts = $.extend(defaults, options)
//ここの関数コード
}; 🎜>

ここで、dBox はこのポップアップ レイヤー プラグインの名前です

3 番目に、dBox のプロパティとそのデフォルト値を確立します

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

$.fn.dBox = 関数 (オプション) {

var defaults = {
opacity : 0.6, //マスクレイヤーの場合
drag: true,
title: 'dBox',
content: '',
left: 400 ,
top: 200,
width : 600,
height: 300,
setPos: false, //顧客の左と上を使用する場合
overlay: true, // を使用する場合マスクレイヤー
loadStr: 'Loading'、
ajaxSrc: ''、
iframeSrc: ''
}; var opts = $.extend(defaults, options); /function codes in here
};



4 番目に、これはポップアップ フォームであるため、最初に div フォームとマスク レイヤー
をデザインする必要があります。関数コード領域にスタイルを直接書き込みます。次のように入力します。

コードをコピーします。

コードは次のとおりです。 //dBox の HTML コードをビルドします var dBoxHtml = "

";

dBoxHtml = "

";

dBoxHtml = "

"
dBoxHtml = "

[x]

";
dBoxHtml = "< ;/div>";
dBoxHtml = "< ;div id='d_content' style='width:100%;height:100%;padding:3px;'>" opts.content "

";
dBoxHtml = "

";
var dBoxBG = "