属于你的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 相关文章推荐
jquery中的事件处理详细介绍
Jun 24 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
jquery 定位input元素的几种方法小结
Jul 28 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
微信小程序 常用工具类详解及实例
Feb 15 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 Javascript
js限制输入框只能输入数字(onkeyup触发)
Sep 28 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 Javascript
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
学习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 第一节 php简介
2012/04/28 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
限制文本字节数js代码
2007/03/06 Javascript
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
2015/03/10 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
2019/06/19 jQuery
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
社团招新策划书
2014/02/04 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
汽车专业求职信
2014/06/05 职场文书
社区志愿者培训方案
2014/06/10 职场文书
美术兴趣小组活动总结
2014/07/07 职场文书
导游词之介休绵山
2019/12/31 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python