jquery插件之tip提示框

didikee 发布于2019-08-19 17:22 / 1229人阅读

摘要：提示框插件插件可以满足常用的提示显示，支持个方向，支持边框背景色文本颜色自定义，支持位置微调层级微调宽度间距等参数调整。

Tips提示框插件

插件可以满足常用的提示显示，支持12个方向，支持边框、背景色、文本颜色自定义，支持位置微调、层级微调、宽度间距等参数调整。

tips:提示信息组件

参数：

msg:"asdf",内容

dire:2,方向

w:250,宽度

_x:0,横向偏移

_y:0,纵向偏移

zIndex:100000,层级

borderColor:#FFF,边框颜色

bgColor:#FFF,背景颜色

useHover:true是否使用悬浮显示

color:默认提示文字颜色

padding:边距

(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:


    我是测试数据

效果：

GPU云服务器云服务器 jquery提示插件 jQuery提示框 jquery输入框插件提示框

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78469.html

触屏版开发总结

摘要：概述前段时间刚刚完成公司触屏版项目，我觉得很有必要写一篇文章总结下自己的心得和踩过的坑。小结个人觉得整个开发流程就是一体的，没有绝对的前后端分离。细数下开发过程中遇到的坑。最近在看模板，貌似很吊的样子总结学习就是不断踩坑的过程啊概述前段时间刚刚完成公司触屏版项目，我觉得很有必要写一篇文章总结下自己的心得和踩过的坑。每次回头看看自己写的代码，都有不一样的体会，不过大致感觉都是惊人的...

张利勇 2019-08-21 10:34 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

netmou 2019-08-23 12:28 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 评论0 收藏0
全解小程序猜数字游戏 04《程序员变现指南之微信&QQ 小程序真的零基础开发宝

摘要：此时使用设置当前值中的猜测值为输入框的内容值。接着判断猜测之是否大于或者小于，因为这两者是范围之外不再进行判断，所以最开始使用进行判断不能小于不能大于以上代码中表示调用微信小程序接口弹出提示，传入的参数为提示内容。 ...

不知名网友 2021-11-29 10:50 评论0 收藏0
javascript功能插件大集合，写前端的亲们记得收藏

摘要：一个专注于浏览器端和兼容的包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。完全插件化的工具，能在中识别和记录模式。健壮的优雅且功能丰富的模板引擎。完整的经过充分测试和记录数据结构的库。【导读】：GitHub 上有一个 Awesome – XXX 系列的资源整理。awesome-javascript 是 sorrycc 发起维护的 JS 资源列表...

cfanr 2019-08-20 10:34 评论0 收藏0