jQuery通知插件noty

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>

 

 

 

posted @ 2014-02-05 17:12  cart55free99  阅读(765)  评论(0)  编辑  收藏  举报