Dynamic Flash Messages

码农软件 · 软件分类 · 其他jQuery插件 · 2020-01-08 07:13:22

软件介绍

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

本文地址:https://codercto.com/soft/d/22905.html

深入浅出Node.js

深入浅出Node.js

朴灵 / 人民邮电出版社 / 2013-12-1 / CNY 69.00

本书从不同的视角介绍了 Node 内在的特点和结构。由首章Node 介绍为索引,涉及Node 的各个方面,主要内容包含模块机制的揭示、异步I/O 实现原理的展现、异步编程的探讨、内存控制的介绍、二进制数据Buffer 的细节、Node 中的网络编程基础、Node 中的Web 开发、进程间的消息传递、Node 测试以及通过Node 构建产品需要的注意事项。最后的附录介绍了Node 的安装、调试、编码......一起来看看 《深入浅出Node.js》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

MD5 加密
MD5 加密

MD5 加密工具