jQuery開発プラグインの簡単な構文

1422 ワード

オブジェクトレベルのプラグイン開発
フレームコードの作成
$.fn.extendは レベルのプラグインを作成します
;(function($){
    $.fn.extend({
        "border":function(options){
            //     
        }
    });
})(jQuery)

コードの内容を入力
;(function($){
    $.fn.extend({
        "border":function(options){
            //     
            options = $.extend({
                width:"1px",
                line:"solid",
                color:"#eee"
            },options);
            this.css("border",options.width+' '+options.line+' '+options.color);
            return this;//         
        }
    });
})(jQuery)

borderメソッドはoptionsパラメータを受信し、jsonオブジェクトを受信します.
使用方法
$("#nav").border({
    width:"10px",
    color:"red"
    });

入力されたjsonオブジェクトは、属性に従ってデフォルト値を1つずつ置き換えます.
クラスレベルのプラグイン開発
$に類似する.trim()または$.ajax()は、jQueryセレクタのインスタンスを先に取得する必要はありません.
構文フレームワークはオブジェクトレベルと同じで、次のように機能エンティティを返すだけです.
;(function($){
    $.fn.extend({
        "border":function(options){
            //     
            options = $.extend({
                content:"default"
            },options);
                        //     ,        
            var retVal = alert(options.content);
            return retVal;
        }
    });
})(jQuery)