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的更多相关文章

  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. linux搭建邮件服务器

    一.概述: 在配置邮件服务器之前,先解释几个概念. 通常使用Email都很容易,但是Internet的邮件系统是通过几个复杂的部分连接而成的,对于最终用户而言,我们熟悉的Outlook,Foxmail ...

  2. 【微信公众号】使用a标签打开链接显示空白

    window.location.href 改成 top.location.href

  3. 五子棋Web版的开发（二）--整合Spring4.3+hibernate4+Struts2.3

    拖了这么久才把ssh框架给整合完毕,期间发现自己对SSH的知识真的是知之甚少.在整合期间遇到了无数的坑,我还是先把项目地址发一下吧 首先我遇到的第一个问题是 CreateQuery is not va ...

  4. C++函数声明和定义深度解析

    概述: 声明是将一个名称引入一个程序. 定义提供了一个实体在程序中的唯一描述. 声明在单个作用域内可以重复多次(类成员除外),定义在一个给定的作用域内只能出现一次. 一个定义就是一个声明,除非: 它定 ...

  5. BZOJ 1452: [JSOI2009]Count(二维BIT)

    为每一个权值开一个二维树状数组. ------------------------------------------------------------------------- #include& ...

  6. css3 display:box

    想做自适应的流体布局 box很有用 . 还没有得到firefox.Opera.chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-).opera(-o-).chrome ...

  7. poj 3185 The Water Bowls 高斯消元枚举变元

    题目链接 给一行0 1 的数, 翻转一个就会使他以及它左右两边的都变, 求最少多少次可以变成全0. 模板题. #include <iostream> #include <vector ...

  8. windows server 2008/2012 无法安装AD域解决方法记录

    安装活动目录之前需要一些准备工作和前提条件的. 有管理员的权限 至少有一个足够大的NTFS文件系统的分区或动态卷 需要DNS服务配合,因此需要安装DNS服务 最好使用dcpromo命令来进行安装 最终 ...

  9. selenium 学习笔记 ---新手学习记录（9） 问题总结（java）

    1.百度搜索目标--实例 boolean flag; //点击次数 int shcs=3; int i=0; //窗口焦点控制 String detailWindowHandle = null; // ...

  10. Git Version recovery command introduction - git reset

    reset命令有3种方式: git reset –mixed:此为默认方式,不带任何参数的git reset,即时这种方式,它回退到某个版本,只保留源码,回退commit和index信息 git re ...