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 文件选择控件,可以对图片文件和文本文件进行预览,以及其他功能.该插件增强了这些插件,并且将组件的初 ...
随机推荐
- cocos2d-x 多点触控实现缩放及相关问题的解决方法
首先,来看下代码: 声明文件: #ifndef __loading__MoreTouches__ #define __loading__MoreTouches__ #include <iostr ...
- PHPRPC for PHP
14的路 PHPRPC for PHP PHPRPC 是一个轻型的.安全的.跨网际的.跨语言的.跨平台的.跨环境的.跨域的.支持复杂对象传输的.支持引用参数传递的.支持内容输出重定向的.支持分级错误处 ...
- 解决Agent admitted failure to sign using the kye with ssh
之前如果建立 ssh 连接,只要將公匙复制到~/.ssh/authorized_keys就可以直接登录而不需要建立密碼. 如果在使用时候出现如下信息: Agent admitted failure t ...
- android UI跨线程操作
android应用程序也是单线程程序,主线程为UI线程. android 线程是非安全的,即不要在子线程中更新 UI. public class MasterActivity extends Acti ...
- Construct Binary Tree From Inorder and Preorder/Postorder Traversal
map<int, int> mapIndex; void mapToIndex(int inorder[], int n) { ; i < n; i++) { mapIndex.in ...
- hdu 4638 Group 莫队算法
题目链接 很裸的莫队, 就不多说了... #include<bits/stdc++.h> using namespace std; #define pb(x) push_back(x) # ...
- 利用python进行数据分析之绘图和可视化
matplotlib API入门 使用matplotlib的办法最常用的方式是pylab的ipython,pylab模式还会向ipython引入一大堆模块和函数提供一种更接近与matlab的界面,ma ...
- [转] iOS多线程编程之Grand Central Dispatch(GCD)介绍和使用
介绍: Grand Central Dispatch 简称(GCD)是苹果公司开发的技术,以优化的应用程序支持多核心处理器和其他的对称多处理系统的系统.这建立在任务并行执行的线程池模式的基础上的.它首 ...
- php文件链接数据库基本代码
<?php $conn=@mysql_connect("localhost","root",""); if($conn==null) ...
- Strata 2014 上的 AzureCAT 粉笔会谈
本周,AzureCAT 团队非常高兴在 Strata 会议上首次集体亮相.对于那些对 AzureCAT 团队不太熟悉的人来说,我们是 Microsoft 云与企业部门一个核心的国际性团队,由大约 ...