使用 JQuery 和 CSS 在任何操作或事件执行后显示消息，类似 Gmail

• 下载源代码 - 38 KB

引言

本文介绍如何在使用 JQuery 和 CSS 像 Gmail 一样成功或不成功地执行任何操作或事件后显示操作消息。

每当执行任何操作或事件（如删除、编辑、点击发送消息）时，最好在操作成功/失败后向用户显示与该操作相关的消息，如“图像已删除”、“消息已发送”等。

让我们在以下屏幕中看一些例子

对于成功完成的操作

对于未完成的操作，即遇到一些错误

对于信息性消息：

使用方法  

这非常简单易行。我在“msgwindow.js”文件中创建了一个函数，如下所示：

函数参数

• msgEle：要在其中显示消息的页面元素 ID
• msgText：要显示为消息的文本
• msgClass：CSS 类名
• msgIcon：与消息一起显示的图标路径
• msgHideIcon：隐藏消息的图标路径
• autoHide：True 表示自动隐藏

$.showmsg = function(msgEle,msgText,msgClass,msgIcon,msgHideIcon,autoHide){
var tblMsg;
        
tblMsg = '<table width="100%" cellpadding="1" cellspacing="0" 
	border="0" class="' + msgClass + '"><tr>
	<td style="width:30px;" align="center" valign="middle">' + 
	msgIcon + '</td><td>' + msgText + '</td><td style="width:30px;" 
	align="center" valign="middle"><a href="javascript:void(0);" 
	onclick="$(\'#' + msgEle + '\').toggle(400);">' + msgHideIcon + 
	'</a></td></tr></table>';
//alert(tblMag);
$("#" + msgEle).html(tblMsg);
$("#" + msgEle).show();
if(autoHide)
{
    setTimeout(function(){
      $('#' + msgEle).fadeOut('normal')},10000    
    );
    }
}	 

让我们看一个例子，这样会更清楚。

函数调用

function deleteImage()
{
	if(confirm("Are you sure?"))
	/*
	code to delete the image
	*/
	$.showmsg('spnMessage','Image has been deleted.','success',
		'<img src="Images/icon_status_success_26x26.gif"/>',
		'<img src="Images/hide-icon.gif" alt="Hide" title="Hide"/>',true);
} 

HTML 源代码

<tr>
    <td>
        <span id="spnMessage" style="display:none;"></span>
    </td>
</tr>   

如上例所示，消息将显示在 id 为“spnMessage”的 <span> 元素中。 您也可以使用 label、span、div，任何其他可以显示文本的 HTML 元素。 您可以根据您的需求更改函数中自动隐藏的计时器。

步骤

1. 下载附加的 zip 文件夹。
2. 在您的页面中添加 *jquery.js* 文件（**如果您已经添加，请忽略此步骤。**）
3. 添加“msgwindow.js”文件。
4. 在您的页面中添加 CSS 文件，或将所有类复制到您现有的 CSS 文件中。
5. 将图像复制到您的项目中。