屬于你的jQuery提示框（Tip）插件
更新時間：2016年01月20日 14:39:29 作者：雕哥
這篇文章主要分享了一款屬于你的jQuery提示框（Tip）插件，功能很強(qiáng)大，希望大家喜歡
插件可以滿足常用的提示顯示，支持12個方向，支持邊框、背景色、文本顏色自定義，支持位置微調(diào)、層級微調(diào)、寬度間距等參數(shù)調(diào)整。
先看看效果：
tips:提示信息組件
參數(shù)：
- msg:'asdf',內(nèi)容
- dire:2,方向
- w:250,寬度
- _x:0,橫向偏移
- _y:0,縱向偏移
- zIndex:100000,層級
- borderColor:#FFF,邊框顏色
- bgColor:#FFF,背景顏色
- useHover:true是否使用懸浮顯示
- color:默認(rèn)提示文字顏色
- 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="我是測試數(shù)據(jù)<br>我是測試數(shù)據(jù)<br>我是測試數(shù)據(jù)">我是測試數(shù)據(jù)</span>
</div>
<script>
$('.test span').tips();
</script>
效果：
以上就是一款簡簡單單的jQuery提示框（Tip）插件，希望大家可應(yīng)用到自己的項目中，有所收獲。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了如何通過原生js實現(xiàn)設(shè)為首頁并兼容ie、火狐和谷歌,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了innerHTML在IE中報錯解決方案,需要的朋友可以參考下2014-12-12
Jquery+javascript實現(xiàn)支付網(wǎng)頁數(shù)字鍵盤
這篇文章主要為大家詳細(xì)介紹了Jquery+javascript實現(xiàn)支付網(wǎng)頁數(shù)字鍵盤，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了JS簡單封裝的圖片無縫滾動效果,結(jié)合完整實例形式分析了javascript針對圖片無縫滾動功能實現(xiàn)的具體操作技巧,包括鼠標(biāo)事件響應(yīng)、事件函數(shù)及頁面元素屬性動態(tài)變換等相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
Cropper.js進(jìn)階實現(xiàn)圖片旋轉(zhuǎn)裁剪處理功能示例
這篇文章主要為大家介紹了Cropper.js進(jìn)階實現(xiàn)圖片旋轉(zhuǎn)裁剪功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章給大家介紹了使用js獲取sessionstorage中的值，首先獲取它是為了將獲得的信息輸出或者alert（),其次，在靜態(tài)頁面中，如果使用sessionStorage就相當(dāng)于在動態(tài)頁面里連接了數(shù)據(jù)庫一樣，具體內(nèi)容詳情大家參考下本文2018-01-01
JavaScript控制語句及搭建前端服務(wù)器的過程詳解
這篇文章主要介紹了JavaScript控制語句及搭建前端服務(wù)器,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
JavaScript本地數(shù)據(jù)存儲sessionStorage與localStorage使用詳解
這篇文章主要介紹了JavaScript本地數(shù)據(jù)存儲sessionStorage與localStorage使用，localStorage：永久存儲在本地，適合保存在本地的數(shù)據(jù)。sessionStorage：會話級的存儲，敏感帳號一次登陸2022-10-10
JavaScript的數(shù)據(jù)類型轉(zhuǎn)換原則(干貨)
JavaScript是一門弱類型（或稱動態(tài)類型）的語言，即變量的類型是不確定的。下面通過本文給大家分享javascript數(shù)據(jù)類型轉(zhuǎn)換小結(jié)，包括顯示轉(zhuǎn)換的數(shù)據(jù)類型和隱式的數(shù)據(jù)類型轉(zhuǎn)換，感興趣的朋友跟隨腳本一起看看吧2018-03-03
Javascript農(nóng)歷與公歷相互轉(zhuǎn)換的簡單實例
下面小編就為大家?guī)硪黄狫avascript農(nóng)歷與公歷相互轉(zhuǎn)換的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10