我的原创JQ插件:人性化的消息显示,使用非常方便 [复制链接]

omeweb　楼主

橘子香水

高级会员

帖子: 557
体力: 969
威望: 5
居住地: 福建省福州市

发表于 2008-1-21 12:42:23 |显示全部楼层

先看看演示,如果没有效果,请刷新一下先,确保JS文件被下载下来.或者点下面给出的地址

<!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>jq 消息提示</title>
<style>
*{ margin:0; padding:0;}
.code{ border:1px solid #000; padding:2px; background-color:#FFFFCC; margin:5px; font-size:12px;/*float:left;*/}
td{ height:20px; padding-left:2px;}
</style>
<script language="javascript" type="text/javascript" src="http://omeweb.com/photo/temp/msg/jquery.pack.js"></script>
<script type="text/javascript">
jQuery.fn.showMsg=function(json)
{	
	if(json==null)
		json={};
	var bodyScrollSize=this.getBodyScrollSize();
	var bodySize=this.getBodySize();
	var left=bodyScrollSize.left;
	var top=bodyScrollSize.top;
	if(json.autoMiddle!=true)
	{
		if(json.left)left=left+json.left;
		if(json.top)top=top+json.top;
	}
	else if(json.autoMiddle==true)
	{
		var _w=this.width();
		var _h=this.height();
		top=(bodySize.height-_h)/2 + top;
		left=(bodySize.width-_w)/2;
	}
	if(top+this.height()>bodyScrollSize.height)
		bodyScrollSize.height=top+this.height();
	if(left+this.width()>bodyScrollSize.width)
		bodyScrollSize.width=left+this.width();
	
	if(json.coverBody==true)
	{
		$("<iframe id='jq_effect_backGroundIframe' style='z-index:1;filter:mask();overflow:hidden;border:0px;margin:0; padding:0;position:absolute;width:"+bodyScrollSize.width+"px;height:"+bodyScrollSize.height+"px;top:0px;left:0px' scrolling='auto' frameborder='0' ></iframe>").appendTo("body"); 
		var jqCover=$("<div id='jq_effect_backGroundDiv'></div>");
		var _css = { "background-color":json.color==undefined?"#000":json.color, "position":"absolute","overflow":"hidden", "-moz-opacity": "0.75" , "filter":"alpha(opacity=75)","z-index":"2" ,"opacity":"0.75", "top" : "0px" , "left":"0px","width":bodyScrollSize.width,"height":bodyScrollSize.height };         
		jqCover.css(_css); 
		jqCover.appendTo("body"); 
	}
	if(typeof(json.msg)!="undefined")
		this.html(json.msg);
	this.css("height","auto");
	this.css("position","absolute").css("z-index","100");
	this.css("left",left+"px").css("top",top+"px").fadeIn("slow");
	if(jQuery.msgShowObj!=undefined)
	{
		try{jQuery.msgShowObj.fadeOut('slow');}catch(e){};
	}
	jQuery.msgShowObj=this;
	if(typeof(json.callback)!="undefined")
		jQuery.msgCallBack=json.callback;
	else
		jQuery.msgCallBack=null;
	jQuery.cc=undefined;
	if(json.autoClose!=false)
	{
		jQuery.cc=window.setTimeout("try{jQuery.msgShowObj.closeMsg();}catch(e){}",json.time==undefined?2000:json.time);
	}
	return this;
}
jQuery.fn.closeMsg=function()
{
	this.fadeOut('slow',jQuery.msgCallBack);
	jQuery.msgShowObj=undefined;
	$('#jq_effect_backGroundIframe').remove();
	$('#jq_effect_backGroundDiv').remove();
	
	return this;
}

jQuery.fn.getBodyScrollSize=function()
{
	var bodySL, bodyST, bodySW, bodySH; 
	if(window.pageXOffset) 
	{
		bodySL=window.pageXOffset; 
		bodySW=window.innerWidth; 
		bodyST=window.pageYOffset; 
		bodySH=window.innerHeight; 
	}
	else if(document.documentElement) 
	{	
		bodySL=document.documentElement.scrollLeft; 
		bodySW=document.documentElement.scrollWidth; //-10
		bodyST=document.documentElement.scrollTop; 
		bodySH=document.documentElement.clientHeight>document.documentElement.scrollHeight?document.documentElement.clientHeight:document.documentElement.scrollHeight;
	}
	else if(document.body) 
	{
		bodySL=document.body.scrollLeft; 
		bodySW=document.body.scrollWidth; 
		bodyST=document.body.scrollTop; 
		bodySH=document.body.clientHeight>document.body.scrollHeight?document.body.clientHeight:document.body.scrollHeight;
	}

return {"top":bodyST,"left":bodySL,"width":bodySW,"height":bodySH};
}

jQuery.fn.getBodySize=function()
{
	var bodyCW, bodyCH; 
	if(window.innerWidth) 
		bodyCW=window.innerWidth; 
	else if(document.documentElement&&document.documentElement.clientWidth) 
		bodyCW=document.documentElement.clientWidth; 
	else if(document.body) 
		bodyCW=document.body.clientWidth; //author: meizz

if(window.innerHeight) 
		bodyCH=window.innerHeight; 
	else if(document.documentElement&&document.documentElement.clientHeight) 
		bodyCH=document.documentElement.clientHeight; 
	else if(document.body) 
		bodyCH=document.body.clientHeight; 
	
	return {"width":bodyCW,"height":bodyCH};
}

function _alert()
{
	alert("OK");
}
</script>
</head>

<div class="code">
    
        功能是：居中显示ID为msg的元素，而且过2秒后自动消失<br />
        代码是：$('#msg').showMsg({autoMiddle:true})<br />
        演示是：<input type="button" name="button" id="button" value="查看" onclick="$('#msg').showMsg({autoMiddle:true})" />
    
</div>
<div class="code">
    
        功能是：居中显示ID为msg的元素，而且过5秒后自动消失<br />
        代码是：$('#msg').showMsg({autoMiddle:true,time:5000})<br />
        演示是：<input type="button" name="button" id="button" value="查看" onclick="$('#msg').showMsg({autoMiddle:true,time:5000})" />
    
</div>
<div class="code">
    
        功能是：在左上角的地方显示ID为msg的元素，而且过5秒后自动消失,消失后触发回调函数<br />
        代码是：$('#msg').showMsg({msg:'哈哈，好了',left:0,top:0,time:5000,callback:_alert})<br />
        演示是：<input type="button" name="button" id="button" value="查看" onclick="$('#msg').showMsg({msg:'哈哈，好了',left:0,top:0,time:5000,callback:_alert})" />
    
</div>
<div class="code">
    
        功能是：居中显示ID为domMessage的元素，覆盖屏幕（不自动关闭）<br />
        代码是：$("#domMessage").showMsg({autoMiddle:true,coverBody:true,autoClose:false,left:200,top:300});<br />
        演示是：<input type="button" name="button" id="button" value="查看" onclick="$('#domMessage').showMsg({autoMiddle:true,coverBody:true,autoClose:false});" />
    
</div>
<div class="code">
    
        功能是：在左上角(200,300)ID为domMessage的元素，覆盖屏幕（自动关闭）<br />
        代码是：$("#domMessage").showMsg({coverBody:true,left:200,top:300});<br />
        演示是：<input type="button" name="button" id="button" value="查看" onclick='$("#domMessage").showMsg({coverBody:true,left:200,top:300});' />
    
</div>

<div class="code">
    
        功能是：居中显示ID为tbl的表格，覆盖屏幕（自动关闭）<br />
        代码是：$('#tbl').showMsg({coverBody:true,autoMiddle:true})<br />
        演示是：<input type="button" name="button" id="button" value="查看" onclick='$("#tbl").showMsg({coverBody:true,autoMiddle:true})' />
    
</div>

来说说所有的参数的含义吧：
<div class="code">
参数为一object（JSON），说明如下:
  <table width="900" border="1" id="paramTbl">
    <tr>
      <td width="187" height="22" bgcolor="#CCCCFF">参数</td>
      <td width="134" bgcolor="#CCCCFF">类型</td>
      <td width="257" bgcolor="#CCCCFF">含义</td>
      <td width="257" bgcolor="#CCCCFF">DEMO</td>
    </tr>
    <tr>
      <td>autoMiddle</td>
      <td>true/false,默认false</td>
      <td>是否在屏幕的正中间显示</td>
      <td><a href="#" onclick="$('#msg').showMsg({autoMiddle:true});return false;">试验一下</a> autoMiddle:true</td>
    </tr>
    <tr>
      <td>left</td>
      <td>int,默认0</td>
      <td>显示位置的左坐标,autoMiddle=true时无效</td>
      <td><a href="#" onclick="$('#msg').showMsg({left:100});return false;">试验一下</a> left:100</td>
    </tr>
    <tr>
      <td>top</td>
      <td>int,默认0</td>
      <td>显示位置的上坐标,autoMiddle=true时无效</td>
      <td><a href="#" onclick="$('#msg').showMsg({top:100});return false;">试验一下</a> top:100</td>
    </tr>
    <tr>
      <td>coverBody</td>
      <td>true/false,默认false</td>
      <td>是否覆盖窗口</td>
      <td><a href="#" onclick="$('#msg').showMsg({autoMiddle:true,coverBody:true});return false;">试验一下</a> autoMiddle:true,coverBody:true</td>
    </tr>
    <tr>
      <td>time</td>
      <td>int,默认2000</td>
      <td>消失时间,autoClose=false时无效</td>
      <td><a href="#" onclick="$('#msg').showMsg({time:5000});return false;">试验一下</a> time:5000</td>
    </tr>
    <tr>
      <td>callback</td>
      <td>function</td>
      <td>回调函数</td>
      <td><a href="#" onclick="$('#msg').showMsg({callback:function(){alert('关闭了');}});return false;">试验一下</a> callback:function(){alert('关闭了');}</td>
    </tr>
    <tr>
      <td height="19">msg</td>
      <td>string</td>
      <td>要显示的消息,将重写对象的innerHTML</td>
      <td><a href="#" onclick="$('#msg').showMsg({msg:'改变了的内容'});return false;">试验一下</a> msg:'改变了的内容'</td>
    </tr>
    <tr>
      <td height="25">autoClose</td>
      <td height="25">true/false,默认true</td>
      <td height="25">是否自动关闭显示</td>
      <td height="25"><a href="#" onclick="$('#domMessage').showMsg({autoClose:false});return false;">试验一下</a> autoClose:false</td>
    </tr>
    <tr>
      <td>color</td>
      <td>string,默认是#000</td>
      <td>颜色值,配合coverBody:true使用</td>
      <td><a href="#" onclick="$('#msg').showMsg({color:'red',coverBody:true});return false;">试验一下</a> color:'red',coverBody:true</td>
    </tr>
    <tr>
      <td height="25" colspan="4">注：所有参数都是可选的。</td>
    </tr>
  </table>
  <br />
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="200" border="1" id="tbl" style="display:none">
  <tr>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>c</td>
    <td>d</td>
  </tr>
  <tr>
    <td>e</td>
    <td>f</td>
  </tr>
</table>
<div id="domMessage" style="display:none; width:500px; color:White;  border:1px solid #fff; text-align:center; background-color:#CC33FF"> 
    <br />
    	点取消进行关闭<input type="button"  value="取消" onclick="$('#domMessage').closeMsg();" />
    <br /><br />
</div> 
<div id="msg" style="display:none;width:250px;filter:alpha(opacity=70);-moz-opacity:0.7; background-color:Yellow; padding:3px; border:solid 1px #000; ">
别人笑我太疯癫，<br />
我笑他人看不穿。<br />
</div>

提示：您可以先修改部分代码再运行

本插件基于JQ,在IE6,7,FF1.5和Opera9下测试通过
特点:
  1.兼容性非常好
  2.可以覆盖select
  3.使用非常的方便,你如果要在里面显示一些html,以前的做法是把html拼接为一个string(js),可现在你可以可视化的编辑它了
  4.涵盖了基本上很常用的功能
  5.做的仓促,有问题欢迎提出来
列举一些简单的使用:

$('#msg').showMsg({autoMiddle:true})
//居中显示ID为msg的元素，而且过2秒后自动消失

复制代码

$('#msg').showMsg({autoMiddle:true,time:5000})
//居中显示ID为msg的元素，而且过5秒后自动消失

复制代码

$('#msg').showMsg({msg:'哈哈，好了',left:0,top:0,time:5000,callback:_alert})
//左上角的地方显示ID为msg的元素，而且过5秒后自动消失,消失后触发回调函数

复制代码

$("#domMessage").showMsg({autoMiddle:true,coverBody:true,autoClose:false,left:200,top:300});
//居中显示ID为domMessage的元素，覆盖屏幕（不自动关闭）

复制代码

有关的参数说明如下图:

大家还可以在这里观看演示:http://omeweb.com/photo/temp/msg/
在这里下载:http://omeweb.com/photo/temp/msg/jq_msg.rar

[ 本帖最后由 omeweb 于 2008-1-21 12:51 编辑 ]

xml5

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

我的原创JQ插件:人性化的消息显示,使用非常方便 [复制链接]

回复 #2 asdfgasdfg1 的帖子

回复 #5 comasp 的帖子

回复 #7 heeroyuyj 的帖子

回复 #10 fxlijun 的帖子

回复 #14 zhutianyi 的帖子

回复 #16 skybot 的帖子

回复 #20 popperw 的帖子

回复 #21 omeweb 的帖子

浏览过的帖子

浏览过的版块