JQueryプラグイン開発サンプル code_jquery-jsチュートリアル-php.cn

JQueryプラグイン開発サンプル code_jquery

WBOY

リリース： 2016-05-16 17:17:12

オリジナル

1029 人が閲覧しました

JQuery プラグイン開発:
クラスレベルの開発、新しいグローバル関数の開発
オブジェクトレベルの開発、JQuery オブジェクトの新しいメソッドの開発
1. - グローバルメソッドを定義します

jQuery。 foo = function( ) { 
alert('This is a test.'); 

名前空間を使用すると、名前空間内での関数の競合を回避できます。

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

jQuery.apollo={ 
 fun1 :function( ){ 
 console.log('fun1'); 
 fun2:function(){ 
 console.log('fun2'); } 




2. オブジェクト レベルの開発 - jQuery オブジェクト メソッドの定義

コードをコピー

コードは次のとおりです。 (function($) { $.fn.pluginName = function() {

}; 
})( jQuery); 
//プラグインは次のように呼び出されます: 
$('#myDiv').pluginName(); 


 オプションを受け入れますプラグインの動作を制御するパラメータ 

コードをコピー

コードは次のとおりです:(function($){ $.fn.fun2=function (オプション){

vardefaultOption={

 param1:'param1', 
 param2:'param2' 
 } 
 $.extend(defaultOption,option); 
 console.log (defaultOption) 
 } 
})(jQuery); 
$(function(){ 
 // のように呼び出されます) this 
 $("body").fun2({ 
 param1:'new Param1' 
 }) 
}); 


プライベート関数を非公開にします

コードをコピー

コードは次のとおりです: (function($) { //プラグイン定義

$.fn.hilight = function(options) {

 debug(this); 
 // ... 
 }; // デバッグ用のプライベート関数 
 / / "debug" メソッドは外部クロージャから入ることができないため、実装では Private です。 
 function debug($obj) { 
 if (window.console && window.console.log) 
 window.console.log('ハイライト選択数: ' $obj.size()); > }; 
// ... 
})(jQuery);