打印

我的原创JQ插件:人性化的消息显示,使用非常方便

omeweb [楼主]

橘子香水

中级会员

认证
帖子: 506
体力: 444
威望: 5
当前: 福建福州
离线: 4 天

专长 .NET,C#,MSSQL

1^# 大中小发表于 2008-1-21 12:42

先看看演示,如果没有效果,请刷新一下先,确保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>
<body>
<form>
  <select name="select" id="select">
  <option>选择一</option>
  <option>选择二</option>
  </select>
  
  <input type="text" name="textfield" id="textfield" />
  </form>
<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>
<div id="msg2" style="display:none;width:250px;filter:alpha(opacity=70);-moz-opacity:0.7; background-color:Yellow; padding:3px; border:solid 1px red; position:absolute;z-index:2;">
提示信息
</div>
</body>
</html>

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

本插件基于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 编辑 ]

http://www.omeweb.com

TOP

西部数码VPS主机1G内存仅266元

asdfgasdfg1

黑色瞳孔

银牌会员

帖子: 618
体力: 1115
威望: 0
当前: 大洋洲澳大利亚
离线: 45 天

2^# 大中小发表于 2008-1-21 12:46

没明白怎么回事
PS.有错误

TOP

广州周立功诚聘—平面/网页/UI/工业设计师 | 天业互联-酷睿租用599￥

omeweb [楼主]

橘子香水

中级会员

认证
帖子: 506
体力: 444
威望: 5
当前: 福建福州
离线: 4 天

专长 .NET,C#,MSSQL

3^# 大中小发表于 2008-1-21 12:52

回复 #2 asdfgasdfg1 的帖子

如果没有效果,请刷新一下先,确保JS文件被下载下来

或者是点这里 http://omeweb.com/photo/temp/msg/

或者是下载下来看

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

http://www.omeweb.com

TOP

认证您的手机，获得手机认证图标

，更多手机认证的好处

gmg121

新手上路

帖子: 13
体力: 26
威望: 0
离线: 1 天

4^# 大中小发表于 2008-1-21 12:56

重生,做个记号.

TOP

用CSS布局建站从零开始 | Photoshop中打造史诗般梦幻场景 | 05年第一次软件行业创业的惨痛教训

comasp

高级会员

帖子: 432
体力: 719
威望: 0
当前: 上海普陀
离线: 2 天

专长 前端制作,JS,UE

5^# 大中小发表于 2008-1-21 13:01

cssrain做个记号

www.cssrain.cn

TOP

omeweb [楼主]

橘子香水

中级会员

认证
帖子: 506
体力: 444
威望: 5
当前: 福建福州
离线: 4 天

专长 .NET,C#,MSSQL

6^# 大中小发表于 2008-1-21 15:29

回复 #5 comasp 的帖子

别只做记号啊,看看有什么BUG没有?

http://www.omeweb.com

TOP

heeroyuyj

中级会员

帖子: 218
体力: 434
威望: 0
当前: 上海闸北
离线: 95 天

7^# 大中小发表于 2008-1-21 15:54

这个和ClearType效果有兼容性问题。。。。

在打开了ClearType的电脑上，查看你的这些效果，中文字体会显示的异常发虚，而英文字体则变的像没有打开ClearType效果一样。。。

估计是因为使用半透明效果导致。。。

TOP

omeweb [楼主]

橘子香水

中级会员

认证
帖子: 506
体力: 444
威望: 5
当前: 福建福州
离线: 4 天

专长 .NET,C#,MSSQL

8^# 大中小发表于 2008-1-21 16:06

回复 #7 heeroyuyj 的帖子

恩，是半透明效果导致,这个效果可以根据你的实际情况来的,就是要显示的那个DIV的样式，随便是什么都可以,

适当定义一下字体大小可以解决问题

http://www.omeweb.com

TOP

twostone

银牌会员

帖子: 382
体力: 1062
威望: 0
离线: 2 天

9^# 大中小发表于 2008-1-21 17:17

下载下来运行就不会出现错误提示了。
不错，赞一个。

TOP

fxlijun

色拉豆豆

初级会员

认证
帖子: 67
体力: 155
威望: 0
当前: 北京朝阳区
离线: 2 天

专长 网页设计,前端制作,ASP

10^# 大中小发表于 2008-1-22 00:53

不能覆盖select，测试演示的时候就出现这样的情况

3.0营销：doseoer.com

TOP

likeytom

初级会员

帖子: 72
体力: 85
威望: 0
当前: 广东广州
离线: 83 天

11^# 大中小发表于 2008-1-22 02:01

jquery 这东西还没有用过。落伍了。。。

tenwe.com

TOP

EVA01

初级会员

帖子: 37
体力: 87
威望: 0
离线: 10 天

12^# 大中小发表于 2008-1-22 08:18

牛啊。做个记号。谢谢分享

TOP

omeweb [楼主]

橘子香水

中级会员

认证
帖子: 506
体力: 444
威望: 5
当前: 福建福州
离线: 4 天

专长 .NET,C#,MSSQL

13^# 大中小发表于 2008-1-22 09:36

回复 #10 fxlijun 的帖子

