jqueryプラグイン学習(5)_jquery

このセクションではプラグインをカプセル化します。進捗状況はどうですか?

一般に、外部にリリースされるプラグインはカプセル化される必要があり、カプセル化されたプラグインも仕様に準拠する必要があります。この方法で作成されたプラグインのみがプロモーション価値を持ち、他の人に愛されます。ユーザー。

最初のステップは、独立したドメインを定義することです。コードは次のとおりです。

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

(function($){
//since Define plug-in code
}) (jQuery) //Encapsulate plug-in

作成するプラグインの種類を決定し、作成方法を選択します。たとえば、次のようになります。要素のフォントの色を設定するプラグインを作成するには、jquery オブジェクト メソッドを作成する必要があります。jquery がプラグイン拡張メソッド extend() を提供していることを考慮すると、このメソッドの呼び出しはより標準化されます。

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

(function($){
//プラグイン コードを定義します
$.extend($.fn,{ //jquery オブジェクト拡張メソッド

})
})(jQuery) //プラグインをカプセル化します

一般に、プラグインはプラグインの動作を制御するパラメーターを受け入れます。たとえば、色を設定するプラグインの場合、ユーザーは同時にフォントの色を設定できるようにする必要があります。ユーザーが色を設定しない場合は、デフォルトの色を維持する必要があることを考慮する必要があります。

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

(function($){
//プラグイン コードを定義してから
$.extend($.fn,{
color : function(options){
var options = $.extend({bcolor : "white",fcolor: " black"},options ; 🎜>
コードをコピー


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

;(function($){
$.extend ($.fn,{

color : function(options){var options = $.extend({bcolor :"white",fcolor :"black"},options); //関数本体 return this.each(function(){ $(this).css("color",options.bcolor); $(this).css("background",options.fcolor); }); }// color==end

})

})(jQuery);


呼び出して確認してください




コードをコピーします


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

$("h1").color({bcolor : "#ccc",fcolor:" #eee"});
$(' a').color("#fff");