Jnotify

时间：2015-02-02 12:29:44 阅读：259 评论：0 收藏：0 [点我收藏+]

标签：

website:http://jnotify.codeplex.com/

Jnotify好像对于IE的支持并不是很好。

在Chrome的效果还是不错的。

以下为具体的代码：

<!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" />

    <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>

    <link href="jquery.jnotify.css" rel="stylesheet" type="text/css" />

    <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>