diff --git a/src/base/single/tip/tip.bubble.js b/src/base/single/tip/tip.bubble.js index 836881a66c..3ce2d2a939 100644 --- a/src/base/single/tip/tip.bubble.js +++ b/src/base/single/tip/tip.bubble.js @@ -34,7 +34,7 @@ BI.Bubble = BI.inherit(BI.Tip, { var o = this.options; return (this.text = BI.createWidget({ type: "bi.label", - cls: "bubble-text" + (" bubble-" + o.level), + cls: "bubble-text" + " bubble-" + o.level, text: o.text, hgap: 5, height: 18 @@ -106,4 +106,107 @@ BI.Bubble = BI.inherit(BI.Tip, { } }); -BI.shortcut("bi.bubble", BI.Bubble); \ No newline at end of file +BI.shortcut("bi.bubble", BI.Bubble); + +BI.BubbleView = BI.inherit(BI.Single, { + _defaultConfig: function () { + return BI.extend(BI.Bubble.superclass._defaultConfig.apply(this, arguments), { + extraCls: "bi-bubble", + direction: "top", + text: "", + level: "error", + height: 18 + }); + }, + _init: function () { + BI.BubbleView.superclass._init.apply(this, arguments); + var fn = function (e) { + e.stopPropagation(); + e.stopEvent(); + return false; + }; + this.element.bind({click: fn, mousedown: fn, mouseup: fn, mouseover: fn, mouseenter: fn, mouseleave: fn, mousemove: fn}); + BI.createWidget({ + type: "bi.left", + element: this, + items: [this["_" + this.options.direction]()] + }); + }, + + _createBubbleText: function () { + var o = this.options; + return (this.text = BI.createWidget({ + type: "bi.label", + cls: "bubble-text" + " bubble-" + o.level, + text: o.text, + hgap: 5, + height: 18 + })); + }, + + _top: function () { + return BI.createWidget({ + type: "bi.vertical", + items: [{ + el: this._createBubbleText(), + height: 18 + }, { + el: { + type: "bi.layout" + }, + height: 3 + }] + }); + }, + + _bottom: function () { + return BI.createWidget({ + type: "bi.vertical", + items: [{ + el: { + type: "bi.layout" + }, + height: 3 + }, { + el: this._createBubbleText(), + height: 18 + }] + }); + }, + + _left: function () { + return BI.createWidget({ + type: "bi.right", + items: [{ + el: { + type: "bi.layout", + width: 3, + height: 18 + } + }, { + el: this._createBubbleText() + }] + }); + }, + + _right: function () { + return BI.createWidget({ + type: "bi.left", + items: [{ + el: { + type: "bi.layout", + width: 3, + height: 18 + } + }, { + el: this._createBubbleText() + }] + }); + }, + + setText: function (text) { + this.text.setText(text); + } +}); + +BI.shortcut("bi.bubble_view", BI.BubbleView); diff --git a/src/core/controller/controller.bubbles.js b/src/core/controller/controller.bubbles.js index 1aa363e03a..c9d8220f89 100644 --- a/src/core/controller/controller.bubbles.js +++ b/src/core/controller/controller.bubbles.js @@ -28,9 +28,9 @@ BI.BubblesController = BI.inherit(BI.Controller, { }); }, - _createBubble: function (direct, text, level, height) { + _createBubble: function (direct, text, level, height, fixed) { return BI.createWidget({ - type: "bi.bubble", + type: fixed === false ? "bi.bubble_view" : "bi.bubble", text: text, level: level, height: height || 18, @@ -110,15 +110,16 @@ BI.BubblesController = BI.inherit(BI.Controller, { show: function (name, text, context, opt) { opt || (opt = {}); var container = opt.container || context; - var offsetStyle = opt.offsetStyle || {}; + var offsetStyle = opt.offsetStyle || "left"; var level = opt.level || "error"; var adjustYOffset = opt.adjustYOffset || 0; var adjustXOffset = opt.adjustXOffset || 0; + var fixed = opt.fixed === false; if (!this.storeBubbles[name]) { this.storeBubbles[name] = {}; } if (!this.storeBubbles[name]["top"]) { - this.storeBubbles[name]["top"] = this._createBubble("top", text, level); + this.storeBubbles[name]["top"] = this._createBubble("top", text, level, null, fixed); } BI.createWidget({ type: "bi.absolute", @@ -128,12 +129,64 @@ BI.BubblesController = BI.inherit(BI.Controller, { }] }); this.set(name, this.storeBubbles[name]["top"]); + + // 如果是非固定位置（fixed）的bubble + if (fixed === false) { + var bubble = this.storeBubbles[name]["top"]; + var bounds = bubble.element.bounds(); + if (BI.DOM.isTopSpaceEnough(context, this.get(name), adjustYOffset)) { + var top = -(bounds.height + adjustYOffset); + switch (offsetStyle) { + case "center": + bubble.element.css({ + left: (context.element.bounds().width - bounds.width) / 2 + adjustXOffset, + top: top + }); + break; + case "right": + bubble.element.css({ + right: adjustXOffset, + top: top + }); + break; + default: + bubble.element.css({ + left: adjustXOffset, + top: top + }); + break; + } + } else { + var bottom = -(bounds.height + adjustYOffset); + switch (offsetStyle) { + case "center": + bubble.element.css({ + left: (context.element.bounds().width - bounds.width) / 2 + adjustXOffset, + bottom: bottom + }); + break; + case "right": + bubble.element.css({ + right: adjustXOffset, + bottom: bottom + }); + break; + default: + bubble.element.css({ + left: adjustXOffset, + bottom: bottom + }); + break; + } + } + return this; + } var position = this._getTopPosition(name, context, offsetStyle); this.get(name).element.css({left: position.left + adjustXOffset, top: position.top - adjustYOffset}); if (!BI.DOM.isTopSpaceEnough(context, this.get(name), adjustYOffset)) { this.get(name).invisible(); if (!this.storeBubbles[name]["left"]) { - this.storeBubbles[name]["left"] = this._createBubble("left", text, level, 30); + this.storeBubbles[name]["left"] = this._createBubble("left", text, level, 30, fixed); } BI.createWidget({ type: "bi.absolute", @@ -148,7 +201,7 @@ BI.BubblesController = BI.inherit(BI.Controller, { if (!BI.DOM.isLeftSpaceEnough(context, this.get(name), adjustXOffset)) { this.get(name).invisible(); if (!this.storeBubbles[name]["right"]) { - this.storeBubbles[name]["right"] = this._createBubble("right", text, level, 30); + this.storeBubbles[name]["right"] = this._createBubble("right", text, level, 30, fixed); } BI.createWidget({ type: "bi.absolute", @@ -163,7 +216,7 @@ BI.BubblesController = BI.inherit(BI.Controller, { if (!BI.DOM.isRightSpaceEnough(context, this.get(name), adjustXOffset)) { this.get(name).invisible(); if (!this.storeBubbles[name]["bottom"]) { - this.storeBubbles[name]["bottom"] = this._createBubble("bottom", text, level); + this.storeBubbles[name]["bottom"] = this._createBubble("bottom", text, level, null, fixed); } BI.createWidget({ type: "bi.absolute", @@ -174,7 +227,10 @@ BI.BubblesController = BI.inherit(BI.Controller, { }); this.set(name, this.storeBubbles[name]["bottom"]); var position = this._getBottomPosition(name, context, offsetStyle); - this.get(name).element.css({left: position.left + adjustXOffset, top: position.top + adjustYOffset}); + this.get(name).element.css({ + left: position.left + adjustXOffset, + top: position.top + adjustYOffset + }); } } }