JQuery实现简单时尚快捷的气泡提示插件_jquery
程序员文章站
2022-04-10 13:28:27
...
在程序提交后,我们需要验证并提示出错的位置,利用JQuery我们可以轻松实现气泡提示,先看效果图:
其实现过程如下:
.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('
//调整位置
var objOffset = $('#'+obj).offset();
objOffset.left-=25;
objOffset.top-=10;
$('#tooltip_'+obj).offset(objOffset);
//点击消失
$('#tooltip_'+obj).click(function(){
$(this).hide();
$('#'+obj).focus();
});
}
具体调用代码:
复制代码 代码如下:
其实现过程如下:
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('
'
+''
+'
+''
+'
'); +''
+'
'+msg+'
' +''
+'
//调整位置
var objOffset = $('#'+obj).offset();
objOffset.left-=25;
objOffset.top-=10;
$('#tooltip_'+obj).offset(objOffset);
//点击消失
$('#tooltip_'+obj).click(function(){
$(this).hide();
$('#'+obj).focus();
});
}
上一篇: AngularJS中的过滤器使用详解_AngularJS
下一篇: js表格行上下移动实例代码
推荐阅读
-
jQuery实现模拟搜索引擎的智能提示功能简单示例
-
jQuery实现模拟搜索引擎的智能提示功能简单示例
-
js专家教你如何快速编写简单的jQuery提示插件
-
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
-
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
-
js专家教你如何快速编写简单的jQuery提示插件
-
文本框水印提示效果的简单实现代码_jquery
-
文本框水印提示效果的简单实现代码_jquery
-
jQuery插件Tooltipster实现漂亮的工具提示_jquery
-
一个简单的实现下拉框多选的插件可移植性比较好_jquery