分享一個自己整理后的提示框插件，大家在做網站的時候，會用到基于jquery的提示框的需求，以前都是遇到一個做一個，太沒有效率，周末自己整合了一下，分享一下插件，基本能解決絕大部分需求。
$.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",//如果指定就用指定的，如果不用就通過在父元素上設置data-content來傳遞數據
delayTime:100,
event:"hover",
});
需要設置的有下面幾項內容，<code>direction</code><code>content</code><code>delayTime</code><code>event</code>，首先是<code>direction</code>確定提示框出現于相對于父元素的位置。<code>content</code>提示框內出現的內容，<code>delayTime</code>確定一下出現的延遲時間，<code>event</code>確定是通過<code>hover事件<code>還是通過<code>click事件<code>觸發。<p>
還有一點是對于提示框的樣式可以自己定制，這里面就有一個預備定制的模板，可以看一下，
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>'
預備的模板里面包括一個內容主體<code><div class="tips_content"></div><code>，還有四個箭頭的位置，可以自動根據<code>direction</code>來顯示哪個方向的小箭頭顯示，比如<code>direction</code>為左，小箭頭就會出現在框體的右邊。
當然這些樣式需要使用者自己來填寫。
