属于你的jQuery提示框(Tip)插件
更新时间:2016年01月20日 14:39:29 作者:雕哥
这篇文章主要分享了一款属于你的jQuery提示框(Tip)插件,功能很强大,希望大家喜欢
插件可以满足常用的提示显示,支持12个方向,支持边框、背景色、文本颜色自定义,支持位置微调、层级微调、宽度间距等参数调整。
先看看效果:
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)插件,希望大家可应用到自己的项目中,有所收获。
相关文章
javascript设计模式 – 职责链模式原理与用法实例分析
这篇文章主要介绍了javascript设计模式 – 职责链模式,结合实例形式分析了javascript职责链模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下2020-04-04javascript模版引擎-tmpl的bug修复与性能优化分析
在平时编码中,经常要做拼接字符串的工作,如把json数据用HTML展示出来,以往字符串拼接与逻辑混在在一起会让代码晦涩不堪,加大了多人协作与维护的成本。而采用前端模板机制就能很好的解决这个问题2011-10-10
最新评论