请选择 进入手机版 | 继续访问电脑版
提问

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

  © 程序员  / 只看大图  / 倒序浏览
  © 本页面所有内容均为注册会员发布,若有侵权,请发邮件至:weixunnet@vip.qq.com

#楼主# 2019-6-18

跳转到指定楼层
在程序提交后,为了提高用户体验我们需要验证并提示出错的位置,利用JQuery我们可以轻松实现气泡提示,需要的朋友可以了解下
在程序提交后,我们需要验证并提示出错的位置,利用JQuery我们可以轻松实现气泡提示,先看效果图:


具体调用代码
  1. <input name="ipt" id="ipt" value=""/>
  2. <script language="javascript">
  3. Tooltip.show('输入值为空!','ipt');
  4. </script>
复制代码
其实现过程如下
1、首先我们在Photoshop中设计出提示框的形状及背景。


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

main:

bottom:

3、定义提示框的CSS文件
  1. .tooltip{
  2. position:absolute; height:200px;
  3. width:300px;
  4. padding:10px;
  5. }
  6. .tooltip_main{
  7. background-image:url(images/tooltip_main.png);
  8. background-position:center;
  9. background-repeat:repeat-y;
  10. padding-left:30px;
  11. padding-right:30px;
  12. color:#C00;
  13. font-weight:bold;
  14. }
  15. .tooltip_top{
  16. width:300px;
  17. height:40px;
  18. background-image:url(images/tooltip_top.png);
  19. background-repeat:no-repeat;
  20. background-position:bottom;
  21. }
  22. .tooltip_bottom{
  23. width:300px;
  24. height:20px;
  25. background-image:url(images/tooltip_bottom.png);
  26. background-repeat:no-repeat;
  27. background-position:top;
  28. }
复制代码
4、创建Tooltip类,其实现如下:
  1. var Tooltip = {};
  2. Tooltip.show = function(msg,obj){
  3. $('#'+obj).after('<div class="tooltip" id="tooltip_'+obj+'">'
  4. +'<div class="tooltip_top"></div>'
  5. +'<div class="tooltip_main">'+msg+'</div>'
  6. +'<div class="tooltip_bottom"></div>'
  7. +'</div>');
  8. //调整位置
  9. var objOffset = $('#'+obj).offset();
  10. objOffset.left-=25;
  11. objOffset.top-=10;
  12. $('#tooltip_'+obj).offset(objOffset);
  13. //点击消失
  14. $('#tooltip_'+obj).click(function(){
  15. $(this).hide();
  16. $('#'+obj).focus();
  17. });
  18. }
复制代码
回复

使用道具

成为第一个回答人

B Color Link Quote Code Smilies
Archiver|手机版|小黑屋|翁笔
翁笔联系邮箱:weixunnet@vip.qq.com 本站服务器由二联网赞助提供