`
ioryioryzhan
  • 浏览: 153609 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

自定义jquery插件:为jquery加入Notification机制

阅读更多

学jQuery不久,也学着写插件,哈。。

在 jQuery基础上加入一个Notification机制。Notification是消息的意思。使jQuery对象可以发出Notification,也可以监听感兴趣的Notification,并为之注册监听函数。当一个消息被抛出时,监听函数便会被调用。

 

这个插件的目的是让每一个jQuery对象负责自己的行为,使它们成为一个独立的功能模块,jQuery对象注册自己感兴趣的消息,当这个消息被发出时,也由jQuery对象自己负责处理这个消息。

 

结合一个例子:

 

代码为:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Untitled Document</title>
		<script type="text/javascript" src="jquery-1.2.6.js"></script>
		<script type="text/javascript" src="jquery.notification.js"></script>
		<script type="text/javascript">
			var i=0;
			$(document).ready(function(){
				var func1 = function(name,param){								
					this.val(this.val()+"  "+param.text);
				};
				$("#text1").addJqueryNotificationListener("btnClick",func1);
				
				
				var func2 = function(name,param){									
					$("#text2").val($("#text2").val()+"  "+param.text);
				};
				$("#text2").addJqueryNotificationListener("btnClick",func2);
				
				
				$("#btn1").click(function(){					
					$("#btn1").sendJqueryNotification("btnClick",{text:("第"+((i++)+1)+"次点击")});
				});
				
				//也可以调用JqueryNotificationManager.sendJqueryNotification发出Notification
				//JqueryNotificationManager.sendJqueryNotification("btnClick",{text: ("第" + ((i++) + 1) + "次点击")});		
				
				$("#btn2").click(function(){	
					$("#text2").removeJqueryNotificationListener("btnClick",func2);									
				});				
				
			});
		</script>
	</head>
	<body>
<input id="btn1" type="button" value="点击我发出Notification" style="width:200px;height:100px"/>	
<input id="btn2" type="button" value="点击我解除text2监听" style="width:200px;height:100px"/>		
<input id="text1" type="text" style="width:200px;height:100px"/>
<input id="text2" type="text" style="width:200px;height:100px"/>.
	
	</body>
</html>

 

页面上有两个按钮与两个输入框:结合代码:

$("#text1").addJqueryNotificationListener("btnClick",func1);
$("#text2").addJqueryNotificationListener("btnClick",func2);

 为 text1,text2注册Notification监听,表示它们对"btnClick"这个Notification感兴趣,监听函数分别为func1,func2.

$("#btn1").click(function(){					
					$("#btn1").sendJqueryNotification("btnClick",{text:("第"+((i++)+1)+"次点击")});
				});

表款当btn1点击时,会发出"btnClick"这个Notification,同时带一个参数,{text:("第"+((i++)+1)+"次点击")}.发出消息后,已经为这个Notification注册的监听函数func1,func2就会被调用。

 

$("#btn2").click(function(){	
					$("#text2").removeJqueryNotificationListener("btnClick",func2);									
				});	

上一行代码表示,当btn2点击时,解除text2对"btnClick"的监听。在上图中,第二次点击btn1时,text2对"btnClick"的监听已经被解除,所以只有text1响应这个消息。

 

这个例子很简单,只是个用来测试的Demo

 

发上来与大家分享,期待大家的宝贵意见!!

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics