属于你的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 相关文章推荐
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 Javascript
全选复选框JavaScript编写小结(附代码)
Aug 16 Javascript
React如何避免重渲染
Apr 10 Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 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/05/18 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
使用python分析git log日志示例
2014/02/27 Python
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
基于python3的socket聊天编程
2020/02/17 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
《雪地里的小画家》教学反思
2014/02/22 职场文书
10的分与合教学反思
2014/04/30 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL
Python中time标准库的使用教程
2022/04/13 Python
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android
python区块链持久化和命令行接口实现简版
2022/05/25 Python