jQueryプラグインの書き方

ここ数日、jQueryプラグインの書き方を学び、jQuery公式の例を含むいくつかの資料を検索したが、説明がはっきりしていないことが分かった.最後に、やっと説明がはっきりしている文章を検索して、ここで自分でまとめて、jQueryプラグインの書き方を具体的な例で説明しました.
1、概要
htmlコードを見て

<ul id="catagory"> <li><a href="#">jQuery</a></li> <li><a href="#">Asp.net</a></li> <li><a href="#">Sql Server</a></li> <li><a href="#">CSS</a></li> </ul>

例えば、カーソルがaラベルに移動すると、aラベルは右に距離を移動し、離れるとa位置が回復する.実装方法は次のとおりです.

$(document).ready(function() { $("#catagory a").hover(function() { $(this).animate({ paddingLeft: "20px" }, { queue: false, duration: 500 }); }, function() { $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 500 }); }); });

ここではこの方法を拡張してjQueryプラグインの形式にし,今後も別の項目で使用でき,いくつかの属性値を容易に変更できるようにしたが,jQueryプラグインの書き方を見てみよう.
2、jQueryカードの構造
下の構造はjQueryプラグインを記述する比較的良い構造であるべきで、私は原作者のいくつかの注釈を相応の翻訳を行った.

//     ，                  (function($) { //       jquery $.fn.extend({ //     pluginname: function() { //          return this.each(function() { //               }); } }); //  jQuery    ，          javascript       "$"  })(jQuery); 

次に、プラグインに変更可能なプロパティを追加し、ユーザーが自分のニーズに応じて変更できるようにします.また、対応するデフォルト値を指定します.

(function($){ $.fn.extend({ //             pluginname: function(options) { //            var defaults = { padding: 20, mouseOverColor : '#000000', mouseOutColor : '#ffffff' } var options = $.extend(defaults, options); return this.each(function() { var o = options; //          //              alert(o.padding); }); } }); })(jQuery); 

3、 jQuery

(function ($) { $.fn.extend({ //     - paddingList paddingList: function (options) { //       var defaults = { animatePadding: 10, hoverColor: "Black" }; var options = $.extend(defaults, options); return this.each(function () { var o = options; //               ul    var obj = $(this); //  ul  a   var items = $("li a", obj); //  hover()   a items.hover(function () { $(this).css("color", o.hoverColor); //queue false            $(this).animate({ paddingLeft: o.animatePadding }, { queue: false, duration: 300 }); }, function () { $(this).css("color", ""); $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 300 }); }); }); } }); })(jQuery);

最後に、プラグインを使用する方法は次のとおりです.

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

完全なコードは次のとおりです.
        (function($){$.fn.extend(//プラグイン名-paddingList paddingList:function(//パラメータとデフォルト値var defaults={                         animatePadding: 10,                         hoverColor: "Black"                    };                     var options = $.extend(defaults, options);                     return this.each(function(){var o=options;$.fn.extend//要素集合を変数に割り当てるこの例ではulオブジェクトvar obj=$(this);//ulのaオブジェクトvar items=$(「li a」obj)を得る;//hover()イベントをa itemsに追加します.hover(function(){$(this).css("color",o.hoverColor);//queue falseはアニメーションキューに追加しないことを示す$(this).animate({paddingLeft:o.animatePadding},{queue:false,duration:300});                        }, function () {                             $(this).css("color", "");                             $(this).animate({ paddingLeft: "0"}, { queue: true, duration: 300 });                         });                     });                 }             });         })(jQuery);//プラグイン$(document)を使用します.ready(function () {             $("#catagory").paddingList({ animatePadding: 30, hoverColor: "Red"});         });