jQuery通知查件noty

浏览数：107 / 时间：2015年06月09日

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已经写得很清楚了这里就是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>