diff --git a/demo/js/base/button/demo.button.js b/demo/js/base/button/demo.button.js index 0aa54de07..56a38620d 100644 --- a/demo/js/base/button/demo.button.js +++ b/demo/js/base/button/demo.button.js @@ -213,6 +213,34 @@ Demo.Button = BI.inherit(BI.Widget, { }, 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) { // item.el.handler = function () { @@ -228,4 +256,4 @@ Demo.Button = BI.inherit(BI.Widget, { }; } }); -BI.shortcut("demo.button", Demo.Button); \ No newline at end of file +BI.shortcut("demo.button", Demo.Button); diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js index 4f6a144de..63e78faab 100644 --- a/src/base/single/button/buttons/button.js +++ b/src/base/single/button/buttons/button.js @@ -1,201 +1,204 @@ -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, { +(function () { + function isVertical(position) { + return position === "top" || position === "bottom"; + } - _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) { - var conf = BI.Button.superclass._defaultConfig.apply(this, arguments); + _const: { + iconWidth: 16 + }, + _defaultConfig: function (props) { + var conf = BI.Button.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""), - attributes: { - tabIndex: 1 - }, - minWidth: (props.block === true || props.clear === true) ? 0 : 80, - // 44 = 垂直间距 6 + 边框 2 + 图标 16 + 图标和文字间隔 8 + 文字 12 - height: isVertical(props.iconPosition) ? 44 + ((props.iconGap || 8) - 8) : 24, - shadow: props.clear !== true, - isShadowShowingOnSelected: true, - readonly: true, - iconCls: "", - level: "common", - block: false, // 是否块状显示，即不显示边框，没有最小宽度的限制 - clear: false, // 是否去掉边框和背景 - ghost: false, // 是否幽灵显示, 即正常状态无背景 - textAlign: "center", - whiteSpace: "nowrap", - textWidth: null, - textHeight: null, - hgap: props.clear ? 0 : 10, - vgap: 0, - tgap: 0, - bgap: 0, - lgap: 0, - rgap: 0, - iconGap: 4, - iconPosition: "left", - iconSize: props.iconSize || 12 - }); - }, + return BI.extend(conf, { + baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""), + attributes: { + tabIndex: 1 + }, + minWidth: (props.block === true || props.clear === true) ? 0 : 80, + // 44 = 垂直间距 6 + 边框 2 + 图标 16 + 图标和文字间隔 8 + 文字 12 + height: isVertical(props.iconPosition) ? 44 + ((props.iconGap || 8) - 8) : 24, + shadow: props.clear !== true, + isShadowShowingOnSelected: true, + readonly: true, + iconCls: "", + level: "common", + block: false, // 是否块状显示，即不显示边框，没有最小宽度的限制 + clear: false, // 是否去掉边框和背景 + ghost: false, // 是否幽灵显示, 即正常状态无背景 + textAlign: "center", + whiteSpace: "nowrap", + textWidth: null, + textHeight: null, + hgap: props.clear ? 0 : 10, + vgap: 0, + tgap: 0, + bgap: 0, + lgap: 0, + rgap: 0, + iconGap: 4, + iconPosition: "left", + iconSize: props.iconSize + }); + }, - render: function () { - var o = this.options, self = this; + render: function () { + var o = this.options; - // 由于button默认情况下有个边框，所以要主动算行高 - var lineHeight, textHeight = o.textHeight; - if (BI.isNumber(o.height)) { - if(!isVertical(o.iconPosition)) { - if (o.clear || o.block) { - lineHeight = o.height; + // 由于button默认情况下有个边框，所以要主动算行高 + var lineHeight, textHeight = o.textHeight; + if (BI.isNumber(o.height)) { + if (!isVertical(o.iconPosition)) { + if (o.clear || o.block) { + lineHeight = o.height; + } else { + lineHeight = o.height - 2; + } } else { - lineHeight = o.height - 2; + lineHeight = textHeight; } - } else { - lineHeight = textHeight; } - } - if (!textHeight) { - if (o.whiteSpace === "nowrap") { - textHeight = lineHeight; + if (!textHeight) { + if (o.whiteSpace === "nowrap") { + textHeight = lineHeight; + } } - } - if (BI.isKey(o.iconCls)) { - this.icon = BI.createWidget({ - type: "bi.icon_label", - cls: o.iconCls, - width: o.iconWidth, - height: o.iconHeight, - lineHeight: o.iconHeight, - iconWidth: o.iconWidth, - iconHeight: o.iconHeight, - css: { - fontSize: o.iconSize + "px" + if (BI.isKey(o.iconCls)) { + var iconCss = {}; + if (o.iconSize) { + iconCss.fontSize = o.iconSize / BI.pixRatio + BI.pixUnit; } - }); - this.text = BI.createWidget({ - type: "bi.label", - text: o.text, - textWidth: BI.isNotNull(o.textWidth) ? o.textWidth - this._const.iconWidth : null, - textHeight: textHeight, - height: lineHeight, - value: o.value - }); - 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"; + this.icon = BI.createWidget({ + type: "bi.icon_label", + cls: o.iconCls, + width: o.iconWidth, + height: o.iconHeight, + lineHeight: o.iconHeight, + iconWidth: o.iconSize, + iconHeight: o.iconSize, + css: iconCss + }); + this.text = BI.createWidget({ + type: "bi.label", + text: o.text, + textWidth: BI.isNotNull(o.textWidth) ? o.textWidth - this._const.iconWidth : null, + textHeight: textHeight, + height: lineHeight, + value: o.value + }); + 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") { - items = [BI.extend({el: this.text}, gapContainer), this.icon]; + if (o.block === true) { + this.element.addClass("block"); } - 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.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}); - } - }, + 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 () { - BI.Button.superclass.doClick.apply(this, arguments); - if (this.isValid()) { - this.fireEvent(BI.Button.EVENT_CHANGE, this); - } - }, + doClick: function () { + BI.Button.superclass.doClick.apply(this, arguments); + if (this.isValid()) { + this.fireEvent(BI.Button.EVENT_CHANGE, this); + } + }, - _setEnable: function (enable) { - BI.Button.superclass._setEnable.apply(this, arguments); - if (enable === true) { - this.element.attr("tabIndex", 1); - } else if (enable === false) { - this.element.removeAttr("tabIndex"); - } - }, + _setEnable: function (enable) { + BI.Button.superclass._setEnable.apply(this, arguments); + if (enable === true) { + this.element.attr("tabIndex", 1); + } else if (enable === false) { + this.element.removeAttr("tabIndex"); + } + }, - setText: function (text) { - BI.Button.superclass.setText.apply(this, arguments); - this.text.setText(text); - }, + setText: function (text) { + BI.Button.superclass.setText.apply(this, arguments); + this.text.setText(text); + }, - setValue: function (text) { - BI.Button.superclass.setValue.apply(this, arguments); - if (!this.isReadOnly()) { - this.text.setValue(text); - } - }, + setValue: function (text) { + BI.Button.superclass.setValue.apply(this, arguments); + if (!this.isReadOnly()) { + this.text.setValue(text); + } + }, - doRedMark: function () { - this.text.doRedMark.apply(this.text, arguments); - }, + doRedMark: function () { + this.text.doRedMark.apply(this.text, arguments); + }, - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, + unRedMark: function () { + this.text.unRedMark.apply(this.text, arguments); + }, - doHighLight: function () { - this.text.doHighLight.apply(this.text, arguments); - }, + doHighLight: function () { + this.text.doHighLight.apply(this.text, arguments); + }, - unHighLight: function () { - this.text.unHighLight.apply(this.text, arguments); - } -}); -BI.shortcut("bi.button", BI.Button); -BI.Button.EVENT_CHANGE = "EVENT_CHANGE"; + unHighLight: function () { + this.text.unHighLight.apply(this.text, arguments); + } + }); + BI.shortcut("bi.button", BI.Button); + BI.Button.EVENT_CHANGE = "EVENT_CHANGE"; +}());