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>