jQueryプラグイン_jqueryの書き方を共有する

1. 概要

まず HTML コードを見てください

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

• jQuery


• Asp.net a>


• SQL Server


• CSS

例えば、カーソルが a ラベルに移動すると、a ラベルは右に一定距離移動し、離れると a の位置が復元されることを実現したいとします。実装方法は以下の通りです:

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

$(document).ready(function( ) {
$("#catagory a").hover(function() {
$(this).animate({ paddingLeft: "20px" }, { queue: false, period: 500 });
}、function（）{
function（）🎜>

このメソッドを拡張して jQuery プラグインの形式で記述します。これは将来他のプロジェクトでも使用でき、いくつかの属性値を簡単に変更できます。 jQueryプラグイン。

2. jQuery プラグインの構造

以下の構造は、jQuery プラグインを作成するためのより良い構造になるはずです。元の作成者のコメントの一部をそれに応じて翻訳しました。

コードをコピー

コードは次のとおりです://競合を避けるには、メソッドを使用します。匿名メソッドを (function($) {

) でラップします //このメソッドを jquery

に拡張します $.fn.extend({
) //プラグイン名
pluginname: function () {
});
//P ass jQuery をメソッドに組み込むと、「$」の代わりに JavaScript で任意の変数を使用できるようになります。
次に、ユーザーがニーズに応じて変更できるように、変更可能な属性をプラグインに追加します。同時に、対応するデフォルト値を提供する必要があります。





コードをコピー


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

(function($){
$.fn.extend({
// オプションの変数をメソッドに渡します
pluginname: function(options) {
デフォルト値を設定しますカンマ区切り
vardefaults = {
カラー: '#ffffff'
$.extend(デフォルト、オプション);アラート(o.padding);
3. jQuery プラグインを実装します





コードをコピー


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

(function ($) {
$.fn.extend({
) //プラグイン名 - paddingList
paddingList: function (options) {

vardefaults = {
animatePadding: 10,
hoverColor: "Black"
var options = $.extend(defaults, options);
Function () {
var o = オプション; 🎜> //変数に設定されています: 300 });
);
最後に、プラグインの使用方法を示します:





コードをコピー


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


//プラグインを使用します
$(document).ready(function() {
$("#catagory").paddingList({ animatePadding: 30, hoverColor: "Red" });
});

作成者: Friend ソース: jQuery Learning