php js提示插件,JavaScript_属于你的jQuery提示框（Tip）插件，插件可以满足常用的提示显示 - phpStudy...

属于你的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 = $('

this.innerArr = $('

this.outerArr = $('

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:

我是测试数据

$('.test span').tips();

效果：

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

WordPress迁移时一些常见问题的解决方法整理

linux系统下实现mysql热备份详细步骤(mysql主从复制)

升级Win10正式版出现0x80070002错误并自动回退至Win8.1系统的解决方法

node.js中的buffer.Buffer.isBuffer方法使用说明

PHP排序算法类实例

Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)

javascript中定义私有方法说明(private method)

node.js 使用ejs模板引擎时后缀换成.html

深入剖析JavaScript中的函数currying柯里化

Linux中apt-get和apt-cache命令使用详解

css3media响应式布局实例

php使用指定字符列表生成随机字符串的方法

css实现文字竖排效果示例代码

使用JavaScript+canvas实现图片裁剪