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操作文本框readOnly
May 15 Javascript
jquery和javascript的区别(常用方法比较)
Jul 04 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
使用js画图之正弦曲线
Jan 12 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
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/10/25 PHP
一个PHP日历程序
2006/12/06 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
javascript tips提示框组件实现代码
2010/11/19 Javascript
jquery中动态效果小结
2010/12/16 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
angularJS开发注意事项
2018/05/26 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
vue实现信息管理系统
2020/05/30 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
python 录制系统声音的示例
2020/12/21 Python
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
院药学专业个人求职信
2013/09/21 职场文书
工程承诺书怎么写
2014/05/24 职场文书
学校三节实施方案
2014/06/09 职场文书
婚庆司仪开场白
2015/05/29 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL