<html>
<head>
<title>jQuery - 消息提示自定义插件</title>
<script type="text/javascript" src="jquery-1.4.4.min.js" ></script>
<script>
$(document).ready(function(){
/** msg:内容
type:消息框类型
iwidth:消息框宽度
iheight:消息框高度
**/
jQuery.showMessage = function(msg, type, iwidth, iheight)
{
if(iwidth == null) iwidth = 300;
if(iheight == null) iheight = 50;
/** 得到IE中间位置 **/
var cheight = document.body.clientHeight;
var cwidth = document.body.clientWidth;
var itop=(cheight-iheight)/2+document.body.scrollTop;
var ileft=(cwidth-iwidth)/2+document.body.scrollLeft;
/** 错误信息 **/
if(type == "error")
$("#Message").css({background:"#ffccdd", border:"1px solid #f67ba4"});
/** 失败信息 **/
else if(type == "fail")
$("#Message").css({background:"#f8e4fa", border:"1px solid #f694ff"});
/** 成功信息 **/
else if(type == "success")
$("#Message").css({background:"#e7fbe5", border:"1px solid #7dfc70"});
/** 警告信息 **/
else if(type == "warning")
$("#Message").css({background:"#f9f6da", border:"1px solid #fce51f"});
/** 提示信息 **/
else if(type == "tip")
$("#Message").css({background:"#f2f2f2", border:"1px solid #9d9d9d"});
/** 设置提示框公共样式 **/
$("#Message").css({width: iwidth+"px",
height: iheight+"px",
"font-size": "12px",
top: itop+"px",
left: ileft+"px",
cursor:"pointer",
position: "absolute"
});
//设置消息内容
$("#Message").html(msg);
/** 效果1 **/
//$("#Message").hide();
//$("#Message").fadeIn(1000);
/** 效果2 **/
$("#Message").show();
$("#Message").css({top:(cheight - iheight +"px")});
$("#Message").animate({top:itop+"px", left:ileft+"px"}, 300);
/** 点击消息关闭提示事件 **/
$("#Message").click(function(){
$("#Message").fadeOut();
});
}
$("#error").click(function(){
$.showMessage("显示错误信息", "error");
});
$("#fail").click(function(){
$.showMessage("显示失败信息", "fail");
});
$("#success").click(function(){
$.showMessage("显示成功信息", "success");
});
$("#warning").click(function(){
$.showMessage("显示警告信息", "warning");
});
$("#tip").click(function(){
$.showMessage("显示提示信息", "tip");
});
});
</script>
</head>
<body>
<div id="Message" align="center"></div>
<input type="button" id="error" value="错误" />
<input type="button" id="fail" value="失败" />
<input type="button" id="success" value="成功" />
<input type="button" id="warning" value="警告" />
<input type="button" id="tip" value="提示" />
</body>
</html>
分享到：
相关推荐
`jquery-confirm.js`是一个功能丰富的提示框插件，它替代了浏览器原生的确认对话框，提供了更美观且可定制化的提示方式。这个插件通常用于在用户进行删除、确认操作或其他重要决策时显示警告或确认消息。通过使用`...
在这个话题中，我们将深入探讨如何利用jQuery Validation插件来支持自定义错误样式。 ### 1. 错误样式概述 在使用jQuery Validation插件进行表单验证时，如果输入数据不符合预设的验证规则，插件会生成相应的错误...
**jQuery摄像头插件jquery-webcam-plugin** 在网页开发中，集成摄像头功能可以帮助用户实时捕捉图像，广泛应用于在线证件照上传、视频聊天、虚拟试衣间等场景。`jQuery webcam plugin`是一个优秀的JavaScript库，它...
其中，开发者可以查看到各种验证规则、错误提示和处理逻辑的实现，这对于自定义验证规则或者扩展功能非常有帮助。 “lib”目录通常存放的是依赖的第三方库，可能包括了jQuery本身和其他辅助库。这些库为jQuery-...
这个插件不仅提供了基本的提示功能，还具有高度自定义和交互性的特点，可以满足各种复杂的用户交互需求。 ### 一、安装与引入 在使用`JQ.jquery-confirm`之前，首先确保项目中已经引入了jQuery库。然后，可以通过...
**jQuery UI插件详解** jQuery UI 是一个基于 jQuery JavaScript 库的开源用户界面框架，它提供了丰富的组件和交互效果，让开发者能够轻松地创建出功能强大且美观的Web应用程序。这个框架包含了各种易于使用的组件...
1. **主题多样化**：`jquery-confirm` 提供了多种预设主题，如bootstrap、materialize等，可以根据项目需求选择合适的样式，同时支持自定义CSS，满足个性化定制需求。 2. **Ajax支持**：对话框内可以直接加载远程...
jQuery UI 是一款基于JavaScript库jQuery的用户界面插件集合，提供了丰富的交互效果和可自定义的主题。本文将深入解析jQuery UI 1.11.4这个版本，涵盖其核心功能、组件、应用场景以及使用方法。 一、jQuery UI的...
而jquery-confirm则是一个基于jQuery的插件，用于创建美观的弹窗提示，包括确认对话框、警告对话框和自定义对话框。这个插件在网页应用中非常常见，特别是在需要用户确认操作或展示重要信息时。 这篇博客文章...
《jQuery-File-Upload插件深度解析与应用实践》 jQuery-File-Upload是一款功能强大的JavaScript文件上传组件，它提供了一种优雅的方式来处理文件上传，支持多文件选择、进度条显示、图片预览等特性，使得文件上传变...
jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合，它为开发者提供了丰富的功能和华丽的样式，帮助构建具有高度交互性的网页应用。这个版本，即 jQuery UI 1.8.6，包含了各种组件和特效，为网页设计和...
"jquery-impromptu"是一个强大的jQuery插件，它提供了丰富的样式和配置选项，可以创建出高度自定义的悬浮提示框。这个插件允许开发者轻松创建多层嵌套的对话框，支持多种主题，包含表单元素，甚至能够实现复杂的验证...
下面将详细介绍jQuery Chosen插件的核心功能、安装方法、使用技巧以及常见问题。 ### 一、核心功能 1. **模糊搜索**：Chosen插件的标志性特性，允许用户在下拉选项中输入关键词进行实时模糊匹配，提高了查找特定...
4. **回调函数**：插件提供了多种回调函数，例如开始上传、上传进度、上传成功和失败等，开发者可以通过这些回调函数实现上传过程中的交互反馈，如显示上传进度条、错误提示等。 5. **自动生成上传表单**：为了简化...
《jQuery-Paging动态分页数据获取插件》 在网页开发中，数据的展示往往涉及到大量的信息处理，尤其是在用户交互时，如何优雅地处理大量数据的加载和展示，是提升用户体验的关键。jQuery-Paging插件就是一个针对这种...
**jQuery Infinite Ajax Scroll (IAS)** 是一款非常实用的JavaScript插件，主要应用于网页的无限滚动效果，即在用户滚动页面时，内容会自动通过Ajax方式加载，为用户提供无缝的浏览体验。这个插件的核心功能是当用户...
`jquery-confirm`是一款基于jQuery的弹出对话框插件，它提供了丰富的自定义选项和功能，使得在网页中创建美观且功能多样的确认、警告、信息提示框变得简单易行。这款插件的设计理念是替代浏览器原生的`alert`, `...
- **多语言支持**：通过修改插件的内置文本，可以实现多语言环境下的座位提示信息。 - **支付集成**：结合第三方支付API，实现选座后的在线支付流程。 - **动画效果**：添加动画效果，提高用户体验，如座位被选中...
《jQuery AwesomeTip：开源工具提示插件的深度解析》 在Web开发中，工具提示（Tooltip）是一种常见的交互元素，用于向用户提供额外的信息或提示。jQuery作为一款强大的JavaScript库，其丰富的生态系统中包含了许多...
`messages_zh.js`包含了中文错误消息，使得用户在输入不符合规则时能接收到易于理解的提示信息。通过更改语言文件，可以支持多语言环境，提升用户体验。 `package.json`是Node.js项目的配置文件，列出了项目的依赖...