一个简单JQuery的MessageBox插件

sha851092391

浏览: 73996 次
性别:
来自: 广州

最近访客更多访客>>

gbstack

a920907jiang

yx1993

dengdahong214

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery CSS JavaScript Ajax XHTML

学了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>