基于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:'
' +
                    '
' +
                    '
' +
                    '
' +
                    '
' +
                    '
' +
                '
'
            };

            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" && (parentPositionLeftbodyHeight)){
                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

用法如下：

$(".articleBox").tips({
    direction:'right',
    content:"1231",//如果指定就用指定的，如果不用就通过在父元素上设置data-content来传递数据
    delayTime:100,
    event:"hover",
});

需要设置的有下面几项内容，directioncontentdelayTimeevent，首先是direction确定提示框出现于相对于父元素的位置。content提示框内出现的内容，delayTime确定一下出现的延迟时间，event确定是通过hover事件还是通过click事件触发。


还有一点是对于提示框的样式可以自己定制，这里面就有一个预备定制的模板，可以看一下，

template:'
' +
                    '
' +
                    '
' +
                    '
' +
                    '
' +
                    '
' +
                '
'

预备的模板里面包括一个内容主体

，还有四个箭头的位置，可以自动根据direction来显示哪个方向的小箭头显示，比如direction为左，小箭头就会出现在框体的右边。
当然这些样式需要使用者自己来填写。