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>
其定义了两种模式,一种为StatusBar,另外一种为Notify模式。
两种展现方式，一种自动消失，一种是永久存在，需要用户自己点关闭按钮的。
两种状态，一种是error,一种是message。
1.not permanent and message
permanent: false,
type: 'message',
2.permanent and error
permanent: true,
type: 'error'