在程序提交后，我们需要验证并提示出错的位置，利用JQuery我们可以轻松实现气泡提示，先看效果图： 具体调用代码：复制代码 代码如下:<input name="ipt" id="ipt" value=""/> <script language="javascript"> Tooltip.show('输入值为空！','ipt'); </script> 其实现过程如下： 1、首先我们在Photoshop中设计出提示框的形状及背景。 2、我们将背景切成三个部分，top、main、bottom top： main： bottom： 3、定义提示框的CSS文件复制代码 代码如下:.tooltip{ position:absolute; height:200px; width:300px; padding:10px; } .tooltip_main{ background-image:url(images/tooltip_main.png); background-position:center; background-repeat:repeat-y; padding-left:30px; padding-right:30px; color:#C00; font-weight:bold; } .tooltip_top{ width:300px; height:40px; background-image:url(images/tooltip_top.png); background-repeat:no-repeat; background-position:bottom; } .tooltip_bottom{ width:300px; height:20px; background-image:url(images/tooltip_bottom.png); background-repeat:no-repeat; background-position:top; }4、创建Tooltip类，其实现如下：复制代码 代码如下:var Tooltip = {}; Tooltip.show = function(msg,obj){ $('#'+obj).after('<div class="tooltip" id="tooltip_'+obj+'">' +'<div class="tooltip_top"></div>' +'<div class="tooltip_main">'+msg+'</div>' +'<div class="tooltip_bottom"></div>' +'</div>'); //调整位置 var objOffset = $('#'+obj).offset(); objOffset.left-=25; objOffset.top-=10; $('#tooltip_'+obj).offset(objOffset); //点击消失 $('#tooltip_'+obj).click(function(){ $(this).hide(); $('#'+obj).focus(); }); }

　　推荐阅读

　　JS上传图片前的限制包括(jpg jpg gif及大小高宽)等

功能： 1.限制扩展名：只能jpg || jpg和gif 2.限制图片大小：K为单位 3.限制图片宽高：px为单位（要么都有，要么都无） 4.限制已经损坏的图片（没有预览的图片） 5.限制更改过扩展名的图片（比如强制把一个动态的G>>>详细阅读

本文标题：JQuery实现简单时尚快捷的气泡提示插件

地址：http://www.17bianji.com/kaifa2/JS/22768.html

 1/2    1