属于你的jQuery提示框(Tip)插件


Posted in Javascript onJanuary 20, 2016

插件可以满足常用的提示显示,支持12个方向,支持边框、背景色、文本颜色自定义,支持位置微调、层级微调、宽度间距等参数调整。

先看看效果:

属于你的jQuery提示框(Tip)插件

tips:提示信息组件
参数:

  • msg:'asdf',内容
  • dire:2,方向
  • w:250,宽度
  • _x:0,横向偏移
  • _y:0,纵向偏移
  • zIndex:100000,层级
  • borderColor:#FFF,边框颜色
  • bgColor:#FFF,背景颜色
  • useHover:true是否使用悬浮显示
  • color:默认提示文字颜色
  • padding:边距

javascript代码:

(function ($) {
  var defaults = {
    dire: 12,
    w: 250,
    _x: 0,
    _y: 0,
    borderColor: '#FFBB76',
    bgColor: '#FFFCEF',
    color: '#FF0000',
    padding: [5, 10],
    arrWidth: 10,
    useHover: true,
    zIndex: 100000
  };
  $.fn.tips = function (opt) {
    var tip, opts = $.extend({}, defaults, opt);
    if (this[0]) {
      opts.tag = this;
      if (opts.useHover) {
        opts.tag.hover(function () {
          tip = new Tip(opts);
          tip.show();
        }, function () {
          tip.close();
        });
      } else {
        tip = new Tip(opts);
        tip.show();
      }
      return this;
    }
  };
  function Tip(opts) {
    this.dire = opts.dire;
    this.width = opts.w;
    this.zIndex = opts.zIndex;
    this.borderColor = opts.borderColor;
    this.bgColor = opts.bgColor;
    this.color = opts.color;
    this.padding = opts.padding;
    this.arrWidth = opts.arrWidth;
    this.offsetX = opts._x;
    this.offsetY = opts._y;
    this.tag = opts.tag;
    this.msg = opts.msg;
    this.wrap = $('<div class="tip-wrap"></div>');
    this.innerArr = $('<div class="tip-arr-a"></div>');
    this.outerArr = $('<div class="tip-arr-b"></div>');
    this.init();
  };
  Tip.prototype = {
    init: function () {
      var msg = this.tag.data('tipMsg');
      if (!this.msg) {
        this.msg = msg;
      }
      this.createTemp();
    },
    createTemp: function () {
      var t = this;
      t.createWrap();
      t.setPosition();
    },
    createWrap: function () {
      var t = this;
      t.wrap.html(t.msg);
      var wrapCSS = {
        width: t.width,
        border: '1px solid ' + t.borderColor,
        'border-radius': '5px',
        background: t.bgColor,
        color: t.color,
        padding: t.getPadding()
      };
      t.outerArr.css(t.getArrStyle(t.dire, t.arrWidth, t.borderColor));
      t.innerArr.css(t.getArrStyle(t.dire, t.arrWidth, t.bgColor));
      t.wrap.prepend(t.innerArr).prepend(t.outerArr).css(wrapCSS);
      $('body').append(t.wrap);
    },
    setPosition: function () {
      var t = this;
      var posObj = t.getPos(t.dire, t.getPosition(t.tag), t.getPosition(t.wrap), t.arrWidth), pos = posObj.pos, innerPos = posObj.innerPos, outerPos = posObj.outerPos;
      t.wrap.css({top: pos.y, left: pos.x});
      t.innerArr.css({top: innerPos.y, left: innerPos.x});
      t.outerArr.css({top: outerPos.y, left: outerPos.x});
    },
    getPadding: function () {
      var t = this, pad = '0px', padArr = t.padding, len = padArr.length;
      switch (len) {
        case 1:
          pad = padArr[0] + 'px';
          break;
        case 2:
          pad = padArr[0] + 'px ' + padArr[1] + 'px';
          break;
        case 3:
          pad = padArr[0] + 'px ' + padArr[1] + 'px ' + padArr[2] + 'px';
          break;
        case 4:
          pad = padArr[0] + 'px ' + padArr[1] + 'px ' + padArr[2] + 'px ' + padArr[3] + 'px';
          break;
      }
      return pad;
    },
    getPosition: function (tag) {
      return {t: tag.offset().top, l: tag.offset().left, h: tag.outerHeight(), w: tag.outerWidth()};
    },
    getArrStyle: function (dir, width, color) {
      var style;
      switch (dir) {
        case 11:
        case 12:
        case 1:
          style = {
            'border-bottom-style': 'solid',
            'border-width': '0px ' + width + 'px ' + width + 'px',
            'border-bottom-color': color
          };
          break;
        case 2:
        case 3:
        case 4:
          style = {
            'border-left-style': 'solid',
            'border-width': width + 'px 0px ' + width + 'px ' + width + 'px',
            'border-left-color': color
          };
          break;
        case 5:
        case 6:
        case 7:
          style = {
            'border-top-style': 'solid',
            'border-width': width + 'px ' + width + 'px 0px',
            'border-top-color': color
          };
          break;
        case 8:
        case 9:
        case 10:
          style = {
            'border-right-style': 'solid',
            'border-width': width + 'px ' + width + 'px ' + width + 'px 0px',
            'border-right-color': color
          };
          break;
      }
      return style || {};
    },
    getPos: function (d, tagPos, pos, arrWidth) {
      var _pos, _innerPos, _outerPos, l = tagPos.l, t = tagPos.t, w = tagPos.w, h = tagPos.h, ww = pos.w, hh = pos.h;
      switch (d) {
        case 0:
        case 1:
          _pos = {x: l + w / 2 + arrWidth + 20 + 1 - ww, y: t + h + arrWidth};
          _outerPos = {x: ww - 2 - 20 - arrWidth * 2, y: -arrWidth};
          _innerPos = {x: ww - 2 - 20 - arrWidth * 2, y: -arrWidth + 1};
          break;
        case 2:
          _pos = {x: l - ww - arrWidth, y: t + h / 2 - arrWidth - 20 - 1};
          _outerPos = {x: ww - 2, y: 20};
          _innerPos = {x: ww - 2 - 1, y: 20};
          break;
        case 3:
          _pos = {x: l - ww - arrWidth, y: t + h / 2 - hh / 2};
          _outerPos = {x: ww - 2, y: (hh - 2) / 2 - arrWidth};
          _innerPos = {x: ww - 2 - 1, y: (hh - 2) / 2 - arrWidth};
          break;
        case 4:
          _pos = {x: l - ww - arrWidth, y: t + h / 2 + arrWidth + 20 + 1 - hh};
          _outerPos = {x: ww - 2, y: hh - 2 - 20 - arrWidth * 2};
          _innerPos = {x: ww - 2 - 1, y: hh - 2 - 20 - arrWidth * 2};
          break;
        case 5:
          _pos = {x: l + w / 2 + arrWidth + 20 + 1 - ww, y: t - arrWidth - hh};
          _outerPos = {x: ww - 2 - 20 - arrWidth * 2, y: hh - 2};
          _innerPos = {x: ww - 2 - 20 - arrWidth * 2, y: hh - 2 - 1};
          break;
        case 6:
          _pos = {x: l + w / 2 - ww / 2, y: t - arrWidth - hh};
          _outerPos = {x: (ww - 2) / 2 - arrWidth, y: hh - 2};
          _innerPos = {x: (ww - 2) / 2 - arrWidth, y: hh - 2 - 1};
          break;
        case 7:
          _pos = {x: l + w / 2 - 20 - arrWidth, y: t - arrWidth - hh};
          _outerPos = {x: 20, y: hh - 2};
          _innerPos = {x: 20, y: hh - 2 - 1};
          break;
        case 8:
          _pos = {x: l + w + arrWidth, y: t + h / 2 + arrWidth + 20 + 1 - hh};
          _outerPos = {x: -arrWidth, y: hh - 2 - 20 - arrWidth * 2};
          _innerPos = {x: -arrWidth + 1, y: hh - 2 - 20 - arrWidth * 2};
          break;
        case 9:
          _pos = {x: l + w + arrWidth, y: t + h / 2 - hh / 2};
          _outerPos = {x: -arrWidth, y: (hh - 2) / 2 - arrWidth};
          _innerPos = {x: -arrWidth + 1, y: (hh - 2) / 2 - arrWidth};
          break;
        case 10:
          _pos = {x: l + w + arrWidth, y: t + h / 2 - arrWidth - 20 - 1};
          _outerPos = {x: -arrWidth, y: 20};
          _innerPos = {x: -arrWidth + 1, y: 20};
          break;
        case 11:
          _pos = {x: l + w / 2 - 20 - arrWidth, y: t + h + arrWidth};
          _outerPos = {x: 20, y: -arrWidth};
          _innerPos = {x: 20, y: -arrWidth + 1};
          break;
        case 12:
          _pos = {x: l + w / 2 - ww / 2, y: t + h + arrWidth};
          _outerPos = {x: (ww - 2) / 2 - arrWidth, y: -arrWidth};
          _innerPos = {x: (ww - 2) / 2 - arrWidth, y: -arrWidth + 1};
          break;
        default:
          _pos = {x: 0, y: 0};
      }
      return {
        pos: _pos,
        innerPos: _innerPos,
        outerPos: _outerPos
      };
    },
    show: function () {
      this.wrap.show();
    },
    close: function () {
      this.wrap.remove();
    }
  };
})(jQuery);

