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

  1. function forTestNoty(){
  2.     $('#testNoty').click(function(event) {
  3.         /* Act on the event */
  4.             $.ajax({
  5.                 url: "getRes",
  6.                 type: "POST",
  7.                 //contentType:'application/json',//u can not use this word or it will not work
  8.                 data:{amount:'pics',firstName: 'first',email:'xxx@xx'},
  9.                 dataType: 'JSON',
  10.                 success: function(result) {
  11.                     //alert(result);
  12.                     if(result.status=='ok'){
  13.                         $('#Notification').jnotifyAddMessage({
  14.                             text: 'This is a non permanent message.',
  15.                             permanent: false
  16.                         });
  17.                     }
  18.                 }
  19.             });
  20.     });
  21. }

java

  1.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  2.         // TODO Auto-generated method stub
  3.         PrintWriter writer = response.getWriter();
  4.         Gson gson =new Gson();
  5.         Map res=new HashMap();
  6.         res.put("status", "ok");
  7.         res.put("value", "the request have been handled correctly");
  8.         System.out.println(gson.toJson(res));
  9.         writer.print(gson.toJson(res));
  10.     }

官方Demo已经写得很清楚了 这里就是copy一下

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6.     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css"
  7.         rel="stylesheet" type="text/css" />
  8.     <link href="jquery.jnotify.css" rel="stylesheet" type="text/css" />
  9.  
  10.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
  11.  
  12.     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"
  13.         type="text/javascript"></script>
  14.  
  15.     <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
  16.  
  17.     <script src="jquery.jnotify.js" type="text/javascript"></script>
  18.  
  19.     <script type="text/javascript">
  20.         jQuery(function($) {
  21.             var $themeswitcher = $('.ui-themeswitcher');
  22.             if ($themeswitcher.themeswitcher) {
  23.                 $themeswitcher.themeswitcher();
  24.             }
  25.             else {
  26.                 $themeswitcher.before('<div class="ui-widget" style="margin-bottom: 0.5em">'
  27.                                 + '<div class="ui-state-error ui-corner-all" style="padding:0.3em;">'
  28.                                     + '<span class="ui-icon ui-icon-alert" style="float:left;margin-right:0.3em"></span>'
  29.                                     + 'Unable to load ThemeSwitcher from jqueryui.com'
  30.                                 + '</div>'
  31.                             + '</div>');
  32.             }
  33.         });
  34.     </script>
  35.  
  36. </head>
  37. <body>
  38.     <div id="Notification">
  39.     </div>
  40.     <h1>
  41.         jNotify (JQuery Notification Engine)</h1>
  42.     <div class="ui-themeswitcher">
  43.     </div>
  44.     <br />
  45.     <div id="StatusBar" style="height: 20px;">
  46.     </div>
  47.     <br />
  48.     <button id="addStatusBarMessage">
  49.         Add a non permanent message (Status Bar)</button>
  50.     <br />
  51.     <button id="addStatusBarError">
  52.         Add a permanent error (Status Bar)</button>
  53.     <br />
  54.     <br />
  55.     <button id="addNotificationMessage">
  56.         Add a non permanent message (Notification)</button>
  57.     <br />
  58.     <button id="addNotificationError">
  59.         Add a permanent error (Notification)</button>
  60.  
  61.     <script type="text/javascript">
  62.         $(document).ready(function() {
  63.  
  64.             // For jNotify Inizialization
  65.             // Parameter:
  66.             // oneAtTime : true if you want show only one message for time
  67.             // appendType: 'prepend' if you want to add message on the top of stack, 'append' otherwise
  68.             $('#StatusBar').jnotifyInizialize({
  69.                 oneAtTime: true
  70.             })
  71.             $('#Notification')
  72.                 .jnotifyInizialize({
  73.                     oneAtTime: false,
  74.                     appendType: 'append'
  75.                 })
  76.                 .css({ 'position': 'absolute',
  77.                     'marginTop': '20px',
  78.                     'right': '20px',
  79.                     'width': '250px',
  80.                     'z-index': '9999'
  81.                 });
  82.             // --------------------------------------------------------------------------
  83.  
  84.             // For add a notification on button click
  85.             // Parameter:
  86.             // text: Html do you want to show
  87.             // type: 'message' or 'error'
  88.             // permanent: True if you want to make a message permanent
  89.             // disappearTime: Time spent before closing message
  90.             $('#addStatusBarMessage').click(function() {
  91.                 $('#StatusBar').jnotifyAddMessage({
  92.                     text: 'This is a non permanent message.',
  93.                     permanent: false,
  94.                     showIcon: false
  95.                 });
  96.             });
  97.  
  98.             $('#addStatusBarError').click(function() {
  99.                 $('#StatusBar').jnotifyAddMessage({
  100.                     text: 'This is a permanent error.',
  101.                     permanent: true,
  102.                     type: 'error'
  103.                 });
  104.             });
  105.  
  106.             $('#addNotificationMessage').click(function() {
  107.                 $('#Notification').jnotifyAddMessage({
  108.                     text: 'This is a non permanent message.',
  109.                     permanent: false
  110.                 });
  111.             });
  112.  
  113.             $('#addNotificationError').click(function() {
  114.                 $('#Notification').jnotifyAddMessage({
  115.                     text: 'This is a permanent error.',
  116.                     permanent: true,
  117.                     type: 'error'
  118.                 });
  119.             });
  120.             // -----------------------------------------------------
  121.         });
  122.     </script>
  123.  
  124. </body>
  125. </html>

