Dynamic Flash Messages-技术圈

Overview

Flash messages are messages displayed in response to user interaction with a site. Typically these are displayed as success or failure messages after performing an action which submits a form, or in response to an attempt to access a resource for which the user does not have permission.

Flash messages are useful and provided with several systems automatically; TurboGears, for instance, provides a tg_flash variable to all templates and exposes a flash method which can be used to display a message on the next page load.

This is a simple script which gives this functionality to jQuery, so you can display flash messages in response to dynamic events such as AJAX calls.

Usage

Usage is simple. Place a div somewhere, usually where you want the flash message to appear, with an ID of flash. After including jQuery and the jQuery flash plugin, you can issue a variety of messages using the methods of the jQuery.flash object.

Default behavior is to fade the message in, wait 15 seconds, then fade the message out. If the message is an error of any kind, the message will persist. If the mouse is within the flash message container the message will persist until the cursor is removed. Clicking on the message will also remove it, even if it's an error. Issuing a flash message while one is already displayed will remove the existing message first.

Default message types include: subtle, error, failure (fail), warning (warn), information (info), and success. All of these take two arguments: the label and message. You can issue messages with custom classes by using the message method, passing three arguments: the class, label, and message.

Sample Code

 <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>Sample Code</title>
    <script type="text/javascript" src="/js/jQuery.js"></script>
    <script type="text/javascript" src="/js/jQuery.flash.js"></script>
    <style type="text/css" media="screen">
       #flash { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 1000; background-color: #569; color: white; border-bottom: 1px solid #555; }
           #flash, #flash * { cursor: pointer; }
           #flash .yui-b { padding: 5px 0; }
           #flash .yui-b>* { font-size: 128%; }
           #flash label { display: block; text-align: right; font-weight: bold; text-transform: capitalize; }
           #flash label:after { content: ':'; }
           #flash.subtle { background-color: #444; color: white; }
           #flash.subtle:hover { background-color: #222; }
           #flash.warning { background-color: #ff0; color: black; }
           #flash.warning:hover { background-color: #ff8; }
           #flash.success { background-color: #595; }
           #flash.success:hover { background-color: #7b7; }
           #flash.failure, #flash.error { background-color: #800; }
           #flash.failure:hover, #flash.error:hover { background-color: #a00; }
           #flash.subtle, #flash.success, #flash.failure, #flash.error { text-shadow: black 2px 2px 2px; }
    </style>
    </head>

    <body>
        <div id="flash"></div>
        
        <ul>
            <li><a href="javascript:jQuery.flash.success('Congratulations', 'You clicked a link and it worked!')">Success</a></li>
            <li><a href="javascript:jQuery.flash.warn('Warning', 'You clicked a link and there was a problem!')">Warn</a></li>
            <li><a href="javascript:jQuery.flash.error('Oh No!', 'You clicked a link and there was a critical error!')">Error</a></li>
            <li><a href="javascript:jQuery.flash.subtle('Hmm...', 'You clicked a link and there is a not-so-important note.')">Subtle</a></li>
        </ul>
    </body>
</html>