只有在coverBody:true的时候才覆盖select,别的时候我没有做,可以考虑给加上

http://www.omeweb.com

TOP

zhutianyi

银牌会员

帖子: 3490
体力: 1631
威望: 0
当前: 上海长宁

专长 翻译,策划,网站运营

14^# 大中小发表于 2008-1-22 09:43

效果不是很舒服~

TOP

omeweb [楼主]

橘子香水

中级会员

认证
帖子: 506
体力: 444
威望: 5
当前: 福建福州
离线: 4 天

专长 .NET,C#,MSSQL

15^# 大中小发表于 2008-1-22 10:08

回复 #14 zhutianyi 的帖子

.....你要怎么样你才舒服.....

http://www.omeweb.com

TOP

skybot

size

钻石会员

帖子: 3068
体力: 7098
威望: 6
当前: 上海长宁
离线: 1 天

专长 JS,C#,MSSQL

16^# 大中小发表于 2008-1-22 12:57

PS 用于做提示还行,不过不能用多,就和vista一样动不动就一黑的.眼睛受不鸟

http://www.qlili.com 个人站帮点啊

TOP

omeweb [楼主]

橘子香水

中级会员

认证
帖子: 506
体力: 444
威望: 5
当前: 福建福州
离线: 4 天

专长 .NET,C#,MSSQL

17^# 大中小发表于 2008-1-22 13:19

回复 #16 skybot 的帖子

就是做提示用的,其他的场合也可以使用,颜色什么的都是可以定义的,你可以不用任何颜色,或者使用白色

http://www.omeweb.com

TOP

humen1

初级会员

帖子: 77
体力: 65
威望: 2
当前: 上海虹口
离线: 110 天

18^# 大中小发表于 2008-1-24 11:36

well done !!!
收藏～～

humen1.com

TOP

pp373

新手上路

帖子: 1
体力: 2
威望: 0
离线: 76 天

19^# 大中小发表于 2008-1-26 02:02

真的很不錯, 太多東西要做了

TOP

popperw

初级会员

帖子: 92
体力: 135
威望: 1
当前: 浙江宁波
离线: 97 天

专长 前端制作,JS,PHP

20^# 大中小发表于 2008-1-26 08:44

这个插件做的很失败可以这么说 jq 本身的功能实现这个是很简单的，你搞了个插件下来却复杂多了。

TOP

omeweb [楼主]

橘子香水

中级会员

认证
帖子: 506
体力: 444
威望: 5
当前: 福建福州
离线: 4 天

专长 .NET,C#,MSSQL

21^# 大中小发表于 2008-1-26 11:46

回复 #20 popperw 的帖子

也许是你应该注意的地方没找正确,我没什么好说的

http://www.omeweb.com

TOP

btnet1

新手上路

帖子: 9
体力: 24
威望: 0
离线: 152 天

22^# 大中小发表于 2008-1-31 12:28

回复 #21 omeweb 的帖子

下载链接失败哦~

TOP

ziyu5946

新手上路

帖子: 5
体力: 10
威望: 0
离线: 122 天

23^# 大中小发表于 2008-2-16 20:58

FF2.0.0.12下运行无误，谢谢LZ

TOP

banaeib

初级会员

帖子: 67
体力: 156
威望: 0
当前: 广东中山
离线: 2 天

24^# 大中小发表于 2008-2-17 21:06

学习JQ ing....谢谢楼主

TOP

joelioa

烟灰受伤

高级会员

帖子: 294
体力: 605
威望: 0
当前: 天津南开
离线: 2 天

25^# 大中小发表于 2008-2-18 09:33

good
收藏一下。

TOP

wanjvk2

初级会员

帖子: 60
体力: 136
威望: 0
离线: 150 天

26^# 大中小发表于 2008-8-21 11:50

这样的效果用到哪好呢??

QQ群:18712161

TOP

weiweiok

初级会员

帖子: 89
体力: 170
威望: 0
离线: 54 天

27^# 大中小发表于 2008-8-21 13:48

引用:

原帖由 wanjvk2 于 2008-8-21 11:50 发表
这样的效果用到哪好呢??

我也在想这个问题……

好像突然想告诉用户什么时，蛮不错……

比如，你正在看一个页面，突然一黑，页面中间弹出个框框，写道：“地震啦！～～快跑～～～！！”

TOP

shaohua162001

荷西

高级会员

帖子: 1892
体力: 905
威望: 1
当前: 北京海淀区

专长 UI,前端制作

28^# 大中小发表于 2008-8-21 14:38

借贴提问：怎么把js代码解密

这是最好的时代这是最坏的年代

TOP

goodlucklq

深蓝蝴蝶

银牌会员

帖子: 503
体力: 1000
威望: 3
当前: 山东青岛
离线: 19 天

专长 JS,.NET,MSSQL

29^# 大中小发表于 2008-8-21 16:41

发现一个，不能遮盖select。点按钮去掉图层的那个功能

大巧不工大象无形
╭(︶_︶≠)╮

TOP

yybf

初级会员

帖子: 39
体力: 88
威望: 0
离线: 173 天

30^# 大中小发表于 2008-8-21 16:46

标记了。备用！！

ML5X.CN

TOP