fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

DESIGN-4069 fix: 按钮增加闭包

es6
treecat 3 years ago
parent
a36557e75d
commit
ddd8fcf5d6
2 changed files with 212 additions and 181 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. 28
      demo/js/base/button/demo.button.js
  2. 363
      src/base/single/button/buttons/button.js

28
demo/js/base/button/demo.button.js
Unescape View File

@ -213,6 +213,34 @@ Demo.Button = BI.inherit(BI.Widget, {
}, },
height: 30 height: 30
} }
}, {
el: {
type: "bi.button",
text: "图标在上面的按钮",
iconCls: "close-font",
iconPosition: "top"
}
}, {
el: {
type: "bi.button",
text: "图标在下面的按钮",
iconCls: "close-font",
iconPosition: "bottom"
}
}, {
el: {
type: "bi.button",
text: "图标在左边的按钮",
iconCls: "close-font",
iconPosition: "left"
}
}, {
el: {
type: "bi.button",
text: "图标在右边的按钮",
iconCls: "close-font",
iconPosition: "right"
}
}]; }];
// BI.each(items, function (i, item) { // BI.each(items, function (i, item) {
// item.el.handler = function () { // item.el.handler = function () {

363
src/base/single/button/buttons/button.js
Unescape View File

@ -1,201 +1,204 @@
function isVertical(position) { (function () {
return position === "top" || position === "bottom"; function isVertical(position) {
} return position === "top" || position === "bottom";
}
/**
* 文字类型的按钮
* @class BI.Button
* @extends BI.BasicButton
*
* @cfg {JSON} options 配置属性
* @cfg {'common'/'success'/'warning'/'ignore'} [options.level='common'] 按钮类型，用不同颜色强调不同的场景
*/
BI.Button = BI.inherit(BI.BasicButton, {
_const: { /**
iconWidth: 16 * 文字类型的按钮
}, * @class BI.Button
* @extends BI.BasicButton
*
* @cfg {JSON} options 配置属性
* @cfg {'common'/'success'/'warning'/'ignore'} [options.level='common'] 按钮类型，用不同颜色强调不同的场景
*/
BI.Button = BI.inherit(BI.BasicButton, {
_defaultConfig: function (props) { _const: {
var conf = BI.Button.superclass._defaultConfig.apply(this, arguments); iconWidth: 16
},
_defaultConfig: function (props) {
var conf = BI.Button.superclass._defaultConfig.apply(this, arguments);
return BI.extend(conf, { return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""), baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""),
attributes: { attributes: {
tabIndex: 1 tabIndex: 1
}, },
minWidth: (props.block === true || props.clear === true) ? 0 : 80, minWidth: (props.block === true || props.clear === true) ? 0 : 80,
// 44 = 垂直间距 6 + 边框 2 + 图标 16 + 图标和文字间隔 8 + 文字 12 // 44 = 垂直间距 6 + 边框 2 + 图标 16 + 图标和文字间隔 8 + 文字 12
height: isVertical(props.iconPosition) ? 44 + ((props.iconGap || 8) - 8) : 24, height: isVertical(props.iconPosition) ? 44 + ((props.iconGap || 8) - 8) : 24,
shadow: props.clear !== true, shadow: props.clear !== true,
isShadowShowingOnSelected: true, isShadowShowingOnSelected: true,
readonly: true, readonly: true,
iconCls: "", iconCls: "",
level: "common", level: "common",
block: false, // 是否块状显示，即不显示边框，没有最小宽度的限制 block: false, // 是否块状显示，即不显示边框，没有最小宽度的限制
clear: false, // 是否去掉边框和背景 clear: false, // 是否去掉边框和背景
ghost: false, // 是否幽灵显示, 即正常状态无背景 ghost: false, // 是否幽灵显示, 即正常状态无背景
textAlign: "center", textAlign: "center",
whiteSpace: "nowrap", whiteSpace: "nowrap",
textWidth: null, textWidth: null,
textHeight: null, textHeight: null,
hgap: props.clear ? 0 : 10, hgap: props.clear ? 0 : 10,
vgap: 0, vgap: 0,
tgap: 0, tgap: 0,
bgap: 0, bgap: 0,
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
iconGap: 4, iconGap: 4,
iconPosition: "left", iconPosition: "left",
iconSize: props.iconSize || 12 iconSize: props.iconSize
}); });
}, },
render: function () { render: function () {
var o = this.options, self = this; var o = this.options;
// 由于button默认情况下有个边框，所以要主动算行高 // 由于button默认情况下有个边框，所以要主动算行高
var lineHeight, textHeight = o.textHeight; var lineHeight, textHeight = o.textHeight;
if (BI.isNumber(o.height)) { if (BI.isNumber(o.height)) {
if(!isVertical(o.iconPosition)) { if (!isVertical(o.iconPosition)) {
if (o.clear || o.block) { if (o.clear || o.block) {
lineHeight = o.height; lineHeight = o.height;
} else {
lineHeight = o.height - 2;
}
} else { } else {
lineHeight = o.height - 2; lineHeight = textHeight;
} }
} else {
lineHeight = textHeight;
} }
} if (!textHeight) {
if (!textHeight) { if (o.whiteSpace === "nowrap") {
if (o.whiteSpace === "nowrap") { textHeight = lineHeight;
textHeight = lineHeight; }
} }
} if (BI.isKey(o.iconCls)) {
if (BI.isKey(o.iconCls)) { var iconCss = {};
this.icon = BI.createWidget({ if (o.iconSize) {
type: "bi.icon_label", iconCss.fontSize = o.iconSize / BI.pixRatio + BI.pixUnit;
cls: o.iconCls,
width: o.iconWidth,
height: o.iconHeight,
lineHeight: o.iconHeight,
iconWidth: o.iconWidth,
iconHeight: o.iconHeight,
css: {
fontSize: o.iconSize + "px"
} }
}); this.icon = BI.createWidget({
this.text = BI.createWidget({ type: "bi.icon_label",
type: "bi.label", cls: o.iconCls,
text: o.text, width: o.iconWidth,
textWidth: BI.isNotNull(o.textWidth) ? o.textWidth - this._const.iconWidth : null, height: o.iconHeight,
textHeight: textHeight, lineHeight: o.iconHeight,
height: lineHeight, iconWidth: o.iconSize,
value: o.value iconHeight: o.iconSize,
}); css: iconCss
var layoutType = "bi.horizontal"; });
var gapContainer = { this.text = BI.createWidget({
lgap: o.iconPosition === "left" && o.text ? o.iconGap : 0, type: "bi.label",
rgap: o.iconPosition === "right" ? o.iconGap : 0, text: o.text,
tgap: o.iconPosition === "top" ? o.iconGap : 0, textWidth: BI.isNotNull(o.textWidth) ? o.textWidth - this._const.iconWidth : null,
bgap: o.iconPosition === "bottom" ? o.iconGap : 0 textHeight: textHeight,
}; height: lineHeight,
var items = [this.icon, BI.extend({el: this.text}, gapContainer)]; value: o.value
if (isVertical(o.iconPosition)) { });
layoutType = "bi.vertical"; var layoutType = "bi.horizontal";
var gapContainer = {
lgap: o.iconPosition === "left" && o.text ? o.iconGap : 0,
rgap: o.iconPosition === "right" ? o.iconGap : 0,
tgap: o.iconPosition === "top" ? o.iconGap : 0,
bgap: o.iconPosition === "bottom" ? o.iconGap : 0
};
var items = [this.icon, BI.extend({el: this.text}, gapContainer)];
if (isVertical(o.iconPosition)) {
layoutType = "bi.vertical";
}
if (o.iconPosition === "right" || o.iconPosition === "bottom") {
items = [BI.extend({el: this.text}, gapContainer), this.icon];
}
BI.createWidget({
type: "bi.center_adapt",
element: this,
hgap: o.hgap,
vgap: o.vgap,
items: [{
type: layoutType,
horizontalAlign: "center",
verticalAlign: "middle",
items: items
}]
});
} else {
this.text = BI.createWidget({
type: "bi.label",
height: o.height,
textAlign: o.textAlign,
whiteSpace: o.whiteSpace,
textWidth: o.textWidth,
textHeight: textHeight,
hgap: o.hgap,
vgap: o.vgap,
tgap: o.tgap,
bgap: o.bgap,
lgap: o.lgap,
rgap: o.rgap,
element: this,
text: o.text,
value: o.value
});
} }
if (o.iconPosition === "right" || o.iconPosition === "bottom") { if (o.block === true) {
items = [BI.extend({el: this.text}, gapContainer), this.icon]; this.element.addClass("block");
} }
BI.createWidget({ if (o.clear === true) {
type: "bi.center_adapt", this.element.addClass("clear");
element: this, }
hgap: o.hgap, if (o.ghost === true) {
vgap: o.vgap, this.element.addClass("ghost");
items: [{ }
type: layoutType, if (o.minWidth > 0) {
horizontalAlign: "center", this.element.css({"min-width": o.minWidth / BI.pixRatio + BI.pixUnit});
verticalAlign: "middle", }
items: items },
}]
});
} else {
this.text = BI.createWidget({
type: "bi.label",
height: o.height,
textAlign: o.textAlign,
whiteSpace: o.whiteSpace,
textWidth: o.textWidth,
textHeight: textHeight,
hgap: o.hgap,
vgap: o.vgap,
tgap: o.tgap,
bgap: o.bgap,
lgap: o.lgap,
rgap: o.rgap,
element: this,
text: o.text,
value: o.value
});
}
if (o.block === true) {
this.element.addClass("block");
}
if (o.clear === true) {
this.element.addClass("clear");
}
if (o.ghost === true) {
this.element.addClass("ghost");
}
if (o.minWidth > 0) {
this.element.css({"min-width": o.minWidth / BI.pixRatio + BI.pixUnit});
}
},
doClick: function () { doClick: function () {
BI.Button.superclass.doClick.apply(this, arguments); BI.Button.superclass.doClick.apply(this, arguments);
if (this.isValid()) { if (this.isValid()) {
this.fireEvent(BI.Button.EVENT_CHANGE, this); this.fireEvent(BI.Button.EVENT_CHANGE, this);
} }
}, },
_setEnable: function (enable) { _setEnable: function (enable) {
BI.Button.superclass._setEnable.apply(this, arguments); BI.Button.superclass._setEnable.apply(this, arguments);
if (enable === true) { if (enable === true) {
this.element.attr("tabIndex", 1); this.element.attr("tabIndex", 1);
} else if (enable === false) { } else if (enable === false) {
this.element.removeAttr("tabIndex"); this.element.removeAttr("tabIndex");
} }
}, },
setText: function (text) { setText: function (text) {
BI.Button.superclass.setText.apply(this, arguments); BI.Button.superclass.setText.apply(this, arguments);
this.text.setText(text); this.text.setText(text);
}, },
setValue: function (text) { setValue: function (text) {
BI.Button.superclass.setValue.apply(this, arguments); BI.Button.superclass.setValue.apply(this, arguments);
if (!this.isReadOnly()) { if (!this.isReadOnly()) {
this.text.setValue(text); this.text.setValue(text);
} }
}, },
doRedMark: function () { doRedMark: function () {
this.text.doRedMark.apply(this.text, arguments); this.text.doRedMark.apply(this.text, arguments);
}, },
unRedMark: function () { unRedMark: function () {
this.text.unRedMark.apply(this.text, arguments); this.text.unRedMark.apply(this.text, arguments);
}, },
doHighLight: function () { doHighLight: function () {
this.text.doHighLight.apply(this.text, arguments); this.text.doHighLight.apply(this.text, arguments);
}, },
unHighLight: function () { unHighLight: function () {
this.text.unHighLight.apply(this.text, arguments); this.text.unHighLight.apply(this.text, arguments);
} }
}); });
BI.shortcut("bi.button", BI.Button); BI.shortcut("bi.button", BI.Button);
BI.Button.EVENT_CHANGE = "EVENT_CHANGE"; BI.Button.EVENT_CHANGE = "EVENT_CHANGE";
}());

Write Preview
Loading…
Cancel
Save