在程序提交后，我们需要验证并提示出错的位置，利用JQuery我们可以轻松实现气泡提示，先看效果图：
[img]http://files.jb51.net/file_images/article/201212/2012122016192714.jpg[/img]
[b]具体调用代码[/b]：
<input name="ipt" id="ipt" value=""/>
<script language="javascript">
Tooltip.show('输入值为空！','ipt');
</script>
[b]其实现过程如下[/b]：
1、首先我们在Photoshop中设计出提示框的形状及背景。
[img]http://files.jb51.net/file_images/article/201212/2012122016192715.jpg[/img]
2、我们将背景切成三个部分，top、main、bottom
top：[img]http://files.jb51.net/file_images/article/201212/2012122016192716.png[/img]
main：[img]http://files.jb51.net/file_images/article/201212/2012122016192717.png[/img]
bottom：[img]http://files.jb51.net/file_images/article/201212/2012122016192718.png[/img]
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();
});
}
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
