bubblecombo去蓝线画三角

demo/js/case/combo/demo.bubble_combo.js

@@ -49,17 +49,70 @@ Demo.Func = BI.inherit(BI.Widget, {
                 }
             }]
         });
+
+        var combo3 = BI.createWidget({
+            type: "bi.bubble_combo",
+            el: {
+                type: "bi.button",
+                text: "测试",
+                height: 25
+            },
+            popup: {
+                type: "bi.text_bubble_bar_popup_view",
+                text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字",
+                ref: function () {
+                    self.popup = this;
+                }
+            },
+            listeners: [{
+                eventName: BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW,
+                action: function () {
+                    self.popup.populate((count++) % 2 === 1 ? "我的文字变少了" : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字");
+                }
+            }]
+        });
+
+        var combo4 = BI.createWidget({
+            type: "bi.bubble_combo",
+            el: {
+                type: "bi.button",
+                text: "测试",
+                height: 25
+            },
+            popup: {
+                type: "bi.text_bubble_bar_popup_view",
+                text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字",
+                ref: function () {
+                    self.popup = this;
+                }
+            },
+            listeners: [{
+                eventName: BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW,
+                action: function () {
+                    self.popup.populate((count++) % 2 === 1 ? "我的文字变少了" : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字");
+                }
+            }]
+        });
+
         BI.createWidget({
             type: "bi.absolute",
             element: this,
             items: [{
                 el: combo1,
-                left: 100,
-                top: 100
+                left: 10,
+                top: 10
             }, {
                 el: combo2,
-                left: 100,
-                bottom: 100
+                left: 10,
+                bottom: 10
+            }, {
+                el: combo3,
+                right: 10,
+                bottom: 10
+            }, {
+                el: combo4,
+                right: 10,
+                top: 10
             }]
         });
     }

dist/base.css

@@ -73,73 +73,219 @@
 }
 .bi-bubble-combo .button-combo-triangle-wrapper {
   position: fixed !important;
+  z-index: 10000000;
 }
 .bi-bubble-combo .bubble-combo-triangle-left {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-left: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-left:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-left:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-right {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-right: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 6px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-right:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-right:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-top {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-top: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-top:after {
+  position: absolute;
+  right: 1px;
+  top: 0px;
+  border-top: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-top:before {
+  position: absolute;
+  border-top: 7px solid #cccccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-bottom {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 5px;
+  border-bottom: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 7px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .button-combo-triangle-wrapper {
   position: fixed !important;
+  z-index: 10000000;
 }
 .bi-bubble-combo .bubble-combo-triangle-left {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-left: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-left:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-left:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-right {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-right: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 6px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-right:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-right:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-top {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-top: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-top:after {
+  position: absolute;
+  right: 1px;
+  top: 0px;
+  border-top: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-top:before {
+  position: absolute;
+  border-top: 7px solid #cccccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-bottom {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 5px;
+  border-bottom: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 7px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 
 .bi-combo.bi-combo-popup {

dist/bundle.css

@@ -2120,73 +2120,219 @@ textarea {
 }
 .bi-bubble-combo .button-combo-triangle-wrapper {
   position: fixed !important;
+  z-index: 10000000;
 }
 .bi-bubble-combo .bubble-combo-triangle-left {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-left: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-left:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-left:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-right {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-right: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 6px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-right:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-right:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-top {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-top: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-top:after {
+  position: absolute;
+  right: 1px;
+  top: 0px;
+  border-top: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-top:before {
+  position: absolute;
+  border-top: 7px solid #cccccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-bottom {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 5px;
+  border-bottom: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 7px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .button-combo-triangle-wrapper {
   position: fixed !important;
+  z-index: 10000000;
 }
 .bi-bubble-combo .bubble-combo-triangle-left {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-left: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-left:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-left:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-right {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-right: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 6px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-right:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-right:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-top {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-top: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-top:after {
+  position: absolute;
+  right: 1px;
+  top: 0px;
+  border-top: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-top:before {
+  position: absolute;
+  border-top: 7px solid #cccccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-bottom {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 5px;
+  border-bottom: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 7px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 
 .bi-combo.bi-combo-popup {

dist/bundle.js

@@ -67187,22 +67187,22 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
             case "left,top":
             case "left,bottom":
                 this._createLeftTriangle();
-                this.combo.getView().showLine("right");
+                //this.combo.getView().showLine("right");
                 break;
             case "right,top":
             case "right,bottom":
                 this._createRightTriangle();
-                this.combo.getView().showLine("left");
+                //this.combo.getView().showLine("left");
                 break;
             case "top,left":
             case "top,right":
                 this._createTopTriangle();
-                this.combo.getView().showLine("bottom");
+                //this.combo.getView().showLine("bottom");
                 break;
             case "bottom,left":
             case "bottom,right":
                 this._createBottomTriangle();
-                this.combo.getView().showLine("top");
+                //this.combo.getView().showLine("top");
                 break;
         }
     },
@@ -67210,7 +67210,7 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
     _hideTriangle: function () {
         this.triangle && this.triangle.destroy();
         this.triangle = null;
-        this.combo.getView() && this.combo.getView().hideLine();
+        //this.combo.getView() && this.combo.getView().hideLine();
     },
 
     hideView: function () {

dist/case.js

@@ -4908,22 +4908,22 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
             case "left,top":
             case "left,bottom":
                 this._createLeftTriangle();
-                this.combo.getView().showLine("right");
+                //this.combo.getView().showLine("right");
                 break;
             case "right,top":
             case "right,bottom":
                 this._createRightTriangle();
-                this.combo.getView().showLine("left");
+                //this.combo.getView().showLine("left");
                 break;
             case "top,left":
             case "top,right":
                 this._createTopTriangle();
-                this.combo.getView().showLine("bottom");
+                //this.combo.getView().showLine("bottom");
                 break;
             case "bottom,left":
             case "bottom,right":
                 this._createBottomTriangle();
-                this.combo.getView().showLine("top");
+                //this.combo.getView().showLine("top");
                 break;
         }
     },
@@ -4931,7 +4931,7 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
     _hideTriangle: function () {
         this.triangle && this.triangle.destroy();
         this.triangle = null;
-        this.combo.getView() && this.combo.getView().hideLine();
+        //this.combo.getView() && this.combo.getView().hideLine();
     },
 
     hideView: function () {

dist/demo.js

@@ -1823,17 +1823,70 @@ BI.shortcut("demo.tree_view", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
                 }
             }]
         });
+
+        var combo3 = BI.createWidget({
+            type: "bi.bubble_combo",
+            el: {
+                type: "bi.button",
+                text: "测试",
+                height: 25
+            },
+            popup: {
+                type: "bi.text_bubble_bar_popup_view",
+                text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字",
+                ref: function () {
+                    self.popup = this;
+                }
+            },
+            listeners: [{
+                eventName: BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW,
+                action: function () {
+                    self.popup.populate((count++) % 2 === 1 ? "我的文字变少了" : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字");
+                }
+            }]
+        });
+
+        var combo4 = BI.createWidget({
+            type: "bi.bubble_combo",
+            el: {
+                type: "bi.button",
+                text: "测试",
+                height: 25
+            },
+            popup: {
+                type: "bi.text_bubble_bar_popup_view",
+                text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字",
+                ref: function () {
+                    self.popup = this;
+                }
+            },
+            listeners: [{
+                eventName: BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW,
+                action: function () {
+                    self.popup.populate((count++) % 2 === 1 ? "我的文字变少了" : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字");
+                }
+            }]
+        });
+
         BI.createWidget({
             type: "bi.absolute",
             element: this,
             items: [{
                 el: combo1,
-                left: 100,
-                top: 100
+                left: 10,
+                top: 10
             }, {
                 el: combo2,
-                left: 100,
-                bottom: 100
+                left: 10,
+                bottom: 10
+            }, {
+                el: combo3,
+                right: 10,
+                bottom: 10
+            }, {
+                el: combo4,
+                right: 10,
+                top: 10
             }]
         });
     }

dist/fineui.css

@@ -2120,73 +2120,219 @@ textarea {
 }
 .bi-bubble-combo .button-combo-triangle-wrapper {
   position: fixed !important;
+  z-index: 10000000;
 }
 .bi-bubble-combo .bubble-combo-triangle-left {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-left: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-left:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-left:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-right {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-right: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 6px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-right:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-right:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-top {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-top: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-top:after {
+  position: absolute;
+  right: 1px;
+  top: 0px;
+  border-top: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-top:before {
+  position: absolute;
+  border-top: 7px solid #cccccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-bottom {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 5px;
+  border-bottom: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 7px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .button-combo-triangle-wrapper {
   position: fixed !important;
+  z-index: 10000000;
 }
 .bi-bubble-combo .bubble-combo-triangle-left {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-left: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-left:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-left:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-right {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-right: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 6px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-right:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-right:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-top {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-top: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-top:after {
+  position: absolute;
+  right: 1px;
+  top: 0px;
+  border-top: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-top:before {
+  position: absolute;
+  border-top: 7px solid #cccccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-bottom {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 5px;
+  border-bottom: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 7px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 
 .bi-combo.bi-combo-popup {

dist/fineui.js

@@ -68951,22 +68951,22 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
             case "left,top":
             case "left,bottom":
                 this._createLeftTriangle();
-                this.combo.getView().showLine("right");
+                //this.combo.getView().showLine("right");
                 break;
             case "right,top":
             case "right,bottom":
                 this._createRightTriangle();
-                this.combo.getView().showLine("left");
+                //this.combo.getView().showLine("left");
                 break;
             case "top,left":
             case "top,right":
                 this._createTopTriangle();
-                this.combo.getView().showLine("bottom");
+                //this.combo.getView().showLine("bottom");
                 break;
             case "bottom,left":
             case "bottom,right":
                 this._createBottomTriangle();
-                this.combo.getView().showLine("top");
+                //this.combo.getView().showLine("top");
                 break;
         }
     },
@@ -68974,7 +68974,7 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
     _hideTriangle: function () {
         this.triangle && this.triangle.destroy();
         this.triangle = null;
-        this.combo.getView() && this.combo.getView().hideLine();
+        //this.combo.getView() && this.combo.getView().hideLine();
     },
 
     hideView: function () {

src/case/combo/bubblecombo/combo.bubble.js

@@ -168,22 +168,22 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
             case "left,top":
             case "left,bottom":
                 this._createLeftTriangle();
-                this.combo.getView().showLine("right");
+                //this.combo.getView().showLine("right");
                 break;
             case "right,top":
             case "right,bottom":
                 this._createRightTriangle();
-                this.combo.getView().showLine("left");
+                //this.combo.getView().showLine("left");
                 break;
             case "top,left":
             case "top,right":
                 this._createTopTriangle();
-                this.combo.getView().showLine("bottom");
+                //this.combo.getView().showLine("bottom");
                 break;
             case "bottom,left":
             case "bottom,right":
                 this._createBottomTriangle();
-                this.combo.getView().showLine("top");
+                //this.combo.getView().showLine("top");
                 break;
         }
     },
@@ -191,7 +191,7 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
     _hideTriangle: function () {
         this.triangle && this.triangle.destroy();
         this.triangle = null;
-        this.combo.getView() && this.combo.getView().hideLine();
+        //this.combo.getView() && this.combo.getView().hideLine();
     },
 
     hideView: function () {

src/css/base/combo/combo.bubble.css

@@ -1,35 +1,108 @@
 .bi-bubble-combo .button-combo-triangle-wrapper {
   position: fixed !important;
+  z-index: 10000000;
 }
 .bi-bubble-combo .bubble-combo-triangle-left {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-left: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-left:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-left:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-right {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-right: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 6px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-right:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-right:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-top {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-top: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-top:after {
+  position: absolute;
+  right: 1px;
+  top: 0px;
+  border-top: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-top:before {
+  position: absolute;
+  border-top: 7px solid #cccccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-bottom {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 5px;
+  border-bottom: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 7px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }

src/css/base/combo/combo.css

@@ -1,37 +1,110 @@
 .bi-bubble-combo .button-combo-triangle-wrapper {
   position: fixed !important;
+  z-index: 10000000;
 }
 .bi-bubble-combo .bubble-combo-triangle-left {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-left: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-left:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-left:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-right {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-right: 6px solid #3f8ce8;
-  border-bottom: 6px solid transparent;
+  position: absolute;
+  width: 16px;
+  height: 6px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.bi-bubble-combo .bubble-combo-triangle-right:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 10px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-right:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 9px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-top {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-top: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-top:after {
+  position: absolute;
+  right: 1px;
+  top: 0px;
+  border-top: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-top:before {
+  position: absolute;
+  border-top: 7px solid #cccccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
 }
 .bi-bubble-combo .bubble-combo-triangle-bottom {
   z-index: 1;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #3f8ce8;
+  position: absolute;
+  width: 16px;
+  height: 5px;
+  border-bottom: 1px solid #ffffff;
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-bottom: 7px solid #ccc;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  content: "";
+}
+.bi-bubble-combo .bubble-combo-triangle-bottom:after {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  bottom: 0px;
+  border-bottom: 6px solid #ffffff;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
 }
 
 .bi-combo.bi-combo-popup {

src/less/base/combo/combo.bubble.less

@@ -3,21 +3,26 @@
 .bi-bubble-combo {
   & .button-combo-triangle-wrapper {
     position: fixed !important;
+    .z-index-layer(@zIndex-popup);
   }
   & .bubble-combo-triangle-left {
     z-index: 1;
-    .solid-triangle-right(@color-bi-background-highlight);
+    .triangle-right();
+    //.solid-triangle-right(@color-bi-background-highlight);
   }
   & .bubble-combo-triangle-right {
     z-index: 1;
-    .solid-triangle-left(@color-bi-background-highlight);
+    .triangle-left();
+    //.solid-triangle-left(@color-bi-background-highlight);
   }
   & .bubble-combo-triangle-top {
     z-index: 1;
-    .solid-triangle-down(@color-bi-background-highlight);
+    .triangle-bottom();
+    //.solid-triangle-down(@color-bi-background-highlight);
   }
   & .bubble-combo-triangle-bottom {
     z-index: 1;
-    .solid-triangle-up(@color-bi-background-highlight);
+    .triangle-top();
+    //.solid-triangle-up(@color-bi-background-highlight);
   }
 }

src/less/visual.less

@@ -176,15 +176,15 @@
 .triangle-top() {
   position: absolute;
   width: 16px;
-  height: 10px;
-  border-bottom: 1px solid #f5f5f5;
+  height: 5px;
+  border-bottom: 1px solid #ffffff;
 
   &:before {
     position: absolute;
     top: 0px;
     right: 0px;
     bottom: 0px;
-    border-bottom: 10px solid #ccc;
+    border-bottom: 7px solid #ccc;
     border-left: 8px solid transparent;
     border-right: 8px solid transparent;
     content: "";
@@ -194,7 +194,7 @@
     right: 1px;
     top: 1px;
     bottom: 0px;
-    border-bottom: 9px solid #f5f5f5;
+    border-bottom: 6px solid #ffffff;
     border-left: 7px solid transparent;
     border-right: 7px solid transparent;
     content: "";
@@ -205,23 +205,79 @@
   position: absolute;
   width: 16px;
   height: 10px;
-  border-top: 1px solid #f5f5f5;
+  border-top: 1px solid #ffffff;
 
   &:after {
     position: absolute;
     right: 1px;
-    top: -1px;
-    border-top: 9px solid #f5f5f5;
+    top: 0px;
+    border-top: 6px solid #ffffff;
     border-left: 7px solid transparent;
     border-right: 7px solid transparent;
     content: "";
   }
   &:before {
     position: absolute;
-    border-top: 10px solid #cccccc;
+    border-top: 7px solid #cccccc;
     border-left: 8px solid transparent;
     border-right: 8px solid transparent;
     content: "";
   }
 
 }
+
+.triangle-left() {
+  position: absolute;
+  width: 16px;
+  height: 6px;
+  border-bottom: 1px solid #f5f5f5;
+
+  &:before {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    border-bottom: 10px solid #ccc;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    content: "";
+  }
+  &:after {
+    position: absolute;
+    right: 1px;
+    top: 1px;
+    bottom: 0px;
+    border-bottom: 9px solid #ffffff;
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
+    content: "";
+  }
+}
+
+.triangle-right() {
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  border-bottom: 1px solid #f5f5f5;
+
+  &:before {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    border-bottom: 10px solid #ccc;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    content: "";
+  }
+  &:after {
+    position: absolute;
+    right: 1px;
+    top: 1px;
+    bottom: 0px;
+    border-bottom: 9px solid #ffffff;
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
+    content: "";
+  }
+}