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

ioryioryzhan

浏览: 154630 次
性别:
来自: 北京

最近访客更多访客>>

智拔天下

没有不想起

wudiyifeng

songliang_323

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ajax / JavaScript

jQuery JavaScript HTML

学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

发上来与大家分享，期待大家的宝贵意见！！

jqueryNotification.rar (18.4 KB)
描述: 源代码
下载次数: 59

分享到：

jquery插件开发方法 | ie6中href设为javascript:void(0)页面无法 ...

2008-08-21 17:09
浏览 2585
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论