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

WBOY
リリース: 2016-05-16 18:28:48
オリジナル
1338 人が閲覧しました
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 = "