`
sha851092391
  • 浏览: 73750 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

一个简单JQuery的MessageBox插件

阅读更多

学了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对话框和确认取消框插件

    `JQ.jquery-confirm`是一个基于jQuery的插件,它为网页开发者提供了功能丰富的对话框和确认/取消框解决方案。这个插件不仅提供了基本的提示功能,还具有高度自定义和交互性的特点,可以满足各种复杂的用户交互需求。...

    [jQuery插件] 弹出框

    这篇博客(博文链接:https://lingf.iteye.com/blog/1131554)很可能是分享一个名为"messagebox"的jQuery插件,它专门用于创建弹出框效果。 jQuery插件通常是开发者为了扩展jQuery的核心功能而编写的代码模块。它们...

    jMessageBox 基于jQuery的窗口插件

    jMessageBox是一款基于jQuery的窗口插件,用于在Web页面中创建类似于WinForm开发中的MessageBox提示窗口的功能。在WinForm程序开发中,MessageBox是常用的提示信息方式,虽然功能简单,但却非常实用。在Web开发中,...

    jquery 实现的漂亮的弹框提示

    要创建一个漂亮的弹框提示,我们可以使用插件,如 `jQuery MessageBox` 插件,这可能就是压缩包 `messageBox` 文件中的内容。这个插件允许我们自定义弹框的外观、内容、按钮布局,甚至可以添加回调函数来处理用户的...

    jQuery 表单验证插件 jValidate

    `jValidate` 是基于 `jQuery` 的一个强大的表单验证插件,它为开发者提供了丰富的验证规则和自定义错误提示功能,以确保用户在填写表单时输入的数据符合预设的规范。 1. **安装与引入** 在使用 `jValidate` 插件...

    swt 中 仿jQuery中的jquery-messager的java类

    @描述 仿jQuery中的jquery-messager插件 ...@备注:因为喜好jQuery,又觉得swt中的弹出对话框写的麻烦,所以写这一个小东西。本人不是高手,勿骂。如果您也有兴趣,欢迎使用邮件交流。邮箱:haruno2005@163.com

    jQuery可自动隐藏顶部消息提示框代码.zip

    在这个名为"jQuery可自动隐藏顶部消息提示框代码.zip"的压缩包中,我们可以期待找到一个利用jQuery实现的、在页面顶部显示并自动隐藏消息提示框的解决方案。 首先,`index.html`是主页面文件,它通常包含了HTML结构...

    jQuery LigerUI V1.1.9

    jQuery LigerUI 是基于jQuery的一系列UI控件组合,简单而又强大,致力于快速打造Web前端界面解决方案。 因为是前端控件,跟服务器无关,可以适合.net,jsp,php等等web服务器环境。目前全部插件的打包压缩JS只有100K...

    jQuery LigerUI V1.2.2

    jQuery LigerUI 是基于jQuery的一系列UI控件组合,简单而又强大,致力于快速打造Web前端界面解决方案。 因为是前端控件,跟服务器无关,可以适合.net,jsp,php等等web服务器环境。目前全部插件的打包压缩JS只有150K...

    JQuery实现淡入淡出的消息框

    本文将详细讲解如何利用jQuery实现淡入淡出的消息框,这是一个非常实用的功能,常用于向用户展示通知、警告或确认信息。 首先,淡入淡出效果是通过jQuery的动画功能实现的,主要涉及到`fadeIn()`和`fadeOut()`两个...

    基于jQuery的弹出消息插件 DivAlert之旅(一)

    想着自己学习Javascript,以及Ajax、jQuery等已经有一段时间了,不过貌似还没有写过一个插件,看到jQuery官网上那么多令人眼前一亮的插件,自己今天也动心说是不是能够写一个类似的插件来瞧瞧,了解了jQuery插件的...

    jquery轻量级顶部下滑弹窗效果.zip

    jquery轻量级顶部下滑弹窗效果 jquery.messagebox.js插件,一个基于jquery的弹窗插件,ui效果设计不错 典型的轻量级的,附件提供了四种常用的弹窗效果 每次弹出或者收回的效果均是从顶部下拉或者反弹回去

    利用Jquery消息框,源代码提供

    jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理和Ajax交互,同时也为开发者提供了丰富的插件和扩展功能,如我们今天要讨论的消息框。 首先,理解jQuery消息框的基本概念。消息框通常用于向用户...

    jquery轻量级顶部下滑弹窗效果

    jquery.messagebox.js插件,一个基于jquery的弹窗插件,ui效果设计不错 典型的轻量级的,附件提供了四种常用的弹窗效果 每次弹出或者收回的效果均是从顶部下拉或者反弹回去 使用方法: 1、将head中的样式...

    jqueryeasyui

    `jQuery EasyUI` 是一个基于 jQuery 的前端框架,它提供了丰富的用户界面组件,使得开发者能够快速构建出功能完备且美观的Web应用。EasyUI 的核心理念是简化开发流程,通过简单的 JavaScript API 和 CSS 样式,让...

    ASP .NET中的MessageBox

    在给定的链接中提到的"jQuery Easy Confirm Dialog"是一个jQuery插件,它允许开发者创建具有自定义样式和行为的确认对话框,提供比原生`window.confirm()`更灵活的用户体验。这个插件可以通过简单的API调用来集成到...

    jQuery 仿QQ右下角弹出消息提示.rar

    以下是一个简单的示例代码: ```javascript $(document).ready(function() { var $messageBox = $('.message-box'); // 监听事件,这里假设是点击按钮触发 $('#showMessage').click(function() { // 设置动画...

    课题-jQuery-LigerUI-使用教程入门篇.doc

    总的来说,jQuery LigerUI 是一个轻量级且功能丰富的前端框架,对于需要快速构建Web前端界面的开发者来说,它提供了一套完整且易于使用的工具集。通过熟练掌握LigerUI,开发者能够轻松实现各种复杂的界面交互效果,...

Global site tag (gtag.js) - Google Analytics