jQuery開発プラグインの簡単な構文
1422 ワード
オブジェクトレベルのプラグイン開発
フレームコードの作成
$.fn.extendは
コードの内容を入力
borderメソッドはoptionsパラメータを受信し、jsonオブジェクトを受信します.
使用方法
入力されたjsonオブジェクトは、属性に従ってデフォルト値を1つずつ置き換えます.
クラスレベルのプラグイン開発
$に類似する.trim()または$.ajax()は、jQueryセレクタのインスタンスを先に取得する必要はありません.
構文フレームワークはオブジェクトレベルと同じで、次のように機能エンティティを返すだけです.
フレームコードの作成
$.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)