基于jquery的提示框插件

分享一个自己整理后的提示框插件，大家在做网站的时候，会用到基于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>为左，小箭头就会出现在框体的右边。
当然这些样式需要使用者自己来填写。