JQuery实现简单时尚快捷的气泡提示插件
更新时间：2012年12月20日 16:27:48 作者：
在程序提交后，为了提高用户体验我们需要验证并提示出错的位置，利用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获取样式中的background-color的值时发现在获取到的颜色值在IE中与Chrome、Firefox显示的格式不一样，IE中是以HEX格式显示#ffff00，而Chrome、Firefox中则是以GRB格式显示rgb(255,0,0)，由于需要将颜色值存储到数据库中，所以想让颜色值的格式统一下（其实不统一也是可以存的）。搜索了一下，从国外的一个网站上得到一段代码2012-12-12
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
本篇文章主要介绍了EasyUI修改DateBox和DateTimeBox的默认日期格式示例，具有一定的参考价值，有兴趣的可以了解一下。2017-01-01
这篇文章主要介绍了jquery实现聚光灯效果的方法,可实现鼠标滑过图片时显示当前图片高亮,其他图片变暗的聚光灯效果,非常具有实用价值,需要的朋友可以参考下2015-02-02
自动设置iframe的宽度在应用中还是比较广泛的，本文使用jquery实现一下，感兴趣的朋友可以参考下2013-09-09
本文给大家介绍jquery选择器的相关知识，并通过案例给大家介绍jquery知识，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-05-05
jquery bind(click)传参让列表中每行绑定一个事件
用jquey bind 点击事件时，传参不注意可能会导致点击每一行都是显示相同内容的情况,下面有个示例，感兴趣的朋友可以参考下2014-08-08
这篇文章主要介绍了jquery轮播的实现方式，文中分享了jQuery轮播完整实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
jquery实现（textarea）placeholder自动换行
本文主要对jquery如何实现（textarea） placeholder自动换行的方法、思路进行介绍，下面就跟小编一起来看下吧2016-12-12
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗的解决方法分享。2011-06-06
jq写了点击事件，是通过获取元素的类名被点击后执行对应方法，但是研发套完模板，他会把所有的结构先清空，导致jq根本找不到那个元素，所以事件就不得执行了,需要的朋友可以参考下2020-02-02
最新评论