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. 苹果新的编程语言 Swift 语言进阶（六）－－函数和闭包

    一 .函数 1.1. 函数的定义和调用 函数的定义以funckeyword作为前缀,接着是函数名字,接着跟着一个能够带有參数.也能够不带參数的圆括号.接着用-> 指示函数的返回类型. 函数运行体 ...

  2. Clementine 12.0 的使用（因为比较少用，项目中用到才开始接触写一下自己的使用方法）

    首先我是根据excel的文件做的训练,就以excel来做介绍 1.打开Clementine 12.0 软件 点击软件下方的 ”源“ 即你要做训练的数据源.因为是excel文件双击excel. 2.双击 ...

  3. 初步认识ExtJS

    最近因为项目,需要去学习ExtJS的相关内容. 现在对于ExtJS完全是小白一枚. 目前使用的是ExtJS4.2的版本,官网上现在最新版本是6的. 第一个方法:Ext.onReady() Ext.on ...

  4. Linux新手笔记 sudo

    centos 6.4 32bit 你是也像我一样,厌烦了在root用户和个人用户之间来回切换.或者干脆直接用root用户.可以这样设置,然后在命令前加sudo 即可使用自己到密码,临时用root身份执 ...

  5. Cyclomatic complexity

    Cyclomatic Code Complexity was first introduced by Thomas McCabe in 1976. In 1976, Thomas McCabe pub ...

  6. IT项目经理

    项目经理是具体项目工作的管理者,他们在工作中不断提升自己的领导才华,同时该职业又是一个权利与责任并存的职业, 他们主要对项目进行背景调查,收集整理项目相关资料,进行需求策划,撰写项目调查报告和信息综述 ...

  7. ajax Session失效如何跳转到登录页面

    在Struts应用中,我们发出的请求都会经过 相应的拦截器进行相关处理,一般都会有一个用户登录拦截(Session失效拦截):一般请求的话,如果Session失效时,我们会跳到登录页面,可是如果我们采 ...

  8. 转: 理解AngularJS中的依赖注入

    理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...

  9. VS2010/MFC对话框：非模态对话框的创建及显示

    非模态对话框的创建及显示 上一节讲了模态对话框及其弹出过程,本节接着讲另一种对话框--非模态对话框的创建及显示. 已经说过,非模态对话框显示后,程序其他窗口仍能正常运行,可以响应用户输入,还可以相互切 ...

  10. poj 1836 Alignment（线性dp）

    题目链接:http://poj.org/problem?id=1836 思路分析:假设数组为A[0, 1, …, n],求在数组中最少去掉几个数字,构成的新数组B[0, 1, …, m]满足条件B[0 ...