分享一個(gè)自己整理后的提示框插件囚痴，大家在做網(wǎng)站的時(shí)候，會(huì)用到基于jquery的提示框的需求族展，以前都是遇到一個(gè)做一個(gè)森缠，太沒(méi)有效率，周末自己整合了一下仪缸，分享一下插件贵涵，基本能解決絕大部分需求。
$.fn.tips= function (options) {
var toolTips = function (options,element,parentDom) {
this.startOptions=options;
this.startDefaults={
boxClass:null,
direction:'left',
content:null,
delayTime:100,
event:null,
template:'<div class="tips">' +
'<div class="tips_arrow_left"></div>' +
'<div class="tips_arrow_right"></div>' +
'<div class="tips_arrow_top"></div>' +
'<div class="tips_arrow_bottom"></div>' +
'<div class="tips_content"></div>' +
'</div>'
};
this.init("toolTips",element,parentDom);
};
toolTips.prototype.init=function(type,element,parentDom){
var self=this;
this.parentDom=parentDom;
this.element=element;
/* console.log(parentDom);
console.log(element);*/
this.extendSetting();
this.parentDom.append($(self.options.template));
this.tips=this.parentDom.find(".tips");
this.setContent();
this.changeStyle();
if(this.options.event!=null){
if(this.options.event==="click"){
this.element.on("click."+type, $.proxy(this.toggle,this));
}else{
var enterIn=this.options.event==="hover"?"mouseenter":"focusin";
var enterOut=this.options.event==="hover"?"mouseleave":"focusout";
this.element.on(enterIn, $.proxy(self.enter,this));
this.element.on(enterOut, $.proxy(self.leave,this));
}
}
};
toolTips.prototype.extendSetting= function () {
this.options= $.extend({},this.startDefaults,this.startOptions);
};
toolTips.prototype.getPosition= function () {
var parentWidth=this.parentDom.width();
var parentHeight=this.parentDom.height();
var bodyWidth=$(document).width();
var bodyHeight=$(document).height();
var parentPositionLeft=this.parentDom.offset().left;
var parentPositionTop=this.parentDom.offset().top;
var elementWidth=this.tips.width();
var elementHeight=this.tips.height();
console.log(elementHeight);
var culatePostion= function (direction,parentWidth,parentHeight,elementWidth,elementHeight) {
/* console.log(parentWidth);
console.log(elementHeight);*/
var position={
left:0,
top:0
};
switch (direction){
case "left":
position.left=-elementWidth;
position.top=0;
break;
case "right":
position.left=parentWidth;
position.top=0;
break;
case "top":
position.left=parentWidth/2-elementWidth/2;
position.top=-elementHeight;
console.log(elementHeight);
break;
case "bottom":
position.left=parentWidth/2-elementWidth/2;
position.top=parentHeight;
break;
}
return position;
};
if(this.options.direction==="right"&&(parentWidth+parentPositionLeft>bodyWidth)){
this.options.direction="left";
}else if(this.options.direction==="left" && (parentPositionLeft<elementWidth)){
console.log(parentPositionLeft);
console.log(this.tips.width());
this.options.direction="right";
}else if(this.options.direction==="top" && (parentPositionTop<elementHeight)){
this.options.direction="bottom";
}else if(this.options.direction==="bottom" && (parentPositionTop+elementHeight+parentHeight>bodyHeight)){
this.options.direction="top";
}
return culatePostion(this.options.direction,parentWidth,parentHeight,elementWidth,elementHeight);
};
toolTips.prototype.changeStyle= function () {
var self=this;
var positionObject=this.getPosition();
this.tips.css({
position:"absolute",
left:positionObject.left,
top:positionObject.top
});
var directions=["left","right","top","bottom"];
var arrowDirection={
"left":"right",
"right":"left",
"bottom":"top",
"top":"bottom"
};
if(directions!==null && self.options.direction!==null){
for(var i=0;i<directions.length;i++){
$(".tips_arrow_"+directions[i]).css({
display:"none"
});
}
$(".tips_arrow_"+arrowDirection[self.options.direction]).css({
display:"block"
})
}
};
toolTips.prototype.enter= function () {
var self=this;
clearTimeout(this.timeIn);
if(this.options.delayTime){
self.timeIn=setTimeout(function () {
self.show();
},self.delay);
}
};
toolTips.prototype.leave=function(){
var self=this;
clearTimeout(this.timeOut);
if(this.options.delayTime){
self.timeOut= setTimeout(function () {
console.log("comein");
self.hide();
},self.options.delay)
}
};
toolTips.prototype.show= function () {
this.tips.show();
};
toolTips.prototype.hide= function () {
this.tips.hide();
};
toolTips.prototype.toggle= function () {
this.tips.css("display")==="none"?this.enter():this.leave();
};
toolTips.prototype.setContent= function () {
var self=this;
var tipsContent=this.options.content?this.options.content:this.element.data("content");
this.tips.find(".tips_content").html(tipsContent);
};
return this.each(function () {
var self=$(this);
//console.log(self.data("content"));
var tip=new toolTips(options,self,self);
})
};
用法如下：
$(".articleBox").tips({
direction:'right',
content:"1231",//如果指定就用指定的，如果不用就通過(guò)在父元素上設(shè)置data-content來(lái)傳遞數(shù)據(jù)
delayTime:100,
event:"hover",
});
需要設(shè)置的有下面幾項(xiàng)內(nèi)容宾茂，<code>direction</code><code>content</code><code>delayTime</code><code>event</code>瓷马，首先是<code>direction</code>確定提示框出現(xiàn)于相對(duì)于父元素的位置。<code>content</code>提示框內(nèi)出現(xiàn)的內(nèi)容跨晴，<code>delayTime</code>確定一下出現(xiàn)的延遲時(shí)間欧聘，<code>event</code>確定是通過(guò)<code>hover事件<code>還是通過(guò)<code>click事件<code>觸發(fā)。<p>
還有一點(diǎn)是對(duì)于提示框的樣式可以自己定制端盆，這里面就有一個(gè)預(yù)備定制的模板怀骤，可以看一下，
template:'<div class="tips">' +
'<div class="tips_arrow_left"></div>' +
'<div class="tips_arrow_right"></div>' +
'<div class="tips_arrow_top"></div>' +
'<div class="tips_arrow_right"></div>' +
'<div class="tips_content"></div>' +
'</div>'
預(yù)備的模板里面包括一個(gè)內(nèi)容主體<code><div class="tips_content"></div><code>焕妙，還有四個(gè)箭頭的位置蒋伦，可以自動(dòng)根據(jù)<code>direction</code>來(lái)顯示哪個(gè)方向的小箭頭顯示，比如<code>direction</code>為左焚鹊，小箭頭就會(huì)出現(xiàn)在框體的右邊痕届。
當(dāng)然這些樣式需要使用者自己來(lái)填寫(xiě)。
