Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 JQuery实现简单时尚快捷的气泡提示插件

JQuery实现简单时尚快捷的气泡提示插件

发布时间:2013-10-16   编辑:www.jquerycn.cn
在程序提交后,为了提高用户体验我们需要验证并提示出错的位置,利用JQuery我们可以轻松实现气泡提示,需要的朋友可以了解下

在程序提交后,我们需要验证并提示出错的位置,利用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();
});
}

您可能感兴趣的文章:
JQuery实现简单时尚快捷的气泡提示插件
jCallout 轻松实现气泡提示功能
jQuery工具提示插件 BeautyTips
jQuery气泡提示插件 jquery-rollover-tooltip
分享一个我自己写的ToolTip提示插件(附源码)
推荐17个优美新鲜的jQuery的工具提示插件
jquery.cvtooltip.js 基于jquery的气泡提示插件
jQuery产品展示控件 jqueryBook
jQuery 工具提示插件 PoshyTip
jQuery 气泡动画模仿插件 Bubble Engine

关键词: 气泡提示  插件   
[关闭]