Browse Source

Merge pull request #258 in FUI/fineui from ~WINDY/fui:master to master

* commit '957d22d5fdc8a9a7dd80697b91328a71637ab0b9':
  bubblecombo去蓝线画三角
es6
guy 7 years ago
parent
commit
71bd89bd1f
  1. 61
      demo/js/case/combo/demo.bubble_combo.js
  2. 226
      dist/base.css
  3. 226
      dist/bundle.css
  4. 10
      dist/bundle.js
  5. 10
      dist/case.js
  6. 61
      dist/demo.js
  7. 226
      dist/fineui.css
  8. 10
      dist/fineui.js
  9. 10
      src/case/combo/bubblecombo/combo.bubble.js
  10. 113
      src/css/base/combo/combo.bubble.css
  11. 113
      src/css/base/combo/combo.css
  12. 13
      src/less/base/combo/combo.bubble.less
  13. 72
      src/less/visual.less

61
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({ BI.createWidget({
type: "bi.absolute", type: "bi.absolute",
element: this, element: this,
items: [{ items: [{
el: combo1, el: combo1,
left: 100, left: 10,
top: 100 top: 10
}, { }, {
el: combo2, el: combo2,
left: 100, left: 10,
bottom: 100 bottom: 10
}, {
el: combo3,
right: 10,
bottom: 10
}, {
el: combo4,
right: 10,
top: 10
}] }]
}); });
} }

226
dist/base.css vendored