jQuery通知插件noty的更多相关文章

  1. jQuery通知插件 -- noty

    noty是一个jQuery的通知(信息提示)插件,灵活轻便,是一个非常棒的用于替代传统提示对话框的插件. 当前最新版本为2.1.0: 从https://github.com/needim/noty 可 ...

  2. noty – jQuery通知插件

    noty是一个jQuery的通知(信息提示)插件,灵活轻便,是一个非常棒的用于替代传统提示对话框的插件. 当前最新版本为2.1.0: 从https://github.com/needim/noty 可 ...

  3. js插件---->jquery通知插件toastr的使用

    toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置.toastr需要jquery的 ...

  4. 【JS】jquery通知插件toastr

    toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成 ...

  5. 漂亮灵活设置的jquery通知提示插件toastr

    toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成 ...

  6. 移动开发必备！15款jQuery Mobile插件

    移动互联网的发展,来自PC端的网页并不能完全自适应移动端页面需求,使得响应式设计体验产生并成为潮流,也正是这样一种需求,促成了jQuery Mobile的流行.jQuery Mobile这样一款基于j ...

  7. 9款风格华丽的jQuery/CSS3插件

    今天向大家分享9款效果相当不错的jQuery/CSS3插件,不多说,直接来看看这些插件吧. 1.jQuery动画下拉菜单Smart Menu 这是一款基于jQuery的动画下拉菜单,子菜单外观比较时尚 ...

  8. Notyf - 超级简单、响应式的 JS 通知插件

    通知是网站的常用功能之一,可以用来显示消息.通告.提示等等.Notyf 是一款超级简单.响应式的 JS 通知插件,不依赖 jQuery 库,可以独立使用.赶紧试用一下吧! 在线演示      免费下载 ...

  9. 20个超棒的jQuery bootstrap 插件

    1. Bootstrap File Input Bootstrap3.x 的一个增强版的HTML 5 文件选择控件,可以对图片文件和文本文件进行预览,以及其他功能.该插件增强了这些插件,并且将组件的初 ...

随机推荐

  1. HDU 5741 Helter Skelter（构造法）

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=5741 [题目大意] 一个01相间的串,以0开头,给出的序列每个数字表示连续的0的个数或者1的个数, ...

  2. C# DLL文件注册问题（涉及AxInterop.WMPLib.dll等）

    近日遇到问题,给客户安装软件涉及视频等音影播放,安装软件启动过程遇到这样问题: 分析报错原因: 没有注册类别 (异常来自 HRESULT:0x80040154 (REGDB_E_CLASSNOTREG ...

  3. Oracle 局域网布置数据库服务器，客户端连接提示TNS：无监听器的解决实现

    Oracle布置在局域网中的服务器的时候,用本地PL SQL 链接没有丝毫的问题. 但是,如果用远程客户端的PL SQL 链接的时候却出现了“TNS:无监听器”的问题. 首先,就是进行了服务器端的监听 ...

  4. [Codecademy] HTML&CSS 第三课：HTML Basic II

    本文出自   http://blog.csdn.net/shuangde800 [Codecademy] HTML && CSS课程学习目录 --------------------- ...

  5. Log4Net 使用总结

    在项目中要记录日志,便于程序调试.于是就想到了大名鼎鼎的Log4Net,这货可以方便地将日志信息记录到文件.控制台.Windows事件日志和数据库(包括MS SQL Server, Access, O ...

  6. 文件上传功能 -- jquery.form.js/springmvc

    距离上一篇 文件上传下载样式 -- bootstrap(http://www.cnblogs.com/thomascui/p/5370947.html)已经三周时间了,期间一直考虑怎么样给大家提交一篇 ...

  7. 初识EF

    1. EF是Entity Framework的缩写,全称是(ADO.Net Entity Framework),是以ADO.Net为基础所发展出来的对象关系对应(O/R Mapping)解决方案,早起 ...

  8. （转）ios跳转到通用页面

    在代码中调用如下代码: [[UIApplicationsharedApplication] openURL:[NSURLURLWithString:@"prefs:root=LOCATION ...

  9. POJ 3461 Oulipo（模式串在主串中出现的次数）

    题目链接:http://poj.org/problem?id=3461 题意:给你两个字符串word和text,求出word在text中出现的次数 思路:kmp算法的简单应用,遍历一遍text字符串即 ...

  10. BZOJ 1005: [HNOI2008]明明的烦恼( 组合数学 + 高精度 )

    首先要知道一种prufer数列的东西...一个prufer数列和一颗树对应..然后树上一个点的度数-1是这个点在prufer数列中出现次数..这样就转成一个排列组合的问题了.算个可重集的排列数和组合数 ...