一个简单JQuery的MessageBox插件

sha851092391 · 发表于 2013-2-7 22:41:57

学了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>  <script type="text/javascript" src="MessageBox.js"></script> <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>  <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>

		自动登录	找回密码
密码			立即注册