jqueryプラグイン制作チュートリアル txtHover

jqueryプラグイン制作チュートリアル txtHover_jquery

WBOY

リリース： 2016-05-16 17:50:39

オリジナル

970 人が閲覧しました

プラグインの構造スケルトンを定義します:
この本で最初に使用される構造スケルトンは次のとおりです:

 
jQuery.fn.fluginmane=function(){ 
 return this.each(function(){ 
 //code... 
 }) 
} 
 

この構造は、特に、競合を避けるために $ を使用せずに jQuery を使用することが本の中で述べられています。ここでは、競合の可能性を防ぐために、匿名関数を使用してプラグインの構造スケルトンを実装します。また、皆さんが匿名関数についてよく理解していただければ幸いです。

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

 
(function($){ 
 $.fn .fluginname=function(){ 
 return this.each(function(){ 
 //code... 
 }); 
 
注: 
 1. 統一と標準化のため、プラグイン ファイルには jquery.fluginname.js の形式で名前が付けられます (fluginname はプラグインの名前を表します)。 

2. 使用する関数はプライベートである必要があり、外部からアクセスできないようにすることで、プラグインが外部要因による影響や干渉を受けないようにすることができます (匿名関数はこれを保証しています)。
3. ユーザーがオプションを使用してプラグインの動作を制御できるようにします。
4. デフォルトのオプションでは外部アクセスが許可されているため、ユーザーは最小限のコードでカスタマイズできます。
5.this.each() は要件を満たすすべてのオブジェクトを走査し、それ自体が jquery オブジェクトであり、プラグインは最終的にオブジェクトを返します。実はJavaScriptのチェーンモードはこのようにして実現されています。
最初のプラグイン: txtHover
1. コード実装:

コードをコピーコードは次のとおりです。 (function($){

$.fn.txtHover=function(){

 return this.each(function(){ 
 $(this).text( 'テキストが変更されました!'); 
 } 
}); 

 
 2. HTML ファイルを作成し、追加します。 jquery とプラグイン リファレンス、コードは次のとおりです: 

コードをコピー

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

type="text/javascript" src="Scripts/jquery-1.4.1.min.js">

ホバーイベントを追加します:

コードをコピー

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

(function ($) {
$.fn.txtHover = function () {

return this.each(function () { var temp = $(this).text(); $(this).hover(function () { $(this).text('text変更されました!'); }, 関数 () { $(this).text(temp) }); );

最初 このバージョンでは、ページがロードされると、この設計はほとんど役に立ちません。最も一般的に使用されるのは、マウスがテキスト上に移動したときに何らかの変更を生成することです。プラグインが改良され、ホバーイベントが追加されました。まず、div の元の値を変数 temp に保存します。マウスを div の上に移動すると、テキストが置き換えられます。 
カスタム オプションの追加
 ユーザーがより柔軟に使用できるようにするには、カスタム関数を追加し、プラグイン コードを変更する必要があります: 




コピーcode


 コードは次のとおりです: 
 
(function ($) { 
$.fn.txtHover = function (options) { 
var defaults = { txt: 'テキストが変更されました!' }; 
var opt = $. extend(defaults, options); 
return this.each(function () { 
var self = $(this); 
var temp = self.text(); 
self.hover(function) () { 
self.text(opt.txt); 関数 () { 
self.text(temp) 
}); 
})(jQuery); 

 
プラグインは変数のデフォルトを定義し、デフォルトのテキスト情報を設定します。 $.extend() (この関数を知らない友人は情報を確認できます) メソッドを使用して、新しい変数 opt を展開します。ユーザーが渡したオプション変数に txt が含まれている場合、opt は渡された変数を使用します。ユーザーが指定した場合は、デフォルトのシステムが使用されます。システム内で var self = $(this) を定義し、this オブジェクトを置き換えます。これは JavaScript では非常に厄介なオブジェクトです。別の関数コンテキストで表現されるオブジェクトは異なります。これを別の変数に渡すと、プログラム内のエラーが回避されます。慣れていない人はこの知識ポイントをマスターする必要があります。 
 ユーザーが HTML ページでプラグインを呼び出す場合、マウスを div 上に移動するとテキストの内容をカスタマイズできます。 
$(document).ready(function () { 
 $('#test').txtHover({ txt: 'test' }); 
}); さて、今日の例はここまでです。 。 