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 文件选择控件,可以对图片文件和文本文件进行预览,以及其他功能.该插件增强了这些插件,并且将组件的初 ...
随机推荐
- 我的MYSQL学习心得 备份和恢复(详细)
备份 逻辑备份方法 使用MYSQLDUMP命令备份 MYSQLDUMP是MYSQL提供的一个非常有用的数据库备份工具.mysqldump命令执行时将数据库备份成一个文本文件, 该文件中实际上包含了多个 ...
- Android二维码开源项目zxing用例简化和生成二维码、条形码
上一篇讲到:Android二维码开源项目zxing编译,编译出来后有一个自带的測试程序:CaptureActivity比較复杂,我仅仅要是把一些不用的东西去掉,用看起来更方便,二维码和条形码的流行性自 ...
- 转载ajax
写在前面的话: 用了很久的Asp.Net Ajax,也看了段时间的jquery中ajax的应用,但到头来,居然想不起xmlHttpRequest的该如何使用了. 以前记的也不怎么清楚,这次就重新完整的 ...
- SQL Server 动态行转列(轉載)
一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 实现代码(SQL Codes) 方法一:使用拼接SQL,静态列字段; 方法二:使用拼接SQL, ...
- Objective-c 内存管理
与 C 有一点类似,oc 需要使用 alloc 方法申请内存.不同的是,c 直接调用 free 函数来释放内存,而 oc 并不直接调用 dealloc 来释放.整个 oc 都使用对象引用,而且每一 ...
- 面试题之java 编写一个截取字符串的函数，输入为一个字符串和字节数，输出为按字节截取的字符串。 要求不能出现截半的情况
题目:10. 编写一个截取字符串的函数,输入为一个字符串和字节数,输出为按字节截取的字符串. 但是要保证汉字不被截半个,如"我ABC"4,应该截为"我AB",输 ...
- BZOJ 2442: [Usaco2011 Open]修剪草坪( dp )
dp dp[ i ] 表示第 i 个不选 , 前 i 个的选择合法的最小损失 , dp[ i ] = min( dp[ j ] ) ( max( 0 , i - 1 - k ) <= j < ...
- CDH 无法查看history log
1.配置(core-site.xml) <property> <name>hadoop.http.staticuser.user</name> <valu ...
- win7 64位的PHP5.4安装redis扩展
先看phpinfo.php信息 可以看是 PHP5.4 VC9 TS Architecture x86 说明是x86的PHP,虽然系统是64位的,所以还是要下载x86的redis 然后Github下载 ...
- 理解Python的with as语句
简单的说, with open(filepath, 'wb') as file: file.write("something") 等价于: file = open(filepath ...