学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
发上来与大家分享,期待大家的宝贵意见!!
分享到:
相关推荐
jQuery多种消息提示插件growl-notification.zip
Android 源码:toast_and_notification,100ms延迟后,振动250ms,停止100ms后振动500ms,没有搞懂具体是干什么用的,本人非专业人士,发在源码爱好者,供喜欢的人研究。
jquery.notification 一个 jQuery 通知插件 用法: $.notify(title, content, type, delay); /* * type here should be one of "success", "info", "warnig" or "error" /*
通过RemoteView制作自定义Notification
实现自定义的弹出通知视图(Notification)-定制颜色、图标等 [注意:本资源来自网络,如有侵权,请联系我删除,谢谢。]
自定义Notification样例工程,包含原始样例,定义通知样式,通知内容的更新,以及点击事件。
Android自定义Notification,很实用的一个功能
jquery.peekABar 通知栏的jQuery插件,带有很多自定义选项。重要的提示我们已经停止支持bower以来的软件包管理器v3.0.0 。安装npm install jquery-peek-a-bar --save选件html 使用自定义HTML作为条形文字。 类型: ...
Ext JS Notification 插件 Ext JS Extension,先备份一下,以防以后用到
4.1创建自定义布局的notification 布局包含progressbar progressbar颜色可以变 自定义progressbar 布局中多个按钮可以点击 动态更新notification中的progressbar
oracle:Heap size 3597K exceeds notification threshold 解决方法
Comment Reply Notification插件介绍: Comment Reply Notification插件是对WordPress 2.7版本新增Thread Comments功能的补充,当博客上的留言有人回复的时候,会发送一封邮件通知用户,他的留言有新的回复了,这样...
插件描述:notification是一款基于Animate.css的炫酷jQuery消息通知框插件。该插件可以在屏幕的四个角显示消息通知框,结合Animate.css可以制作出多种效果非常炫酷的CSS3动画特效。 演示地址:...
Anroid,一个简单的带按钮自定义通知栏,欢迎下载试用,人人为我,我为人人,共同学习,共同进步
iphone notification机制导读。理解notification的工作机理,不仅仅局限于简单使用。
显示Notification: NSString *notificationText = @"This is a test notification"; CGFloat duration = 1.0f; [self showStatusBarNotification:notificationText forDuration:duration]; 自定义Notification...
自定义notification,其中包含进度条,进度条背景色随着进度的变化而变化,notification中的button可点击