CSS:

.tip-wrap {
  position: absolute;
  display: none;
}

.tip-arr-a, .tip-arr-b {
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  border-style: dashed;
  border-color: transparent;
}
page:

<div class="test">
  <span data-tip-msg="我是测试数据<br>我是测试数据<br>我是测试数据">我是测试数据</span>
</div>

<script>
  $('.test span').tips();
</script>

效果:

属于你的jQuery提示框(Tip)插件

以上就是一款简简单单的jQuery提示框(Tip)插件,希望大家可应用到自己的项目中,有所收获。

Javascript 相关文章推荐
javascript对象的property和prototype是这样一种关系
Mar 24 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
Javascript中的delete操作符详细介绍
Jun 06 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
Boostrap入门准备之border box
May 09 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
js实现二级导航功能
Mar 03 Javascript
详解node-ccap模块生成captcha验证码
Jul 01 Javascript
JS非空验证及邮箱验证的实例
Aug 11 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 #Javascript
高性能JavaScript循环语句和条件语句
Jan 20 #Javascript
详解Javascript模板引擎mustache.js
Jan 20 #Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 #Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 #Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 #Javascript
js实现图片无缝滚动特效
Mar 19 #Javascript
You might like
php写的简易聊天室代码
2011/06/04 PHP
php字符集转换
2017/01/23 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
浏览器打开层自动缓慢展开收缩实例代码
2013/07/04 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
nodejs multer实现文件上传与下载
2017/05/10 NodeJs
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
vue webpack实用技巧总结
2018/04/24 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
基于python编写的微博应用
2014/10/17 Python
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
pandas通过索引进行排序的示例
2018/11/16 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
python 消费 kafka 数据教程
2019/12/21 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
大学军训感想
2014/02/12 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
PyTorch的Debug指南
2021/05/07 Python
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js