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. POJ 1222 EXTENDED LIGHTS OUT（高斯消元）

    [题目链接] http://poj.org/problem?id=1222 [题目大意] 给出一个6*5的矩阵,由0和1构成,要求将其全部变成0,每个格子和周围的四个格子联动,就是说,如果一个格子变了 ...

  2. Android适配器Adapter学习

    在开发中我们需要绑定一些数据展现到桌面上,这是就需要AdapterView.AdapterView是ViewGroup的子类,它决定了怎么展现视图通过Adapter来绑定特殊的数据类型. Adapte ...

  3. ios学习Day3

    bool 数据类型 #define TRUE 1// #define FALAE 0 #define BOOL int Bool flag=1; bool型 实质上是 int型 c89没有提供 c99 ...

  4. SQL Server索引进阶：第八级，唯一索引

    原文地址: Stairway to SQL Server Indexes: Level 8,Unique Indexes 本文是SQL Server索引进阶系列(Stairway to SQL Ser ...

  5. ShineTime 是一个效果非常精致的缩略图相册

    ShineTime 是一个效果非常精致的缩略图相册,鼠标悬停到缩略图的时候有很炫的闪光效果,基于 CSS3 实现,另外缩略图也会有立体移动的效果.特别适用于个人摄影作品,公司产品展示等用途,快来来围观 ...

  6. js 计算两个时间差

    /* * 计算两个日期的间隔天数* BeginDate:起始日期的文本框,格式為:2012-01-01* EndDate:結束日期的文本框,格式為:2012-01-02* 返回兩個日期所差的天數* 調 ...

  7. Set 与 Multiset

    Set 与 Multiset 会根据待定的排序准则,自动将元素排序,两者不同之处在于前者不允许元素重复,后者允许,下面介绍一下set中的函数: 一.set 中的 begin.end.rbegin.re ...

  8. Android 开发笔记“Application 理解”

    Android 中Application类用法 1.             Application和Activity,Service一样是Android框架的一个系统组件,当Android程序启动时 ...

  9. codeforces 375D . Tree and Queries 启发式合并 || dfs序+莫队

    题目链接 一个n个节点的树, 每一个节点有一个颜色, 1是根节点. m个询问, 每个询问给出u, k. 输出u的子树中出现次数大于等于k的颜色的数量. 启发式合并, 先将输入读进来, 然后dfs完一个 ...

  10. ural1057 Amount of degrees 位数统计

    #include <iostream> #include <string> using namespace std; ][]; void init(){ f[][] =; ;i ...