jQuery通知插件noty
jQuery 通知查件noty 简单使用
官方：http://ned.im/noty/
其它查件推荐
NotifIt
Demo http://js.itivy.com/jiaoben1852/index.html. 这个插件也不错 目前未找到官方网址 不过Down下这个Demo也可以的 所需文件是jquery.js notifIt.js zzsc.css 在notifIt.js中有通知显示时间的设定。缺点：通知一次只能弹出一个 稍作修改后应该也很好的。
回到刚才的话题 本插件需要jquery.jnotify.css jquery.jnotify.js 以及jQuery和jquery.ui
通知显示时间在jquery.jnotify.js的62行可以看到
这里是我的用的一个简单小Demo
function forTestNoty(){
$('#testNoty').click(function(event) {
/* Act on the event */
$.ajax({
url: "getRes",
type: "POST",
//contentType:'application/json',//u can not use this word or it will not work
data:{amount:'pics',firstName: 'first',email:'xxx@xx'},
dataType: 'JSON',
success: function(result) {
//alert(result);
if(result.status=='ok'){
$('#Notification').jnotifyAddMessage({
text: 'This is a non permanent message.',
permanent: false
});
}
}
});
});
}
java
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
PrintWriter writer = response.getWriter();
Gson gson =new Gson();
Map res=new HashMap();
res.put("status", "ok");
res.put("value", "the request have been handled correctly");
System.out.println(gson.toJson(res));
writer.print(gson.toJson(res));
}
官方Demo已经写得很清楚了 这里就是copy一下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css"
rel="stylesheet" type="text/css" />
<link href="jquery.jnotify.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"
type="text/javascript"></script> <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> <script src="jquery.jnotify.js" type="text/javascript"></script> <script type="text/javascript">
jQuery(function($) {
var $themeswitcher = $('.ui-themeswitcher');
if ($themeswitcher.themeswitcher) {
$themeswitcher.themeswitcher();
}
else {
$themeswitcher.before('<div class="ui-widget" style="margin-bottom: 0.5em">'
+ '<div class="ui-state-error ui-corner-all" style="padding:0.3em;">'
+ '<span class="ui-icon ui-icon-alert" style="float:left;margin-right:0.3em"></span>'
+ 'Unable to load ThemeSwitcher from jqueryui.com'
+ '</div>'
+ '</div>');
}
});
</script> </head>
<body>
<div id="Notification">
</div>
<h1>
jNotify (JQuery Notification Engine)</h1>
<div class="ui-themeswitcher">
</div>
<br />
<div id="StatusBar" style="height: 20px;">
</div>
<br />
<button id="addStatusBarMessage">
Add a non permanent message (Status Bar)</button>
<br />
<button id="addStatusBarError">
Add a permanent error (Status Bar)</button>
<br />
<br />
<button id="addNotificationMessage">
Add a non permanent message (Notification)</button>
<br />
<button id="addNotificationError">
Add a permanent error (Notification)</button> <script type="text/javascript">
$(document).ready(function() { // For jNotify Inizialization
// Parameter:
// oneAtTime : true if you want show only one message for time
// appendType: 'prepend' if you want to add message on the top of stack, 'append' otherwise
$('#StatusBar').jnotifyInizialize({
oneAtTime: true
})
$('#Notification')
.jnotifyInizialize({
oneAtTime: false,
appendType: 'append'
})
.css({ 'position': 'absolute',
'marginTop': '20px',
'right': '20px',
'width': '250px',
'z-index': '9999'
});
// -------------------------------------------------------------------------- // For add a notification on button click
// Parameter:
// text: Html do you want to show
// type: 'message' or 'error'
// permanent: True if you want to make a message permanent
// disappearTime: Time spent before closing message
$('#addStatusBarMessage').click(function() {
$('#StatusBar').jnotifyAddMessage({
text: 'This is a non permanent message.',
permanent: false,
showIcon: false
});
}); $('#addStatusBarError').click(function() {
$('#StatusBar').jnotifyAddMessage({
text: 'This is a permanent error.',
permanent: true,
type: 'error'
});
}); $('#addNotificationMessage').click(function() {
$('#Notification').jnotifyAddMessage({
text: 'This is a non permanent message.',
permanent: false
});
}); $('#addNotificationError').click(function() {
$('#Notification').jnotifyAddMessage({
text: 'This is a permanent error.',
permanent: true,
type: 'error'
});
});
// -----------------------------------------------------
});
</script> </body>
</html>
jQuery通知插件noty的更多相关文章
- jQuery通知插件 -- noty
noty是一个jQuery的通知(信息提示)插件,灵活轻便,是一个非常棒的用于替代传统提示对话框的插件. 当前最新版本为2.1.0: 从https://github.com/needim/noty 可 ...
- noty – jQuery通知插件
noty是一个jQuery的通知(信息提示)插件,灵活轻便,是一个非常棒的用于替代传统提示对话框的插件. 当前最新版本为2.1.0: 从https://github.com/needim/noty 可 ...
- js插件---->jquery通知插件toastr的使用
toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置.toastr需要jquery的 ...
- 【JS】jquery通知插件toastr
toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成 ...
- 漂亮灵活设置的jquery通知提示插件toastr
toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成 ...
- 移动开发必备！15款jQuery Mobile插件
移动互联网的发展,来自PC端的网页并不能完全自适应移动端页面需求,使得响应式设计体验产生并成为潮流,也正是这样一种需求,促成了jQuery Mobile的流行.jQuery Mobile这样一款基于j ...
- 9款风格华丽的jQuery/CSS3插件
今天向大家分享9款效果相当不错的jQuery/CSS3插件,不多说,直接来看看这些插件吧. 1.jQuery动画下拉菜单Smart Menu 这是一款基于jQuery的动画下拉菜单,子菜单外观比较时尚 ...
- Notyf - 超级简单、响应式的 JS 通知插件
通知是网站的常用功能之一,可以用来显示消息.通告.提示等等.Notyf 是一款超级简单.响应式的 JS 通知插件,不依赖 jQuery 库,可以独立使用.赶紧试用一下吧! 在线演示 免费下载 ...
- 20个超棒的jQuery bootstrap 插件
1. Bootstrap File Input Bootstrap3.x 的一个增强版的HTML 5 文件选择控件,可以对图片文件和文本文件进行预览,以及其他功能.该插件增强了这些插件,并且将组件的初 ...
随机推荐
- one Infos
Backend Server is still running (PID:). Please try 'euc-server stop' first. (原因很简单,进程控制脚本无restart函数功 ...
- EGit with eclipse to clone project from GitHub(Step by step)
转载请注明出处! 1. To find your project URL inside GitHub: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWF ...
- python闭包以及装饰器
通俗的定义:如果在一个内部函数里,对在外部作用域(但不是在全局作用域)的变量进行引用,那么内部函数就被认为是闭包(closure).它只不过是个“内层”的函数,由一个名字(变量)来指代,而这个名字(变 ...
- js 计算两个时间差
/* * 计算两个日期的间隔天数* BeginDate:起始日期的文本框,格式為:2012-01-01* EndDate:結束日期的文本框,格式為:2012-01-02* 返回兩個日期所差的天數* 調 ...
- iOS网络请求基础
这篇是关于网络请求的,结合公司的实际情况编写,如果有不同意见欢迎留言共同讨论. iOS在9.0之后彻底放弃了NSURLConnection,现在已经改用了NSURLSession进行网络请求.一般现在 ...
- 关于一个wpf中的定时器
http://www.cnblogs.com/royenhome/archive/2010/01/24/1655168.html
- c 结构体 简单的了解
1.声明一个学生类的 结构体 struct Student{ int age; char name[20];//长度为20的字符串 int weiht;//像正常一样的申请变量,这个变量属于结构体的一 ...
- Mathematica
Mathematica是一款科学计算软件,很好地结合了数值和符号计算引擎.图形系统.编程语言.文本系统.和与其他应用程序的高级连接.很多功能在相应领域内处于世界领先地位,它也是使用最广泛的数学软件之一 ...
- 怎么理解angularjs中的服务？
AngularJS中的服务其实就是提供一种方式抽取共用类库 比如说一些工具类方法,我们传统的做法就是自己写个 utility 类,把相关的工具方法填充到utility里面去,最后把utility类放到 ...
- Cocos2d-x init() 和 onEnter() 区别
在Cocos2d-x中经常碰到 init() 和 onEnter() init()和onEnter()这两个方法都是CCNode的方法. 1.二者的执行顺序是:先init() 后onEnter(). ...