学了Jquery几天,今天突然兴致勃勃做一个JQuery的简单信息框的插件,可以替代alert和confirm对话框。在这里跟大家分享一下。
代码如下:
/**
* 作者:WilliamSha
* 发布时间:21:31 2011-4-27
*
* 描述:该插件可以替代JavaScript的alert和confirm对话框
* @param msg 提示信息的对象,第一个元素为title(标题),第二个元素为message(显示信息)
* @param option 设置对话框的操作方式,第一个元素为option,属性值为"alert"或是"confirm",第二个元素为result,表示用户的操作结果,true 确定 false 取消
* @param okFun 点击确定按钮需要执行的方法
* @param cancelFun 点击取消需要执行的方法
*/
$.fn.MessageBox = function(msg,option,okFun,cancelFun){
var obj = $(this);
if (msg instanceof Object)
{
var title = msg.title;
var message = msg.message;
if (typeof title == "string" && typeof message == "string")
{
obj.find("#title").text(title).parent().parent().find("#message").text(message);
}
}
if (option instanceof Object && typeof option.option == "string")
{
if (option.option == "confirm")
{
obj.find("#ok").click(function(){
obj.fadeOut("slow");
option.result = true;
okFun();
});
obj.find("#cancel").click(function(){
obj.fadeOut("slow");
option.result = false;
cancelFun();
});
}
else
{
obj.find("#ok").click(function(){
obj.fadeOut("slow");
okFun();
});
obj.find("#cancel").hide();
}
}
obj.fadeIn("slow");
obj.children(".title").children("a").click(function(){obj.fadeOut("slow")});
//设置对话框的拖动
var x,y;
obj.mousedown(function(event){
var offset = $(this).offset();
x=event.clientX-offset.left;
y=event.clientY-offset.top;
$(this).mousemove(function(event){
obj.css("margin", 0).css("cursor", "move").css("left",event.clientX-x).css("top",event.clientY-y);
});
}).mouseup(function(){
obj.unbind("mousemove").css("cursor", "default");
});
return obj;
}
下面是一个简单Demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312" />
<TITLE> alert 提示 </TITLE>
<style>
body {
background: #DDD;
/*margin: 0;
padding: 0;*/
}
</style>
<link rel="stylesheet" text="text/css" href="MessageBox.css" /> <!--必须导入的样式表-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <!--必须导入JQuery-->
<script type="text/javascript" src="MessageBox.js"></script> <!--必须导入MessageBox插件-->
<script type="text/javascript">
$(document).ready(function(){
var option = {option:'confirm', result:false}; //定义MessageBox的操作方式
var okFun = function(){alert("ok "+option.result);}; //定义确定按钮触发的方法
var cancelFun = function(){alert("cancel "+option.result);}; //定义取消的触发方法
var msg = {title:'警告', message:'这是一个警告!'}; //定义MessageBox显示的信息
$(".MessageBox").MessageBox(msg, option, okFun, cancelFun);
});
</script>
</HEAD>
<BODY>
<!--MessageBox-->
<div class="MessageBox">
<div class="title">
<a href="javascript:void(0)"></a>
<em id="title"></em>
</div>
<div class="content"><em id="message"></em></div>
<div class="bottom">
<input type="button" value="确定" id="ok" />
<input type="button" value="取消" id="cancel" />
</div>
</div>
</BODY>
</HTML>
- 大小: 8.9 KB
分享到:
相关推荐
`JQ.jquery-confirm`是一个基于jQuery的插件,它为网页开发者提供了功能丰富的对话框和确认/取消框解决方案。这个插件不仅提供了基本的提示功能,还具有高度自定义和交互性的特点,可以满足各种复杂的用户交互需求。...
这篇博客(博文链接:https://lingf.iteye.com/blog/1131554)很可能是分享一个名为"messagebox"的jQuery插件,它专门用于创建弹出框效果。 jQuery插件通常是开发者为了扩展jQuery的核心功能而编写的代码模块。它们...
jMessageBox是一款基于jQuery的窗口插件,用于在Web页面中创建类似于WinForm开发中的MessageBox提示窗口的功能。在WinForm程序开发中,MessageBox是常用的提示信息方式,虽然功能简单,但却非常实用。在Web开发中,...
要创建一个漂亮的弹框提示,我们可以使用插件,如 `jQuery MessageBox` 插件,这可能就是压缩包 `messageBox` 文件中的内容。这个插件允许我们自定义弹框的外观、内容、按钮布局,甚至可以添加回调函数来处理用户的...
`jValidate` 是基于 `jQuery` 的一个强大的表单验证插件,它为开发者提供了丰富的验证规则和自定义错误提示功能,以确保用户在填写表单时输入的数据符合预设的规范。 1. **安装与引入** 在使用 `jValidate` 插件...
@描述 仿jQuery中的jquery-messager插件 ...@备注:因为喜好jQuery,又觉得swt中的弹出对话框写的麻烦,所以写这一个小东西。本人不是高手,勿骂。如果您也有兴趣,欢迎使用邮件交流。邮箱:haruno2005@163.com
在这个名为"jQuery可自动隐藏顶部消息提示框代码.zip"的压缩包中,我们可以期待找到一个利用jQuery实现的、在页面顶部显示并自动隐藏消息提示框的解决方案。 首先,`index.html`是主页面文件,它通常包含了HTML结构...
jQuery LigerUI 是基于jQuery的一系列UI控件组合,简单而又强大,致力于快速打造Web前端界面解决方案。 因为是前端控件,跟服务器无关,可以适合.net,jsp,php等等web服务器环境。目前全部插件的打包压缩JS只有150K...
本文将详细讲解如何利用jQuery实现淡入淡出的消息框,这是一个非常实用的功能,常用于向用户展示通知、警告或确认信息。 首先,淡入淡出效果是通过jQuery的动画功能实现的,主要涉及到`fadeIn()`和`fadeOut()`两个...
想着自己学习Javascript,以及Ajax、jQuery等已经有一段时间了,不过貌似还没有写过一个插件,看到jQuery官网上那么多令人眼前一亮的插件,自己今天也动心说是不是能够写一个类似的插件来瞧瞧,了解了jQuery插件的...
jQuery LigerUI 是基于jQuery的一系列UI控件组合,简单而又强大,致力于快速打造Web前端界面解决方案。 因为是前端控件,跟服务器无关,可以适合.net,jsp,php等等web服务器环境。目前全部插件的打包压缩JS只有100K...
jquery轻量级顶部下滑弹窗效果 jquery.messagebox.js插件,一个基于jquery的弹窗插件,ui效果设计不错 典型的轻量级的,附件提供了四种常用的弹窗效果 每次弹出或者收回的效果均是从顶部下拉或者反弹回去
jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理和Ajax交互,同时也为开发者提供了丰富的插件和扩展功能,如我们今天要讨论的消息框。 首先,理解jQuery消息框的基本概念。消息框通常用于向用户...
jquery.messagebox.js插件,一个基于jquery的弹窗插件,ui效果设计不错 典型的轻量级的,附件提供了四种常用的弹窗效果 每次弹出或者收回的效果均是从顶部下拉或者反弹回去 使用方法: 1、将head中的样式...
`jQuery EasyUI` 是一个基于 jQuery 的前端框架,它提供了丰富的用户界面组件,使得开发者能够快速构建出功能完备且美观的Web应用。EasyUI 的核心理念是简化开发流程,通过简单的 JavaScript API 和 CSS 样式,让...
在给定的链接中提到的"jQuery Easy Confirm Dialog"是一个jQuery插件,它允许开发者创建具有自定义样式和行为的确认对话框,提供比原生`window.confirm()`更灵活的用户体验。这个插件可以通过简单的API调用来集成到...
以下是一个简单的示例代码: ```javascript $(document).ready(function() { var $messageBox = $('.message-box'); // 监听事件,这里假设是点击按钮触发 $('#showMessage').click(function() { // 设置动画...
总的来说,jQuery LigerUI 是一个轻量级且功能丰富的前端框架,对于需要快速构建Web前端界面的开发者来说,它提供了一套完整且易于使用的工具集。通过熟练掌握LigerUI,开发者能够轻松实现各种复杂的界面交互效果,...