@ -73,73 +73,219 @@
} }
.bi-bubble-combo .button-combo-triangle-wrapper { .bi-bubble-combo .button-combo-triangle-wrapper {
position: fixed !important; position: fixed !important;
z-index: 10000000;
} }
.bi-bubble-combo .bubble-combo-triangle-left { .bi-bubble-combo .bubble-combo-triangle-left {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-top: 6px solid transparent; height: 10px;
border-left: 6px solid #3f8ce8; border-bottom: 1px solid #f5f5f5;
border-bottom: 6px solid transparent; }
.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 { .bi-bubble-combo .bubble-combo-triangle-right {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-top: 6px solid transparent; height: 6px;
border-right: 6px solid #3f8ce8; border-bottom: 1px solid #f5f5f5;
border-bottom: 6px solid transparent; }
.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 { .bi-bubble-combo .bubble-combo-triangle-top {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-left: 6px solid transparent; height: 10px;
border-right: 6px solid transparent; border-top: 1px solid #ffffff;
border-top: 6px solid #3f8ce8; }
.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 { .bi-bubble-combo .bubble-combo-triangle-bottom {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-left: 6px solid transparent; height: 5px;
border-right: 6px solid transparent; border-bottom: 1px solid #ffffff;
border-bottom: 6px solid #3f8ce8; }
.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 { .bi-bubble-combo .button-combo-triangle-wrapper {
position: fixed !important; position: fixed !important;
z-index: 10000000;
} }
.bi-bubble-combo .bubble-combo-triangle-left { .bi-bubble-combo .bubble-combo-triangle-left {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-top: 6px solid transparent; height: 10px;
border-left: 6px solid #3f8ce8; border-bottom: 1px solid #f5f5f5;
border-bottom: 6px solid transparent; }
.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 { .bi-bubble-combo .bubble-combo-triangle-right {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-top: 6px solid transparent; height: 6px;
border-right: 6px solid #3f8ce8; border-bottom: 1px solid #f5f5f5;
border-bottom: 6px solid transparent; }
.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 { .bi-bubble-combo .bubble-combo-triangle-top {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-left: 6px solid transparent; height: 10px;
border-right: 6px solid transparent; border-top: 1px solid #ffffff;
border-top: 6px solid #3f8ce8; }
.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 { .bi-bubble-combo .bubble-combo-triangle-bottom {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-left: 6px solid transparent; height: 5px;
border-right: 6px solid transparent; border-bottom: 1px solid #ffffff;
border-bottom: 6px solid #3f8ce8; }
.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 { .bi-combo.bi-combo-popup {

226
dist/bundle.css vendored

@ -2120,73 +2120,219 @@ textarea {
} }
.bi-bubble-combo .button-combo-triangle-wrapper { .bi-bubble-combo .button-combo-triangle-wrapper {
position: fixed !important; position: fixed !important;
z-index: 10000000;
} }
.bi-bubble-combo .bubble-combo-triangle-left { .bi-bubble-combo .bubble-combo-triangle-left {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-top: 6px solid transparent; height: 10px;
border-left: 6px solid #3f8ce8; border-bottom: 1px solid #f5f5f5;
border-bottom: 6px solid transparent; }
.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 { .bi-bubble-combo .bubble-combo-triangle-right {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-top: 6px solid transparent; height: 6px;
border-right: 6px solid #3f8ce8; border-bottom: 1px solid #f5f5f5;
border-bottom: 6px solid transparent; }
.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 { .bi-bubble-combo .bubble-combo-triangle-top {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-left: 6px solid transparent; height: 10px;
border-right: 6px solid transparent; border-top: 1px solid #ffffff;
border-top: 6px solid #3f8ce8; }
.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 { .bi-bubble-combo .bubble-combo-triangle-bottom {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-left: 6px solid transparent; height: 5px;
border-right: 6px solid transparent; border-bottom: 1px solid #ffffff;
border-bottom: 6px solid #3f8ce8; }
.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 { .bi-bubble-combo .button-combo-triangle-wrapper {
position: fixed !important; position: fixed !important;
z-index: 10000000;
} }
.bi-bubble-combo .bubble-combo-triangle-left { .bi-bubble-combo .bubble-combo-triangle-left {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-top: 6px solid transparent; height: 10px;
border-left: 6px solid #3f8ce8; border-bottom: 1px solid #f5f5f5;
border-bottom: 6px solid transparent; }
.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 { .bi-bubble-combo .bubble-combo-triangle-right {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-top: 6px solid transparent; height: 6px;
border-right: 6px solid #3f8ce8; border-bottom: 1px solid #f5f5f5;
border-bottom: 6px solid transparent; }
.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 { .bi-bubble-combo .bubble-combo-triangle-top {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-left: 6px solid transparent; height: 10px;
border-right: 6px solid transparent; border-top: 1px solid #ffffff;
border-top: 6px solid #3f8ce8; }
.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 { .bi-bubble-combo .bubble-combo-triangle-bottom {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-left: 6px solid transparent; height: 5px;
border-right: 6px solid transparent; border-bottom: 1px solid #ffffff;
border-bottom: 6px solid #3f8ce8; }
.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 { .bi-combo.bi-combo-popup {

10
dist/bundle.js vendored

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

10
dist/case.js vendored

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

61
dist/demo.js vendored

@ -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({ BI.createWidget({
type: "bi.absolute", type: "bi.absolute",
element: this, element: this,
items: [{ items: [{
el: combo1, el: combo1,
left: 100, left: 10,
top: 100 top: 10
}, { }, {
el: combo2, el: combo2,
left: 100, left: 10,
bottom: 100 bottom: 10
}, {
el: combo3,
right: 10,
bottom: 10
}, {
el: combo4,
right: 10,
top: 10
}] }]
}); });
} }

226
dist/fineui.css vendored

@ -2120,73 +2120,219 @@ textarea {
} }
.bi-bubble-combo .button-combo-triangle-wrapper { .bi-bubble-combo .button-combo-triangle-wrapper {
position: fixed !important; position: fixed !important;
z-index: 10000000;
} }
.bi-bubble-combo .bubble-combo-triangle-left { .bi-bubble-combo .bubble-combo-triangle-left {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-top: 6px solid transparent; height: 10px;
border-left: 6px solid #3f8ce8; border-bottom: 1px solid #f5f5f5;
border-bottom: 6px solid transparent; }
.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 { .bi-bubble-combo .bubble-combo-triangle-right {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-top: 6px solid transparent; height: 6px;
border-right: 6px solid #3f8ce8; border-bottom: 1px solid #f5f5f5;
border-bottom: 6px solid transparent; }
.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 { .bi-bubble-combo .bubble-combo-triangle-top {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-left: 6px solid transparent; height: 10px;
border-right: 6px solid transparent; border-top: 1px solid #ffffff;
border-top: 6px solid #3f8ce8; }
.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 { .bi-bubble-combo .bubble-combo-triangle-bottom {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-left: 6px solid transparent; height: 5px;
border-right: 6px solid transparent; border-bottom: 1px solid #ffffff;
border-bottom: 6px solid #3f8ce8; }
.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 { .bi-bubble-combo .button-combo-triangle-wrapper {
position: fixed !important; position: fixed !important;
z-index: 10000000;
} }
.bi-bubble-combo .bubble-combo-triangle-left { .bi-bubble-combo .bubble-combo-triangle-left {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-top: 6px solid transparent; height: 10px;
border-left: 6px solid #3f8ce8; border-bottom: 1px solid #f5f5f5;
border-bottom: 6px solid transparent; }
.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 { .bi-bubble-combo .bubble-combo-triangle-right {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-top: 6px solid transparent; height: 6px;
border-right: 6px solid #3f8ce8; border-bottom: 1px solid #f5f5f5;
border-bottom: 6px solid transparent; }
.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 { .bi-bubble-combo .bubble-combo-triangle-top {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-left: 6px solid transparent; height: 10px;
border-right: 6px solid transparent; border-top: 1px solid #ffffff;
border-top: 6px solid #3f8ce8; }
.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 { .bi-bubble-combo .bubble-combo-triangle-bottom {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-left: 6px solid transparent; height: 5px;
border-right: 6px solid transparent; border-bottom: 1px solid #ffffff;
border-bottom: 6px solid #3f8ce8; }
.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 { .bi-combo.bi-combo-popup {

10
dist/fineui.js vendored

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

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

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

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

@ -1,35 +1,108 @@
.bi-bubble-combo .button-combo-triangle-wrapper { .bi-bubble-combo .button-combo-triangle-wrapper {
position: fixed !important; position: fixed !important;
z-index: 10000000;
} }
.bi-bubble-combo .bubble-combo-triangle-left { .bi-bubble-combo .bubble-combo-triangle-left {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-top: 6px solid transparent; height: 10px;
border-left: 6px solid #3f8ce8; border-bottom: 1px solid #f5f5f5;
border-bottom: 6px solid transparent; }
.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 { .bi-bubble-combo .bubble-combo-triangle-right {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-top: 6px solid transparent; height: 6px;
border-right: 6px solid #3f8ce8; border-bottom: 1px solid #f5f5f5;
border-bottom: 6px solid transparent; }
.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 { .bi-bubble-combo .bubble-combo-triangle-top {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-left: 6px solid transparent; height: 10px;
border-right: 6px solid transparent; border-top: 1px solid #ffffff;
border-top: 6px solid #3f8ce8; }
.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 { .bi-bubble-combo .bubble-combo-triangle-bottom {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-left: 6px solid transparent; height: 5px;
border-right: 6px solid transparent; border-bottom: 1px solid #ffffff;
border-bottom: 6px solid #3f8ce8; }
.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: "";
} }

113
src/css/base/combo/combo.css

@ -1,37 +1,110 @@
.bi-bubble-combo .button-combo-triangle-wrapper { .bi-bubble-combo .button-combo-triangle-wrapper {
position: fixed !important; position: fixed !important;
z-index: 10000000;
} }
.bi-bubble-combo .bubble-combo-triangle-left { .bi-bubble-combo .bubble-combo-triangle-left {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-top: 6px solid transparent; height: 10px;
border-left: 6px solid #3f8ce8; border-bottom: 1px solid #f5f5f5;
border-bottom: 6px solid transparent; }
.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 { .bi-bubble-combo .bubble-combo-triangle-right {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-top: 6px solid transparent; height: 6px;
border-right: 6px solid #3f8ce8; border-bottom: 1px solid #f5f5f5;
border-bottom: 6px solid transparent; }
.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 { .bi-bubble-combo .bubble-combo-triangle-top {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-left: 6px solid transparent; height: 10px;
border-right: 6px solid transparent; border-top: 1px solid #ffffff;
border-top: 6px solid #3f8ce8; }
.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 { .bi-bubble-combo .bubble-combo-triangle-bottom {
z-index: 1; z-index: 1;
width: 0; position: absolute;
height: 0; width: 16px;
border-left: 6px solid transparent; height: 5px;
border-right: 6px solid transparent; border-bottom: 1px solid #ffffff;
border-bottom: 6px solid #3f8ce8; }
.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 { .bi-combo.bi-combo-popup {

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

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

72
src/less/visual.less

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