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


Posted in Javascript onDecember 20, 2012

在程序提交后,我们需要验证并提示出错的位置,利用JQuery我们可以轻松实现气泡提示,先看效果图:

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

具体调用代码

<input name="ipt" id="ipt" value=""/> 
<script language="javascript"> 
Tooltip.show('输入值为空!','ipt'); 
</script>

其实现过程如下

1、首先我们在Photoshop中设计出提示框的形状及背景。

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

2、我们将背景切成三个部分,top、main、bottom

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

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

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

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(); 
}); 
}
Javascript 相关文章推荐
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
js实现倒计时关键代码
May 05 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 Javascript
微信小程序之几种常见的弹框提示信息实现详解
Jul 11 Javascript
vue 限制input只能输入正数的操作
Aug 05 Javascript
JQuery实现简单验证码提示解决方案
Dec 20 #Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 #Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 #Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 #Javascript
img onload事件绑定各浏览器均可执行
Dec 19 #Javascript
JavaScript实现快速排序(自已编写)
Dec 19 #Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 #Javascript
You might like
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
PHP之数组学习
2011/05/29 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
Windows下安装python2.7及科学计算套装
2015/03/05 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
Python中的rjust()方法使用详解
2015/05/19 Python
Python中的sort()方法使用基础教程
2017/01/08 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
Python中logging实例讲解
2019/01/17 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
python实现简单坦克大战
2020/03/27 Python
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
幼儿如何来做好自我评价
2013/11/05 职场文书
补充协议书
2015/01/28 职场文书
旷工辞退通知书
2015/04/17 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
庆七一晚会主持词
2015/06/30 职场文书
python非标准时间的转换
2021/07/25 Python
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers