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>
-
Macromedia Flash Communication Server MX 是一个从零开始打造的全新产品。它并非脱胎于 Shockwave Multiuser Server， 而且有一些功能也无法实现。例如，如果需要 UDP（用户数据协议）或点到点的 功能，则最好还是使用 Shockwave Multiuser Server。 但是，Shockwave Multi us
-
In the current age of technology, with all of the cool toys and gadgets that are available, all of these things exist for one purpose...to allow us to more easily access information. Today, we are abl
-
http://active.tutsplus.com/tutorials/screencasts/dynamic-slideshow-using-as30/ resource http://www.greensock.com/
-
版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章原始出版、作者信息和本声明。否则将追究法律责任。 http://blog.csdn.net/topmvp - topmvp Server-Side Flash: Scripts, Databases, and Dynamic Development fills an important gap in the Flash book mar
-
版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章原始出版、作者信息和本声明。否则将追究法律责任。 http://blog.csdn.net/topmvp - topmvp Flash Components: The Key to Faster Development and Sophisticated Functionality You don't have to be a prog