jquery插件之tip提示框

didikee 發布于2019-08-19 17:22 / 1273人閱讀

摘要：提示框插件插件可以滿足常用的提示顯示，支持個方向，支持邊框背景色文本顏色自定義，支持位置微調層級微調寬度間距等參數調整。

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輸入框插件提示框

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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