`
ioryioryzhan
  • 浏览: 154843 次
  • 性别: 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

 

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

 

 

分享到:
评论

相关推荐

    jQuery多种消息提示插件growl-notification.zip

    同时,由于其基于jQuery,因此与其他jQuery插件和库的兼容性较好,可以轻松集成到现有项目中。 总结起来,jQuery消息提示插件growl-notification为网页开发提供了一种强大且灵活的用户反馈机制,通过理解和掌握其...

    前端项目-jquery.notification.zip

    "前端项目-jquery.notification.zip" 提供了一个基于 jQuery 的 WebKit 通知插件,它能帮助开发者快速、便捷地实现网页通知功能,为用户提供即时反馈,从而提升用户体验。 **jQuery Notification 插件简介** ...

    jQuery Bar 插件

    jQuery Bar 插件可以轻松与其他jQuery插件(如Bootstrap、jQuery UI等)结合使用,提供更丰富的用户体验。只需确保正确加载依赖和插件顺序,就可以实现无缝集成。 总结来说,jQuery Bar 插件是提升网页互动性和视觉...

    Jquery特效--最好的设计

    - **简介**:版本为1.2.07的jQuery插件,用于实现下拉菜单。 - **特点**: - 功能全面,支持多种触发方式。 - 兼容性好,适用于多种浏览器。 #### 二、消息提示类 消息提示是网页应用中常见的交互元素之一,用于...

    jQuery顶部通知提示插件

    总之,jQuery顶部通知提示插件为网页开发提供了便捷的工具,帮助开发者创建吸引用户注意力、可自定义且功能丰富的通知系统。通过灵活的样式定制和回调函数支持,它可以适应各种应用场景,提升网页的交互性和用户体验...

    jquery.peekABar:通知栏的jQuery插件

    jquery.peekABar 通知栏的jQuery插件,带有很多自定义选项。重要的提示我们已经停止支持bower以来的软件包管理器v3.0.0 。安装npm install jquery-peek-a-bar --save选件html 使用自定义HTML作为条形文字。 类型: ...

    JQuery模拟系统桌面

    6. **通知和提示**:通过jQuery UI的Notification插件或者自定义的弹出层,可以实现系统消息的通知和提示。 7. **动画效果**:jQuery UI提供了丰富的动画效果,如淡入淡出、滑动等,使桌面操作更具动态感。 在实现...

    jquery Cookie ,jquery.js

    jQuery并没有内置专门的Cookie插件,但可以通过第三方插件如`jquery.cookie.js`来扩展jQuery的功能。不过,这里我们将主要关注使用原生JavaScript方法与jQuery结合的方式来处理Cookie。 1. **设置Cookie** 要设置...

    Jquery特效大全

    jQuery Cycle Plugin 是一个常用的 jQuery 幻灯片插件,它支持多种过渡效果和自定义选项。它可以用于创建复杂的图片轮播效果。 **3.10 Zoom Image** Zoom Image 插件用于创建图片缩放效果。它可能支持鼠标悬停时...

    jQuery响应式消息通知插件特效源码.zip

    【jQuery响应式消息通知插件特效源码】是一款基于JavaScript库jQuery开发的,用于实现网页上的动态消息通知功能的插件。此插件设计目的是为了提供一种高效且易于集成的方式,帮助开发者在网页上创建出吸引用户注意力...

    Bootstrap+jQuery仿Mac系统弹出消息提示框插件.zip

    这个"Bootstrap+jQuery仿Mac系统弹出消息提示框插件"结合了两者的优点,为开发者提供了一种快速创建类似Mac OS风格的通知弹窗的方式。 首先,让我们详细了解一下Bootstrap。Bootstrap是由Twitter开发的开源前端框架...

    Notify – 基于jquery的消息通知插件

    Sticky 是一个简单易用的jQuery插件,它允许开发者在页面的任意角落或中央位置显示消息通知。用户可以选择手动关闭通知,或者设定通知自动消失的时间,提供了灵活的定制选项以适应不同的设计需求。了解更多详情,请...

    Jquery jNotify

    jQuery jNotify是一款轻量级的JavaScript插件,它基于流行的jQuery库,专为实现通知(Notification)功能而设计。该元件提供了一种简单但实用的方式来向用户显示消息,通常用于系统反馈、操作成功或错误提示等场景。...

    jQuery UI仿webqq桌面系统WebOS界面操作

    jQuery UI的Notification插件或自定义的弹出框可以实现通知功能,而OptionsMenu或Dropdown Menu则适合创建设置菜单。通过精心设计的交互逻辑,这些功能可以提供与真实桌面系统类似的体验。 在实现过程中,需要注意...

    Jquery各种消息提示框

    总的来说,jQuery通过其丰富的API和众多插件,为开发者提供了创建各种消息提示框的强大工具。通过灵活运用,可以构建出更加人性化、交互性强的Web应用。理解并掌握这些技术,对于提升用户体验和优化网页设计至关重要...

    jquery功能强大的提示信息特效.zip

    可以使用jQuery Notification插件来实现这一功能。 4. **Modal对话框**:模态对话框会暂停页面上的其他交互,直到用户对其作出响应。例如,`$.fn.dialog()`是jQuery UI中的一个方法,可以创建模态对话框。 5. **...

    弹出右下角消息框的几个例子

    1. **使用jQuery插件:** `jQuery`拥有丰富的第三方插件资源,如`SweetAlert2`、`PNotify`和`toastr`等,这些插件提供了美观且可自定义的消息框。例如,`toastr`允许我们在页面右下角创建非侵入性的通知,可以通过...

    Jquery不同弹出效果

    jQuery插件如Growl或PNotify,可以创建类似系统通知的弹出框,包含可定制的标题、消息、图标和持续时间。 总的来说,jQuery的弹出效果丰富多样,涵盖了模态对话框、提示信息、弹出窗口、弹出菜单、弹出层和通知等...

Global site tag (gtag.js) - Google Analytics