Dynamic Flash Messages
发布时间：2014-07-12 编辑：jiaochengji.com
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
OverviewFlash 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.UsageUsage 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>
<!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>
您可能感兴趣的文章：
Dynamic Flash Messages
jquery Slideshow
使用PHP 快速生成Flash 动画
js复制网页内容(兼容多个浏览器)
jQuery信息提示插件 Dynamic tooltip
网站登录Google与网站设计
搜索引擎优化之网页篇
jQuery Flash Plugin
jQuery + Adobe Flash integration plugin
网页设计注意事项
[关闭]