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 相关文章推荐
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 Javascript
js计算任意值之间随机数的方法
Jan 16 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
Vue学习之常用指令实例详解
Jan 06 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 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对称加密算法示例
2014/05/07 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
html组件不可输入(只读)同时任何组件都有效
2013/04/01 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
python测试mysql写入性能完整实例
2018/01/18 Python
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
Python检测网络延迟的代码
2018/05/15 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
python实现彩票系统
2020/06/28 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
数据库笔试题
2013/05/09 面试题
主管会计岗位职责
2014/03/13 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
学校会议通知范文
2015/04/15 职场文书
React Fragment介绍与使用详解
2021/11/11 Javascript
如何在python中实现ECDSA你知道吗
2021/11/23 Python