DIY手書きjQueryプラグインまとめ_jquery

jQuery は、Prototype に次ぐ優れた JavaScript フレームワークであり、開発者に深く愛されており、幅広いユーザーがいます。 jQuery の良い点はユーザーのカスタマイズです。つまり、jQuery のさまざまな機能を改善するための独自のプラグインを作成し、必要な機能をカスタマイズし、冗長なコードを排除し、ページをロードするときにある程度の柔軟性を持たせることができます。改善。

面接の後、私はとても感動しました。あなたは 10 のことを知っている開発者になりたいですか、それとも 1 つのことに精通している開発者になりたいですか?そこで私は数日かけて jQuery のソース コードを熱心に研究し、jQuery のイベント メカニズム、セレクター、ブラウザーの互換性がどのように実現されるかについて学びました。それ以来、私は常に、独自の小さな関数を実装するための jQuery プラグインを作成したいと考えていました。

上の図に示すように、プラグインによって実装される機能は、マウスがリンク上にあるとリンクが移動し、マウスが離れるとリンクが元の位置に戻るというものです。

HTML のコア部分は
です

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

• 月曜日


• 火曜日
• 水曜日
• 木曜日

上記の冒頭の関数を単純に jQuery を使用して実装すると、次のように実装されます:

コードをコピーします

コードは次のとおりです: $(document).ready(function() { $("#catagory a").hover(function() {

$(this).animate({paddingLeft: "20px" }, { queue: false, period: 500 }); }、関数() {

$(this).animate({paddingLeft: "0" }, { queue: true, period: 500 }); });
});



次に、関数をカプセル化して plugin.js として記述し、HTML ファイルにリンクします。

コードをコピー

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

(関数 ($) {
$.fn.extend({
//プラグイン名 -paddingList
paddingList: 関数 (オプション) { //パラメータとデフォルト値
var デフォルト = { animatePadding: 10、
hoverColor: "黒"
                                                                var options = $.extend(defaults, options); return this.each(function () { var o = オプション; //要素コレクションを変数に割り当てます。この場合、それは ul オブジェクトです。 var obj = $(this); // ul
のオブジェクトを取得します var items = $("li a", obj);
に items.hover(function() {
$(this).css("color", o.hoverColor); //queue false はアニメーション キューに追加しないことを意味します
$(this).animate({paddingLeft:o.animatePadding},{queue:false,duration:300});
}、 関数 （） { $(this).css("color", ""); $(this).animate({paddingLeft: "0" }, { queue: true, period: 300 }); });
});                                                                             });
})(jQuery);



もちろん、外部リンクプラグインにはsrcのオリジナルjqueryライブラリファイルも必要です。プラグインを呼び出す方法は次のとおりです:




コードをコピー


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


$(document).ready(function() {
$("#catagory").paddingList({ animatePadding: 30, hoverColor: "Red" }); });