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 文件选择控件,可以对图片文件和文本文件进行预览,以及其他功能.该插件增强了这些插件,并且将组件的初 ...
随机推荐
- 给即将面临Noip的二班同学
给即将面临Noip的二班同学: 我们共同走过了一年,在这里,真正认识彼此…… 失落过,但更多是欢笑…… 或许我们班的信息学竞赛承受着巨大的压力,但正因为这样,我们才学会了坚持:或许我们得不到他人的认可 ...
- react-native 入门资源合集
# 了解react-native React Native enables you to build world-class application experiences on native pla ...
- objective-C Ⅱ
objective-C Ⅱ 接第一讲 objective-c初识 一.oc中的数组:NSArray 定义: NSArray *arrayName=[NSArray arrayWithObje ...
- zoj 3708 Density of Power Network
/*看英文和图我头都大了,不过很简单的.*/ #include<string.h> #include<stdio.h> ][],q[],w[]; int main(int ar ...
- iOS 技能集结号
1. 获取磁盘总空间大小 2. 获取磁盘可用空间大小 3. 获取指定路径下某个文件的大小 4. 获取文件夹下所有文件的大小 5. 获取字符串(或汉字)首字母 6. 将字符串数组按照元素首字母顺序进行排 ...
- java内存映射文件
内存映射文件能够让我们创建和修改大文件(大到内存无法读入得文件),对于内存映射文件,我们可以认为是文件已经全部被读入到内存当中,然后当成一个大的数字来访问,简化修改文件的代码. 1.directBuf ...
- docker4dotnet
docker4dotnet #1 – 前世今生 & 世界你好 作为一名.NET Developer,这几年看着docker的流行实在是有些眼馋.可惜的是,Docker是基于Linux环境的 ...
- ASP.NET MVC进阶之路:依赖注入(Di)和Ninject
0X1 什么是依赖注入 依赖注入(Dependency Injection),是这样一个过程:某客户类只依赖于服务类的一个接口,而不依赖于具体服务类,所以客户类只定义一个注入点.在程序运行过程中,客户 ...
- Hibernate 知识提高
主键生成策略有: UUID,increment.Hilo.assigned:对数据库无依赖 identity:依赖Mysql或sql server,主键值不由hibernate维护 sequence: ...
- android api 中文 （74）—— AdapterView.AdapterContextMenuInfo
前言 本章内容是android.widget.AdapterView.AdapterContextMenuInfo,版本为Android 2.3 r1,翻译来自"cnmahj",欢 ...