JQueryプラグイン開発関連

4398 ワード

jqueryプラグイン

ほとんどのjsツールのソースコードをめくると、このようなコードによく遭遇します.
コード1:

（function($){
    // some code here...
}）(JQuery);

今日よく考えてみると、このコードの実際の機能は
匿名関数を定義し、ページloadが完了した後に実行します.簡略版は次のとおりです.
コード2:

(function(){
//some code here...
})();

これは、コード1ではJQueryというオブジェクトをパラメータとして匿名関数に渡し、匿名関数ではパラメータ(パラメータ)に別の名前$を付けたことを示している.
今日実現した
新しいメッセージの内容をページに点滅させる手順は、次のとおりです.
この機能を簡単に実現するには、以下のようにすればよい.

window.setInterval(function(){
      $("#targetId").toggle();
},500);

それだけで、このidがtargetIdの要素がページで点滅し始めます.しかし、他のページ要素も簡単にこのような機能を実現できるようにしたいと思っています.また、点滅しないようにいつでもコントロールすることができます.jqueryUIのような$("#modal-dialog")を実現する必要があります.
dialog();こんな道具.
これはjqueryの関数を拡張する必要があります.上の原理を借りて、次のコードがあります.

 (function($){
	$.fn.extend({
		flash:function(opt){
			$(this).each(function(){
				var tmp = $(this);
				window.setInterval(function(){
					$(tmp).toggle();
				},500);
			});
		}
	});
})(Jquery);

ここでは、flashをこの点滅機能の関数名として使用し、optは伝達されるパラメータです.しかし、このように、この方法は一度しか呼び出せません.これ以上呼び出すと、要素の点滅が加速したり、暴走したりします.毎回直接toggleになっているからです.これらの要素のintervalオブジェクトを記録する配列が必要です.

 (function($){
<span style="white-space:pre">	</span>var _intervalArray = [];
	$.fn.extend({
		flash:function(opt){
			$(this).each(function(){
				var tmp = $(this);	
 				var targetId = tmp .attr("id");
 				var interval = _intervalArray[targetId];
				if(!interval){
					interval = window.setInterval(function(){
						$(tmp).toggle();
					},500);
					_intervalArray[targetId] = interval;
				}
			});
		}
	});
})(Jquery);

jsは奇妙な言語であり,文字列も配列配列としてindexにアクセスできる.ここでは配列で記録し、次の呼び出し時に点滅していることに気づいたらintervalを使わないでください.
私は$(「SELECTOR-CODE」)を通過したいです.flash();で点滅を開始し、$(「SELECTOR-CODE」)を通過する.flash("stop");次のように点滅を停止します.

(function($){
 	var _intervalArray = [];
 	$.flashOnTarget = function flashOnTarget(targetId){
 		$("#"+targetId).toggle();
 	};
 	$.fn.extend({
 		flash:function(opt){
 			var target = $(this);
 			for(var i=0; i<target.length; i++ ){
 				var targetId = $(target[i]).attr("id");
 				var interval = _intervalArray[targetId];
 				if(opt=='stop' && interval){
 					window.clearInterval(interval);
					 $(target[i]).show();
 				}else{
 					if(!interval){
 						interval = window.setInterval("$.flashOnTarget('"+targetId+"')",300);
 						_intervalArray[targetId] = interval;
 					}
 				}
 			}
 			return target;
 		}
 	});
})(jQuery);

最後にこのコードでsetIntervalの匿名関数を単独で独立させ、コードを統一的に置くことができるようにしました.
(function($){
})();
で、この関数をjqueryの拡張関数として定義しました.ここでもう一つ興味深い点は、windowのsetIntervalとsetTimeoutの2つの関数は
パラメータを渡すことができないので、変相の伝達パラメータのために、文字列に書くしかありません.
完全なコードは次のとおりです.

<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
	$("span").flash({cycle:100});
	window.setTimeout(function(){
		$("#sp1,#sp2").flash("stop");
	},5000);
});
(function($){
	var _intervalArray = [];
	$.flashOnTarget = function flashOnTarget(targetId){
		$("#"+targetId).toggle();
	};
	$.fn.extend({
		flash:function(opt){
			var target = $(this);
			for(var i=0; i<target.length; i++ ){
				var targetId = $(target[i]).attr("id");
				var interval = _intervalArray[targetId];
				if(opt=='stop' && interval){
					window.clearInterval(interval);
					$(target[i]).show();
				}else{
					if(!interval){
						interval = window.setInterval("$.flashOnTarget('"+targetId+"')",opt? (opt.cycle ? opt.cycle:400) : 400);
						_intervalArray[targetId] = interval;
					}
				}
			}
			return target;
		}
	});
})(jQuery);
</script>
<style>
span{
 border:1px solid red;
 color:red;
 padding:5px;
}
</style>
</head>
<body>
<span id="sp1">     1</span><br><br>
<span id="sp2">     2</span><br><br>
<span id="sp3">     3</span><br><br>
<span id="sp4">     4</span><br><br>
</body>
</html>

パスワード入力遅延マスク

easyUI行ネストされたオブジェクトを表示する方法