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 文件选择控件,可以对图片文件和文本文件进行预览,以及其他功能.该插件增强了这些插件,并且将组件的初 ...
随机推荐
- POJ 2823 Sliding Window 【单调队列】
题目链接:http://poj.org/problem?id=2823 题目大意:给出一组数,一个固定大小的窗体在这个数组上滑动,要求出每次滑动该窗体内的最大值和最小值. 这就是典型的单调队列,单调队 ...
- Android 类似未读短信图标显示数字效果的分析
之前一直以为是应用本身在对图标进行修改,看了源码之后发现其实主要的工作并不是应用自己完成的,主要的工作在是launcher里面完成的. 关于系统里面类似未读短信的具体处理流程如下, 原理 一个应用要实 ...
- 虎记：强大的nth-child(n)伪类选择器玩法
写在前面的戏: 最近参加了度娘前端IFE的春季班,刷任务,百度真是有营销头脑,让咱们这帮未来的技术狂人为他到处打广告(我可不去哪),其中做的几个任务中有几个以前没有用到的东西, 也算是有些许收获(现在 ...
- 小猪猪逆袭成博士之C++基础篇（一）数据精度、强制类型转换、变量命名规则
小猪猪逆袭成博士之C++基础篇(一) 关键词: 数据精度.强制类型转换.变量命名规则 综述: 1.大多数编程语言通过两种方式来进一步补充其特征:一是赋予程序员自定义数据类型的权利(C++中的类):二是 ...
- BZOJ 3916: [Baltic2014]friends( hash )
字符串哈希..然后枚举每一位+各种判断就行了 ----------------------------------------------------------------------------- ...
- Spring配置机制的优缺点 - Annotation vs XML
转自 http://tianzongqi.iteye.com/blog/1458002 XML配置的优缺点: 优点: XML配置方式进一步降低了耦合,使得应用更加容易扩展,即使对配置文件进一步修改也不 ...
- php知识（第2天）
运算符 PHP中运算符一共分为9类: 赋值运算符, 算术运算符,比较运算符, 逻辑运算符, 错误抑制符, 三目运算符, 位运算符, 自操作运算符, 连接操作符 算术运算符 算术运算: 基本运算符: + ...
- 【LeetCode题意分析&解答】33. Search in Rotated Sorted Array
Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 migh ...
- [转]Swift 简介 - 苹果最新的编程语言
Swift 真的可以说是最新的编程语言了,2014wwdc刚刚发布,下面来了解一下都有哪些特点. 首先感谢原作者,主要内容是借鉴他的,参考链接 http://zh.lucida.me/blog/an- ...
- Qt将窗体变为顶层窗体（activateWindow(); 和 raise() ）
我们知道,在windows上通过鼠标双击某应用程序图标,该应用程序往往会以顶层窗口的形式呈现在我们面前,但是对于一个已经打开的非顶层窗口,我们怎么将其激活为顶层窗口呢? 要达到激活,这个必须要满足两个 ...