JQuery实现简单实用的气泡提示插件
2013-04-26 16:12
555 查看
在程序提交后,我们需要验证并提示出错的位置,利用JQuery我们可以轻松实现气泡提示,先看效果图:
具体调用代码:
1、首先我们在Photoshop中设计出提示框的形状及背景。
2、我们将背景切成三个部分,top、main、bottom
top:
main:
bottom:
3、定义提示框的CSS文件
源码及演示下载地址:http://163.fm/cfOnqMo,提取码:dYmSe8Ga。
具体调用代码:
<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(); }); }
源码及演示下载地址:http://163.fm/cfOnqMo,提取码:dYmSe8Ga。
相关文章推荐
- JQuery实现简单实用的气泡提示插件
- JQuery实现简单时尚快捷的气泡提示插件
- JQuery实现简单时尚快捷的气泡提示插件
- jQuery表单验证插件formValidation实现个性化错误提示(超实用)
- jQuery实现的简单提示信息插件
- 简单实用的jQuery Tooltip提示插件
- jQuery实现的简单提示信息插件
- jQuery表单验证插件formValidation实现个性化错误提示(超实用)
- 一个简单的消息提示jquery插件
- 基于Jquery 简单实用的弹出提示框
- 8个实现在线浏览PDF文件的实用jQuery插件
- Struts2结合jquery autocomplet插件实现自动提示详解
- 一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
- jQuery:balloon气泡提示插件
- jQuery插件Tooltipster实现漂亮的工具提示
- JQuery实现简单验证码提示
- 转:一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
- jquery插件方式实现table查询功能的简单实例
- jQuery poshytip 插件的简单实用方法
- jquery实现简单实用的弹出层效果代码