caoww
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

* commit '957d22d5fdc8a9a7dd80697b91328a71637ab0b9':
  bubblecombo去蓝线画三角
es6
guy 7 years ago
parent
9873f481a3 957d22d5fd
commit
71bd89bd1f
13 changed files with 951 additions and 200 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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: "";
}
} }
Write Preview
Loading…
Cancel
Save