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 相关文章推荐
js中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 Javascript
原生js实现购物车功能
Sep 23 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 Javascript
JavaScript中arguments的使用方法详解
Dec 20 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
第六节--访问属性和方法
2006/11/16 PHP
php下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
javascript 写类方式之十
2009/07/05 Javascript
Prototype Date对象 学习
2009/07/12 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
electron制作仿制qq聊天界面的示例代码
2018/11/26 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
Python中常见的异常总结
2018/02/20 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
python os.path模块常用方法实例详解
2018/09/16 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
python输入错误后删除的方法
2019/10/12 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
应届生.NET方向面试题
2015/05/23 面试题
招商经理岗位职责
2013/11/16 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
2014年维稳工作总结
2014/11/18 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers