From 76cc0941c7b4729a1bd2870aeb83600133905401 Mon Sep 17 00:00:00 2001 From: dailer Date: Thu, 16 May 2019 09:22:37 +0800 Subject: [PATCH] =?UTF-8?q?KERNEL-547=20=20=20refactor:=20FineUI=E4=B8=ADl?= =?UTF-8?q?abel=E9=80=BB=E8=BE=91=E6=95=B4=E7=90=86,=E7=AE=80=E5=8C=96.?= =?UTF-8?q?=E6=9B=B4=E6=96=B0demo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/js/base/demo.label.scene.js | 590 ++++++++++++++++++ demo/js/config/base.js | 4 + demo/js/face.js | 6 - src/base/single/button/buttons/button.js | 2 - src/base/single/button/buttons/button.text.js | 2 - src/base/single/editor/editor.js | 1 - src/base/single/label/html.label.js | 250 +++----- src/base/single/label/label.js | 254 ++------ src/base/single/text.js | 6 +- src/widget/datetime/datetime.popup.js | 2 - src/widget/dynamicdate/dynamicdate.popup.js | 3 - .../dynamicdatetime/dynamicdatetime.popup.js | 3 - src/widget/time/datetime.popup.js | 3 - src/widget/year/popup.year.js | 3 - src/widget/yearmonth/popup.yearmonth.js | 3 - src/widget/yearquarter/popup.yearquarter.js | 3 - 16 files changed, 736 insertions(+), 399 deletions(-) create mode 100644 demo/js/base/demo.label.scene.js diff --git a/demo/js/base/demo.label.scene.js b/demo/js/base/demo.label.scene.js new file mode 100644 index 000000000..13f76850a --- /dev/null +++ b/demo/js/base/demo.label.scene.js @@ -0,0 +1,590 @@ +/** + * 整理所有label场景 + */ +Demo.LabelScene = BI.inherit(BI.Widget, { + props: { + baseCls: "demo-label" + }, + render: function () { + var items = []; + + items.push(this.createExpander("1.1.1 文字居中,有宽度和高度,有文字宽度,whiteSpace为normal", { + type: "bi.label", + cls: "layout-bg6", + text: "设置了textWidth,则一定是嵌套结构,因此需要用center_adapt布局容纳一下.为了实现不足一行时文字水平居中,超出一行时左对齐,需要设置maxWidth.", + whiteSpace: "normal", + height: 50, + width: 500, + textWidth: 200, + textAlign: "center" + })); + + items.push(this.createExpander("1.1.2 居中,有宽度和高度,有文字宽度,whiteSpace为nowrap", { + type: "bi.label", + cls: "layout-bg6", + text: "居中,有宽度高度,有文字宽度,whiteSpace为nowrap,maxWidth会限制文字", + whiteSpace: "nowrap", + height: 50, + width: 500, + textWidth: 350, + textAlign: "center" + })); + + items.push((this.createExpander("1.2.1 居中,有宽度无高度,有文字宽度,whiteSpace为normal", { + type: "bi.label", + cls: "layout-bg6", + text: "居中,有宽度无高度,有文字宽度,whiteSpace为normal,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "normal", + width: 500, + textWidth: 200, + textAlign: "center" + }))); + + items.push((this.createExpander("1.2.1 居中,有宽度无高度,有文字宽度,whiteSpace为normal,高度被父容器拉满", { + type: "bi.absolute", + height: 100, + items: [ + { + el: { + type: "bi.label", + cls: "layout-bg6", + text: "此时虽然没有对label设置高度,但由于使用了center_adapt布局,依然会垂直方向居中", + whiteSpace: "normal", + width: 500, + textWidth: 200, + textAlign: "center" + }, + top: 0, + left: 0, + bottom: 0 + } + ] + }))); + + items.push((this.createExpander("1.2.2 居中,有宽度无高度,有文字宽度,whiteSpace为nowrap", { + type: "bi.label", + cls: "layout-bg6", + text: "居中,有宽度无高度,有文字宽度,whiteSpace为nowrap,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "nowrap", + width: 500, + textWidth: 350, + textAlign: "center" + }))); + + items.push((this.createExpander("1.3.1 居中,有宽度和高度,无文字宽度,whiteSpace为normal", { + type: "bi.label", + cls: "layout-bg3", + text: "居中,有宽度高度,无文字宽度,whiteSpace为normal,只需用center_adapt布局包一下即可.度,下即可.居中,有宽度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,下即可.居中,有宽度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,下即可.居中,有宽度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,whiteSpace为normal", + width: 500, + whiteSpace: "normal", + textAlign: "center", + height: 50 + }))); + + items.push((this.createExpander("1.3.2 居中,有宽度无高度,无文字宽度,whiteSpace为normal", { + type: "bi.absolute", + height: 100, + items: [ + { + el: { + type: "bi.label", + cls: "layout-bg3", + text: "居中,有宽度无高度,无文字宽度,whiteSpace为normal,只需用center_adapt布局包一下即可.度,下即可.居中,有宽度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,下即可.居中,有宽度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,下即可.居中,有宽度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,whiteSpace为normal", + width: 500, + whiteSpace: "normal", + textAlign: "center" + }, + top: 0, + left: 0, + bottom: 0 + } + ] + }))); + + items.push((this.createExpander("1.4 居中,有宽度和高度,无文字宽度,whiteSpace为nowrap", { + type: "bi.label", + cls: "layout-bg3", + text: "居中,有宽度500有高度50,无文字宽度,whiteSpace为nowrap,此处无需两层div,设置text即可,然后设置line-height为传入高度即可实现垂直方向居中", + width: 500, + whiteSpace: "nowrap", + textAlign: "center", + height: 50 + }))); + + items.push((this.createExpander("1.5.1 居中,有宽度无高度,无文字宽度,whiteSpace为nowrap", { + type: "bi.label", + cls: "layout-bg3", + text: "居中,有宽度500无高度,无文字宽度,whiteSpace为nowrap,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + width: 500, + whiteSpace: "nowrap", + textAlign: "center" + }))); + + items.push((this.createExpander("1.5.2 居中,有宽度无高度,无文字宽度,whiteSpace为nowrap,高度被父级拉满", { + type: "bi.absolute", + height: 50, + items: [ + { + el: { + type: "bi.label", + cls: "layout-bg3", + text: "居中,有宽度500无高度,无文字宽度,whiteSpace为nowrap,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + width: 500, + whiteSpace: "nowrap", + textAlign: "center" + }, + top: 0, + left: 0, + bottom: 0 + } + ] + }))); + + items.push((this.createExpander("1.6.1 居中,无宽度无高度,有文字宽度,whiteSpace为nowrap", { + type: "bi.label", + cls: "layout-bg3", + text: "居中,无宽度,有文字宽度,whiteSpace为nowrap,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + textWidth: 500, + whiteSpace: "nowrap", + textAlign: "center" + }))); + + items.push((this.createExpander("1.6.2 居中,无宽度无高度,有文字宽度,whiteSpace为normal", { + type: "bi.label", + cls: "layout-bg3", + text: "居中,无宽度,有文字宽度,whiteSpace为normal,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + textWidth: 500, + whiteSpace: "normal", + textAlign: "center" + }))); + + items.push((this.createExpander("1.6.3 居中,无宽度无,有文字宽度,whiteSpace为normal,被父级拉满", { + type: "bi.absolute", + height: 100, + items: [ + { + el: { + type: "bi.label", + cls: "layout-bg3", + text: "居中,无宽度,有文字宽度,whiteSpace为normal,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + textWidth: 500, + whiteSpace: "normal", + textAlign: "center" + }, + left: 0, + right: 0, + top: 0, + bottom: 0 + } + ] + }))); + + items.push((this.createExpander("1.7.1 居中,无宽度无高度,无文字宽度,whiteSpace为normal", { + type: "bi.label", + cls: "layout-bg3", + text: "居中,无宽度无高度,无文字宽度,whiteSpace为normal,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "normal", + textAlign: "center" + }))); + + items.push((this.createExpander("1.7.2 居中,无宽度无高度,无文字宽度,whiteSpace为normal,被父级拉满", { + type: "bi.absolute", + height: 100, + items: [ + { + el: { + type: "bi.label", + cls: "layout-bg3", + text: "居中,无宽度无高度,无文字宽度,whiteSpace为normal,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "normal", + textAlign: "center" + }, + left: 0, + right: 0, + top: 0, + bottom: 0 + } + ] + }))); + + items.push((this.createExpander("1.7.3 居中,无宽度有高度,无文字宽度,whiteSpace为normal", { + type: "bi.label", + cls: "layout-bg3", + text: "居中,无宽度有高度,无文字宽度,whiteSpace为normal,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "normal", + height: 50, + textAlign: "center" + }))); + + items.push((this.createExpander("1.8 居中,无宽度有高度,无文字宽度,whiteSpace为nowrap", { + type: "bi.label", + cls: "layout-bg3", + text: "居中,无宽度有高度,无文字宽度,whiteSpace为nowrap,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "nowrap", + height: 50, + textAlign: "center" + }))); + + items.push((this.createExpander("1.9 居中,无宽度无高度,无文字宽度,whiteSpace为nowrap", { + type: "bi.label", + cls: "layout-bg3", + text: "居中,无宽度无高度,无文字宽度,whiteSpace为nowrap,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "nowrap", + textAlign: "center" + }))); + + items.push((this.createExpander("1.9.1 居中,无宽度无高度,无文字宽度,whiteSpace为nowrap,高度被父级拉满", { + type: "bi.absolute", + height: 50, + items: [ + { + el: { + type: "bi.label", + cls: "layout-bg3", + text: "居中,无宽度无高度,无文字宽度,whiteSpace为nowrap,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "nowrap", + textAlign: "center" + }, + top: 0, + left: 0, + right: 0, + bottom: 0 + } + ] + }))); + + items.push((this.createExpander("2.1.1 居左,有宽度有高度,有文字宽度,whiteSpace为normal", { + type: "bi.label", + cls: "layout-bg2", + text: "居左,有宽度有高度,有文字宽度,whiteSpace为normal，为了演示这个是真的是normal的我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "normal", + textAlign: "left", + textWidth: 300, + height: 50, + width: 500 + }))); + + items.push((this.createExpander("2.1.2 居左,有宽度有高度,有文字宽度,whiteSpace为nowrap", { + type: "bi.label", + cls: "layout-bg2", + text: "居左,有宽度有高度,有文字宽度,whiteSpace为normal，为了演示这个是真的是normal的我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "nowrap", + textAlign: "left", + textWidth: 300, + height: 50, + width: 500 + }))); + + items.push((this.createExpander("2.2.1 居左,有宽度无高度,有文字宽度,whiteSpace为normal", { + type: "bi.label", + cls: "layout-bg2", + text: "居左,有宽度无高度,有文字宽度,whiteSpace为normal，不设置高度，为了演示这个是真的是normal的我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "normal", + textAlign: "left", + textWidth: 300, + width: 500 + }))); + + items.push((this.createExpander("2.2.2 居左,有宽度无高度,有文字宽度,whiteSpace为normal,高度被父级拉满", { + type: "bi.absolute", + height: 100, + items: [ + { + el: { + type: "bi.label", + cls: "layout-bg2", + text: "居左,有宽度无高度,有文字宽度,whiteSpace为normal，不设置高度，为了演示这个是真的是normal的我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "normal", + textAlign: "left", + textWidth: 300, + width: 500 + }, + top: 0, + bottom: 0, + left: 0 + } + ] + }))); + + items.push((this.createExpander("2.2.3 居左,有宽度无高度,有文字宽度,whiteSpace为nowrap", { + type: "bi.label", + cls: "layout-bg2", + text: "居左,有宽度无高度,有文字宽度,whiteSpace为nowrap，不设置高度，为了演示这个是真的是normal的我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "nowrap", + textAlign: "left", + textWidth: 300, + width: 500 + }))); + + items.push((this.createExpander("2.2.4 居左,有宽度无高度,有文字宽度,whiteSpace为nowrap,高度被父级拉满", { + type: "bi.absolute", + height: 100, + items: [ + { + el: { + type: "bi.label", + cls: "layout-bg2", + text: "居左,有宽度无高度,有文字宽度,whiteSpace为nowrap，不设置高度，为了演示这个是真的是normal的我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "nowrap", + textAlign: "left", + textWidth: 300, + width: 500 + }, + top: 0, + bottom: 0, + left: 0 + } + ] + }))); + + items.push((this.createExpander("2.3.1 居左,有宽度有高度,无文字宽度,whiteSpace为nowrap", { + type: "bi.label", + cls: "layout-bg2", + text: "居左,有宽度有高度,无文字宽度,whiteSpace为nowrap，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "nowrap", + textAlign: "left", + height: 50, + vgap: 5, + width: 500 + }))); + + items.push((this.createExpander("2.3.2 居左,有宽度有高度,无文字宽度,whiteSpace为normal", { + type: "bi.label", + cls: "layout-bg2", + text: "居左,有宽度有高度,无文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "normal", + textAlign: "left", + height: 50, + width: 500 + }))); + + items.push((this.createExpander("2.4.1 居左,有宽度无高度,无文字宽度,whiteSpace为normal", { + type: "bi.label", + cls: "layout-bg2", + text: "居左,有宽度无高度,无文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "normal", + textAlign: "left", + width: 500 + }))); + + items.push((this.createExpander("2.4.2 居左,有宽度无高度,无文字宽度,whiteSpace为normal,高度被父级拉满", { + type: "bi.absolute", + height: 100, + items: [ + { + el: { + type: "bi.label", + cls: "layout-bg1", + text: "居左,有宽度无高度,无文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "normal", + textAlign: "left", + width: 500 + }, + top: 0, + left: 0, + bottom: 0 + } + ] + }))); + + items.push((this.createExpander("2.5.1 居左,无宽度无高度,有文字宽度,whiteSpace为normal", { + type: "bi.label", + cls: "layout-bg2", + text: "居左,无宽度无高度,有文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "normal", + textAlign: "left", + textWidth: 300 + }))); + + items.push((this.createExpander("2.5.2 居左,无宽度无高度,有文字宽度,whiteSpace为normal,高度被父级拉满", { + type: "bi.absolute", + height: 100, + items: [ + { + el: { + type: "bi.label", + cls: "layout-bg2", + text: "居左,无宽度无高度,有文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "normal", + textAlign: "left", + textWidth: 300 + }, + top: 0, + left: 0, + bottom: 0, + right: 0 + } + ] + }))); + + items.push((this.createExpander("2.5.3 居左,无宽度无高度,有文字宽度,whiteSpace为nowrap", { + type: "bi.label", + cls: "layout-bg2", + text: "居左,无宽度无高度,有文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "nowrap", + textAlign: "left", + textWidth: 300 + }))); + + items.push((this.createExpander("2.5.4 居左,无宽度无高度,有文字宽度,whiteSpace为nowrap,高度被父级拉满", { + type: "bi.absolute", + height: 100, + items: [ + { + el: { + type: "bi.label", + cls: "layout-bg2", + text: "居左,无宽度无高度,有文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "nowrap", + textAlign: "left", + textWidth: 300 + }, + top: 0, + left: 0, + bottom: 0, + right: 0 + } + ] + }))); + + items.push((this.createExpander("2.6.1 居左,无宽度有高度,无文字宽度,whiteSpace为nowrap", { + type: "bi.label", + cls: "layout-bg2", + text: "居左,无宽度有高度,无文字宽度,whiteSpace为nowrap，注意这个是设置了vgap的,为了实现居中,lineHeight要做计算,才能准确的垂直居中", + whiteSpace: "nowrap", + textAlign: "left", + vgap: 10, + height: 50 + }))); + + items.push((this.createExpander("2.6.2 居左,无宽度有高度,无文字宽度,whiteSpace为normal", { + type: "bi.label", + cls: "layout-bg2", + text: "居左,无宽度有高度,无文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "normal", + textAlign: "left", + height: 50 + }))); + + items.push((this.createExpander("2.7.1 居左,无宽度无高度,无文字宽度,whiteSpace为normal", { + type: "bi.label", + cls: "layout-bg2", + text: "居左,无宽度无高度,无文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "normal", + textAlign: "left" + }))); + + items.push((this.createExpander("2.7.2 居左,无宽度无高度,无文字宽度,whiteSpace为normal,高度被父级拉满", { + type: "bi.absolute", + height: 100, + items: [ + { + el: { + type: "bi.label", + cls: "layout-bg2", + text: "居左,无宽度无高度,无文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "normal", + textAlign: "left" + }, + top: 0, + left: 0, + bottom: 0, + right: 0 + } + ] + }))); + + items.push((this.createExpander("2.7.3 居左,无宽度无高度,无文字宽度,whiteSpace为nowrap", { + type: "bi.label", + cls: "layout-bg2", + text: "居左,无宽度无高度,无文字宽度,whiteSpace为nowrap，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "nowrap", + textAlign: "left" + }))); + + items.push((this.createExpander("2.7.4 居左,无宽度无高度,无文字宽度,whiteSpace为nowrap,高度被父级拉满", { + type: "bi.absolute", + height: 100, + items: [ + { + el: { + type: "bi.label", + cls: "layout-bg2", + text: "居左,无宽度无高度,无文字宽度,whiteSpace为nowrap，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "nowrap", + textAlign: "left" + }, + top: 0, + left: 0, + bottom: 0, + right: 0 + } + ] + }))); + + items.push((this.createExpander("2.8 居左,无宽度无高度,无文字宽度,whiteSpace为nowrap,高度被父级拉满", { + type: "bi.absolute", + height: 100, + items: [ + { + el: { + type: "bi.label", + cls: "layout-bg2", + text: "居左,无宽度无高度,无文字宽度,whiteSpace为nowrap，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "nowrap", + textAlign: "left" + }, + top: 0, + left: 0, + bottom: 0, + right: 0 + } + ] + }))); + + items.push((this.createExpander("2.8.2 居左,无宽度无高度,无文字宽度,whiteSpace为normal,高度被父级拉满", { + type: "bi.absolute", + height: 100, + items: [ + { + el: { + type: "bi.label", + cls: "layout-bg2", + text: "居左,无宽度无高度,无文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", + whiteSpace: "normal", + textAlign: "left" + }, + top: 0, + left: 0, + bottom: 0, + right: 0 + } + ] + }))); + + return { + type: "bi.vertical", + items: items, + hgap: 300, + vgap: 20 + }; + }, + + createExpander: function (text, popup) { + return { + type: "bi.vertical", + items: [ + { + type: "bi.label", + cls: "demo-font-weight-bold", + textAlign: "left", + text: text, + height: 30 + }, { + el: popup + } + ] + }; + } +}); +BI.shortcut("demo.label_scene", Demo.LabelScene); \ No newline at end of file diff --git a/demo/js/config/base.js b/demo/js/config/base.js index 234eaa3fa..0c4eaaded 100644 --- a/demo/js/config/base.js +++ b/demo/js/config/base.js @@ -6,6 +6,10 @@ Demo.BASE_CONFIG = [{ pId: 2, text: "bi.label", value: "demo.label" +},{ + pId: 2, + text: "bi.label_scene", + value: "demo.label_scene" }, { pId: 2, text: "bi.icon_label", diff --git a/demo/js/face.js b/demo/js/face.js index a9f1072e9..62304e8d6 100644 --- a/demo/js/face.js +++ b/demo/js/face.js @@ -79,7 +79,6 @@ Demo.Face = BI.inherit(BI.Widget, { type: "bi.text_button", cls: "bi-list-item-active", text: "测试激活状态", - forceCenter: true } }] }; @@ -101,7 +100,6 @@ Demo.Face = BI.inherit(BI.Widget, { type: "bi.text_button", cls: "bi-list-item-active", text: "测试选中状态", - forceCenter: true } }] }; @@ -144,7 +142,6 @@ Demo.Face = BI.inherit(BI.Widget, { el: { type: "bi.text_button", text: "这个按钮是灰化的", - forceCenter: true, disabled: true } }] @@ -181,7 +178,6 @@ Demo.Face = BI.inherit(BI.Widget, { type: "bi.text_button", cls: "bi-list-item-active", text: "测试悬浮状态", - forceCenter: true } }] }; @@ -203,7 +199,6 @@ Demo.Face = BI.inherit(BI.Widget, { type: "bi.text_button", cls: "bi-list-item-active", text: "测试激活状态", - forceCenter: true } }] }; @@ -225,7 +220,6 @@ Demo.Face = BI.inherit(BI.Widget, { type: "bi.text_button", cls: "bi-list-item-active", text: "测试选中状态", - forceCenter: true } }] }; diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js index 031661759..78e073290 100644 --- a/src/base/single/button/buttons/button.js +++ b/src/base/single/button/buttons/button.js @@ -25,7 +25,6 @@ BI.Button = BI.inherit(BI.BasicButton, { ghost: false, // 是否幽灵显示, 即正常状态无背景 textAlign: "center", whiteSpace: "nowrap", - forceCenter: false, textWidth: null, textHeight: null, hgap: props.clear ? 0 : 10, @@ -79,7 +78,6 @@ BI.Button = BI.inherit(BI.BasicButton, { type: "bi.label", textAlign: o.textAlign, whiteSpace: o.whiteSpace, - forceCenter: o.forceCenter, textWidth: o.textWidth, textHeight: o.textHeight, hgap: o.hgap, diff --git a/src/base/single/button/buttons/button.text.js b/src/base/single/button/buttons/button.text.js index 505ceffa8..abb782ee9 100644 --- a/src/base/single/button/buttons/button.text.js +++ b/src/base/single/button/buttons/button.text.js @@ -12,7 +12,6 @@ BI.TextButton = BI.inherit(BI.BasicButton, { baseCls: (conf.baseCls || "") + " bi-text-button", textAlign: "center", whiteSpace: "nowrap", - forceCenter: false, textWidth: null, textHeight: null, hgap: 0, @@ -33,7 +32,6 @@ BI.TextButton = BI.inherit(BI.BasicButton, { whiteSpace: o.whiteSpace, textWidth: o.textWidth, textHeight: o.textHeight, - forceCenter: o.forceCenter, width: o.width, height: o.height, hgap: o.hgap, diff --git a/src/base/single/editor/editor.js b/src/base/single/editor/editor.js index af09bb117..a67e6b6a1 100644 --- a/src/base/single/editor/editor.js +++ b/src/base/single/editor/editor.js @@ -51,7 +51,6 @@ BI.Editor = BI.inherit(BI.Single, { type: "bi.label", cls: "bi-water-mark", text: this.options.watermark, - forceCenter: true, height: o.height - 2 * (o.vgap + o.tgap), whiteSpace: "nowrap", textAlign: "left" diff --git a/src/base/single/label/html.label.js b/src/base/single/label/html.label.js index 2fb601b77..d94e4002d 100644 --- a/src/base/single/label/html.label.js +++ b/src/base/single/label/html.label.js @@ -9,7 +9,6 @@ BI.HtmlLabel = BI.inherit(BI.Single, { baseCls: (conf.baseCls || "") + " bi-label", textAlign: "center", whiteSpace: "nowrap", // normal or nowrap - forceCenter: false, // 是否无论如何都要居中, 不考虑超出边界的情况, 在未知宽度和高度时有效 textWidth: null, textHeight: null, hgap: 0, @@ -49,28 +48,22 @@ BI.HtmlLabel = BI.inherit(BI.Single, { var json = this._createJson(); if (BI.isNumber(o.width) && o.width > 0) { if (BI.isNumber(o.textWidth) && o.textWidth > 0) { - if (BI.isNumber(o.height) && o.height > 0) { - var gap = (o.width - o.textWidth) / 2; + json.maxWidth = o.textWidth; + if (BI.isNumber(o.height) && o.height > 0) { // 1.1 BI.createWidget({ - type: "bi.adaptive", + type: "bi.center_adapt", height: o.height, scrollable: o.whiteSpace === "normal", element: this, items: [ { - el: (this.text = BI.createWidget(json)), - left: gap + o.hgap + o.lgap, - right: gap + o.hgap + o.rgap, - top: o.vgap + o.tgap, - bottom: o.vgap + o.bgap + el: (this.text = BI.createWidget(json)) } ] }); - this.element.css({"line-height": o.height + "px"}); return; } - json.width = o.textWidth; - BI.createWidget({ + BI.createWidget({ // 1.2 type: "bi.center_adapt", scrollable: o.whiteSpace === "normal", element: this, @@ -83,16 +76,18 @@ BI.HtmlLabel = BI.inherit(BI.Single, { return; } if (o.whiteSpace == "normal") { - this.text = BI.createWidget(json); - BI.createWidget({ - type: "bi.center_adapt", - scrollable: o.whiteSpace === "normal", + BI.extend(json, { hgap: o.hgap, vgap: o.vgap, lgap: o.lgap, rgap: o.rgap, tgap: o.tgap, - bgap: o.bgap, + bgap: o.bgap + }); + this.text = BI.createWidget(json); + BI.createWidget({ + type: "bi.center_adapt", + scrollable: o.whiteSpace === "normal", element: this, items: [this.text] }); @@ -102,33 +97,37 @@ BI.HtmlLabel = BI.inherit(BI.Single, { this.element.css({ "line-height": o.height + "px" }); - BI.createWidget({ - type: "bi.absolute", - scrollable: o.whiteSpace === "normal", + this.text = BI.createWidget(BI.extend(json, { element: this, - items: [{ - el: (this.text = BI.createWidget(json)), - left: o.hgap + o.lgap, - right: o.hgap + o.rgap, - top: o.vgap + o.tgap, - bottom: o.vgap + o.bgap - }] - }); + hgap: o.hgap, + vgap: o.vgap, + lgap: o.lgap, + rgap: o.rgap, + tgap: o.tgap, + bgap: o.bgap + })); return; } - json.width = o.width - 2 * o.hgap; + BI.extend(json, { + hgap: o.hgap, + vgap: o.vgap, + lgap: o.lgap, + rgap: o.rgap, + tgap: o.tgap, + bgap: o.bgap, + maxWidth: "100%" + }); + this.text = BI.createWidget(json); BI.createWidget({ type: "bi.center_adapt", scrollable: o.whiteSpace === "normal", element: this, - items: [{ - el: (this.text = BI.createWidget(json)) - }] + items: [this.text] }); return; } if (BI.isNumber(o.textWidth) && o.textWidth > 0) { - json.width = o.textWidth; + json.maxWidth = o.textWidth; BI.createWidget({ type: "bi.center_adapt", scrollable: o.whiteSpace === "normal", @@ -142,60 +141,36 @@ BI.HtmlLabel = BI.inherit(BI.Single, { return; } if (o.whiteSpace == "normal") { - this.text = BI.createWidget(json); - BI.createWidget({ - type: "bi.center_adapt", + BI.extend(json, { hgap: o.hgap, vgap: o.vgap, lgap: o.lgap, rgap: o.rgap, tgap: o.tgap, - bgap: o.bgap, - scrollable: o.whiteSpace === "normal", + bgap: o.bgap + }); + this.text = BI.createWidget(json); + BI.createWidget({ + type: "bi.center_adapt", + scrollable: true, element: this, items: [this.text] }); return; } if (BI.isNumber(o.height) && o.height > 0) { - if (BI.isNumber(o.textHeight) && o.textHeight > 0) { - this.element.css({ - "line-height": o.height + "px" - }); - BI.createWidget({ - type: "bi.adaptive", - height: o.height, - scrollable: o.whiteSpace === "normal", - element: this, - items: [{ - el: (this.text = BI.createWidget(json)), - left: o.hgap + o.lgap, - right: o.hgap + o.rgap, - top: o.vgap + o.tgap, - bottom: o.vgap + o.bgap - }] - }); - return; - } - BI.extend(json, { + this.element.css({ + "line-height": o.height + "px" + }); + this.text = BI.createWidget(BI.extend(json, { + element: this, hgap: o.hgap, vgap: o.vgap, lgap: o.lgap, rgap: o.rgap, tgap: o.tgap, bgap: o.bgap - }); - this.element.css({ - "line-height": o.height + "px" - }); - this.text = BI.createWidget(BI.extend(json, { - element: this })); - BI.createWidget({ - type: "bi.layout", - element: this.text, - scrollable: o.whiteSpace === "normal" - }); return; } BI.extend(json, { @@ -206,22 +181,14 @@ BI.HtmlLabel = BI.inherit(BI.Single, { tgap: o.tgap, bgap: o.bgap }); - if (o.forceCenter) { - this.text = BI.createWidget(json); - BI.createWidget({ - type: "bi.center_adapt", - element: this, - items: [this.text] - }); - return; - } + this.text = BI.createWidget(BI.extend(json, { - element: this + maxWidth: "100%" })); BI.createWidget({ - type: "bi.layout", - element: this.text, - scrollable: o.whiteSpace === "normal" + type: "bi.center_adapt", + element: this, + items: [this.text] }); }, @@ -233,21 +200,16 @@ BI.HtmlLabel = BI.inherit(BI.Single, { json.width = o.textWidth; if (BI.isNumber(o.height) && o.height > 0) { BI.createWidget({ - type: "bi.adaptive", + type: "bi.vertical_adapt", height: o.height, scrollable: o.whiteSpace === "normal", element: this, items: [ { - el: (this.text = BI.createWidget(json)), - left: o.hgap + o.lgap, - right: o.hgap + o.rgap, - top: o.vgap + o.tgap, - bottom: o.vgap + o.bgap + el: (this.text = BI.createWidget(json)) } ] }); - this.element.css({"line-height": o.height + "px"}); return; } BI.createWidget({ @@ -266,42 +228,23 @@ BI.HtmlLabel = BI.inherit(BI.Single, { } ] }); - o.textHeight && this.element.css({"line-height": o.textHeight + "px"}); return; } - if (o.whiteSpace == "normal") { - this.text = BI.createWidget(json); - BI.createWidget({ - type: "bi.vertical_adapt", - scrollable: o.whiteSpace === "normal", + if (BI.isNumber(o.height) && o.height > 0) { + this.text = BI.createWidget(BI.extend(json, { + element: this, hgap: o.hgap, vgap: o.vgap, lgap: o.lgap, rgap: o.rgap, tgap: o.tgap, - bgap: o.bgap, - element: this, - items: [this.text] - }); - o.textHeight && this.element.css({"line-height": o.textHeight + "px"}); - return; - } - if (BI.isNumber(o.height) && o.height > 0) { - this.element.css({ - "line-height": o.height + "px" - }); - BI.createWidget({ - type: "bi.absolute", - scrollable: o.whiteSpace === "normal", - element: this, - items: [{ - el: (this.text = BI.createWidget(json)), - left: o.hgap + o.lgap, - right: o.hgap + o.rgap, - top: o.vgap + o.tgap, - bottom: o.vgap + o.bgap - }] - }); + bgap: o.bgap + })); + if (o.whiteSpace !== "normal") { + this.element.css({ + "line-height": o.height - (o.vgap * 2) + "px" + }); + } return; } json.width = o.width - 2 * o.hgap - o.lgap - o.rgap; @@ -319,7 +262,6 @@ BI.HtmlLabel = BI.inherit(BI.Single, { el: (this.text = BI.createWidget(json)) }] }); - o.textHeight && this.element.css({"line-height": o.textHeight + "px"}); return; } if (BI.isNumber(o.textWidth) && o.textWidth > 0) { @@ -340,66 +282,23 @@ BI.HtmlLabel = BI.inherit(BI.Single, { } ] }); - o.textHeight && this.element.css({"line-height": o.textHeight + "px"}); - return; - } - if (o.whiteSpace == "normal") { - this.text = BI.createWidget(json); - BI.createWidget({ - type: "bi.vertical_adapt", - scrollable: o.whiteSpace === "normal", - hgap: o.hgap, - vgap: o.vgap, - lgap: o.lgap, - rgap: o.rgap, - tgap: o.tgap, - bgap: o.bgap, - element: this, - items: [this.text] - }); - // 父亲有line-height,而当前label是inline-block，那么他的行高一定是父亲的lineHeight,就算text上设置了line-height - o.textHeight && this.element.css({"line-height": o.textHeight + "px"}); return; } if (BI.isNumber(o.height) && o.height > 0) { - if (BI.isNumber(o.textHeight) && o.textHeight > 0) { + if (o.whiteSpace !== "normal") { this.element.css({ - "line-height": o.height + "px" + "line-height": o.height - (o.vgap * 2) + "px" }); - BI.createWidget({ - type: "bi.adaptive", - height: o.height, - scrollable: o.whiteSpace === "normal", - element: this, - items: [{ - el: (this.text = BI.createWidget(json)), - left: o.hgap + o.lgap, - right: o.hgap + o.rgap, - top: o.vgap + o.tgap, - bottom: o.vgap + o.bgap - }] - }); - return; } - BI.extend(json, { + this.text = BI.createWidget(BI.extend(json, { + element: this, hgap: o.hgap, vgap: o.vgap, lgap: o.lgap, rgap: o.rgap, tgap: o.tgap, bgap: o.bgap - }); - this.element.css({ - "line-height": o.height + "px" - }); - this.text = BI.createWidget(BI.extend(json, { - element: this })); - BI.createWidget({ - type: "bi.layout", - element: this.text, - scrollable: o.whiteSpace === "normal" - }); return; } BI.extend(json, { @@ -410,23 +309,14 @@ BI.HtmlLabel = BI.inherit(BI.Single, { tgap: o.tgap, bgap: o.bgap }); - if (o.forceCenter) { - this.text = BI.createWidget(json); - BI.createWidget({ - type: "bi.vertical_adapt", - element: this, - items: [this.text] - }); - o.textHeight && this.element.css({"line-height": o.textHeight + "px"}); - return; - } + this.text = BI.createWidget(BI.extend(json, { - element: this + maxWidth: "100%" })); BI.createWidget({ - type: "bi.layout", - element: this.text, - scrollable: o.whiteSpace === "normal" + type: "bi.vertical_adapt", + element: this, + items: [this.text] }); }, diff --git a/src/base/single/label/label.js b/src/base/single/label/label.js index eb2bf3097..68709dbab 100644 --- a/src/base/single/label/label.js +++ b/src/base/single/label/label.js @@ -9,7 +9,6 @@ BI.Label = BI.inherit(BI.Single, { baseCls: (conf.baseCls || "") + " bi-label", textAlign: "center", whiteSpace: "nowrap", // normal or nowrap - forceCenter: false, // 是否无论如何都要居中, 不考虑超出边界的情况, 在未知宽度和高度时有效 textWidth: null, textHeight: null, hgap: 0, @@ -56,29 +55,22 @@ BI.Label = BI.inherit(BI.Single, { json.textAlign = "left"; if (BI.isNumber(o.width) && o.width > 0) { if (BI.isNumber(o.textWidth) && o.textWidth > 0) { - if (BI.isNumber(o.height) && o.height > 0) { - var gap = (o.width - o.textWidth) / 2; + json.maxWidth = o.textWidth; + if (BI.isNumber(o.height) && o.height > 0) { // 1.1 BI.createWidget({ - type: "bi.adaptive", + type: "bi.center_adapt", height: o.height, scrollable: o.whiteSpace === "normal", element: this, items: [ { - el: (this.text = BI.createWidget(json)), - left: gap + o.hgap + o.lgap, - right: gap + o.hgap + o.rgap, - top: o.vgap + o.tgap, - bottom: o.vgap + o.bgap + el: (this.text = BI.createWidget(json)) } ] }); - this.element.css({"line-height": o.height + "px"}); return; } - json.width = o.textWidth; - json.textAlign = o.textAlign; - BI.createWidget({ + BI.createWidget({ // 1.2 type: "bi.center_adapt", scrollable: o.whiteSpace === "normal", element: this, @@ -90,7 +82,7 @@ BI.Label = BI.inherit(BI.Single, { }); return; } - if (o.whiteSpace == "normal") { + if (o.whiteSpace == "normal") { // 1.3 BI.extend(json, { hgap: o.hgap, vgap: o.vgap, @@ -108,39 +100,42 @@ BI.Label = BI.inherit(BI.Single, { }); return; } - if (BI.isNumber(o.height) && o.height > 0) { + if (BI.isNumber(o.height) && o.height > 0) { // 1.4 this.element.css({ "line-height": o.height + "px" }); json.textAlign = o.textAlign; - BI.createWidget({ - type: "bi.absolute", - scrollable: o.whiteSpace === "normal", + this.text = BI.createWidget(BI.extend(json, { element: this, - items: [{ - el: (this.text = BI.createWidget(json)), - left: o.hgap + o.lgap, - right: o.hgap + o.rgap, - top: o.vgap + o.tgap, - bottom: o.vgap + o.bgap - }] - }); + hgap: o.hgap, + vgap: o.vgap, + lgap: o.lgap, + rgap: o.rgap, + tgap: o.tgap, + bgap: o.bgap + })); return; } - json.width = o.width - 2 * o.hgap; - json.textAlign = o.textAlign; + BI.extend(json, { // 1.5 + hgap: o.hgap, + vgap: o.vgap, + lgap: o.lgap, + rgap: o.rgap, + tgap: o.tgap, + bgap: o.bgap, + maxWidth: "100%" + }); + this.text = BI.createWidget(json); BI.createWidget({ type: "bi.center_adapt", scrollable: o.whiteSpace === "normal", element: this, - items: [{ - el: (this.text = BI.createWidget(json)) - }] + items: [this.text] }); return; } - if (BI.isNumber(o.textWidth) && o.textWidth > 0) { - json.width = o.textWidth; + if (BI.isNumber(o.textWidth) && o.textWidth > 0) { // 1.6 + json.maxWidth = o.textWidth; BI.createWidget({ type: "bi.center_adapt", scrollable: o.whiteSpace === "normal", @@ -153,7 +148,7 @@ BI.Label = BI.inherit(BI.Single, { }); return; } - if (o.whiteSpace == "normal") { + if (o.whiteSpace == "normal") { // 1.7 BI.extend(json, { hgap: o.hgap, vgap: o.vgap, @@ -165,54 +160,26 @@ BI.Label = BI.inherit(BI.Single, { this.text = BI.createWidget(json); BI.createWidget({ type: "bi.center_adapt", - scrollable: o.whiteSpace === "normal", + scrollable: true, element: this, items: [this.text] }); return; } - if (BI.isNumber(o.height) && o.height > 0) { - if (BI.isNumber(o.textHeight) && o.textHeight > 0) { - this.element.css({ - "line-height": o.height + "px" - }); - json.textAlign = o.textAlign; - BI.createWidget({ - type: "bi.adaptive", - height: o.height, - scrollable: o.whiteSpace === "normal", - element: this, - items: [{ - el: (this.text = BI.createWidget(json)), - left: o.hgap + o.lgap, - right: o.hgap + o.rgap, - top: o.vgap + o.tgap, - bottom: o.vgap + o.bgap - }] - }); - return; - } - BI.extend(json, { + if (BI.isNumber(o.height) && o.height > 0) { // 1.8 + this.element.css({ + "line-height": o.height + "px" + }); + json.textAlign = o.textAlign; + this.text = BI.createWidget(BI.extend(json, { + element: this, hgap: o.hgap, vgap: o.vgap, lgap: o.lgap, rgap: o.rgap, tgap: o.tgap, bgap: o.bgap - }); - this.element.css({ - "line-height": o.height + "px" - }); - // 能走到这边,说明这个text不需要换行,并且不会做任何布局包装,那么这时候就该是什么align是什么align - json.textAlign = o.textAlign; - this.text = BI.createWidget(BI.extend(json, { - element: this })); - BI.createWidget({ - type: "bi.layout", - element: this.text, - scrollable: o.whiteSpace === "normal" - }); return; } BI.extend(json, { @@ -223,24 +190,14 @@ BI.Label = BI.inherit(BI.Single, { tgap: o.tgap, bgap: o.bgap }); - if (o.forceCenter) { - this.text = BI.createWidget(json); - BI.createWidget({ - type: "bi.center_adapt", - element: this, - items: [this.text] - }); - return; - } - // 能走到这边,说明这个text不需要换行,并且不会做任何布局包装,那么这时候就该是什么align是什么align - json.textAlign = o.textAlign; + this.text = BI.createWidget(BI.extend(json, { - element: this + maxWidth: "100%" })); BI.createWidget({ - type: "bi.layout", - element: this.text, - scrollable: o.whiteSpace === "normal" + type: "bi.center_adapt", + element: this, + items: [this.text] }); }, @@ -250,26 +207,21 @@ BI.Label = BI.inherit(BI.Single, { if (BI.isNumber(o.width) && o.width > 0) { if (BI.isNumber(o.textWidth) && o.textWidth > 0) { json.width = o.textWidth; - if (BI.isNumber(o.height) && o.height > 0) { + if (BI.isNumber(o.height) && o.height > 0) { // 2.1 BI.createWidget({ - type: "bi.adaptive", + type: "bi.vertical_adapt", height: o.height, scrollable: o.whiteSpace === "normal", element: this, items: [ { - el: (this.text = BI.createWidget(json)), - left: o.hgap + o.lgap, - right: o.hgap + o.rgap, - top: o.vgap + o.tgap, - bottom: o.vgap + o.bgap + el: (this.text = BI.createWidget(json)) } ] }); - this.element.css({"line-height": o.height + "px"}); return; } - BI.createWidget({ + BI.createWidget({ // 2.2 type: "bi.vertical_adapt", scrollable: o.whiteSpace === "normal", hgap: o.hgap, @@ -285,46 +237,27 @@ BI.Label = BI.inherit(BI.Single, { } ] }); - o.textHeight && this.element.css({"line-height": o.textHeight + "px"}); return; } - if (o.whiteSpace == "normal") { - this.text = BI.createWidget(json); - BI.createWidget({ - type: "bi.vertical_adapt", - scrollable: o.whiteSpace === "normal", + if (BI.isNumber(o.height) && o.height > 0) { // 2.3 + this.text = BI.createWidget(BI.extend(json, { + element: this, hgap: o.hgap, vgap: o.vgap, lgap: o.lgap, rgap: o.rgap, tgap: o.tgap, - bgap: o.bgap, - element: this, - items: [this.text] - }); - o.textHeight && this.element.css({"line-height": o.textHeight + "px"}); - return; - } - if (BI.isNumber(o.height) && o.height > 0) { - this.element.css({ - "line-height": o.height + "px" - }); - BI.createWidget({ - type: "bi.absolute", - scrollable: o.whiteSpace === "normal", - element: this, - items: [{ - el: (this.text = BI.createWidget(json)), - left: o.hgap + o.lgap, - right: o.hgap + o.rgap, - top: o.vgap + o.tgap, - bottom: o.vgap + o.bgap - }] - }); + bgap: o.bgap + })); + if (o.whiteSpace !== "normal") { + this.element.css({ + "line-height": o.height - (o.vgap * 2) + "px" + }); + } return; } json.width = o.width - 2 * o.hgap - o.lgap - o.rgap; - BI.createWidget({ + BI.createWidget({ // 2.4 type: "bi.vertical_adapt", scrollable: o.whiteSpace === "normal", hgap: o.hgap, @@ -338,12 +271,11 @@ BI.Label = BI.inherit(BI.Single, { el: (this.text = BI.createWidget(json)) }] }); - o.textHeight && this.element.css({"line-height": o.textHeight + "px"}); return; } if (BI.isNumber(o.textWidth) && o.textWidth > 0) { json.width = o.textWidth; - BI.createWidget({ + BI.createWidget({ // 2.5 type: "bi.vertical_adapt", scrollable: o.whiteSpace === "normal", hgap: o.hgap, @@ -359,66 +291,23 @@ BI.Label = BI.inherit(BI.Single, { } ] }); - o.textHeight && this.element.css({"line-height": o.textHeight + "px"}); - return; - } - if (o.whiteSpace == "normal") { - this.text = BI.createWidget(json); - BI.createWidget({ - type: "bi.vertical_adapt", - scrollable: o.whiteSpace === "normal", - hgap: o.hgap, - vgap: o.vgap, - lgap: o.lgap, - rgap: o.rgap, - tgap: o.tgap, - bgap: o.bgap, - element: this, - items: [this.text] - }); - // 父亲有line-height,而当前label是inline-block，那么他的行高一定是父亲的lineHeight,就算text上设置了line-height - o.textHeight && this.element.css({"line-height": o.textHeight + "px"}); return; } if (BI.isNumber(o.height) && o.height > 0) { - if (BI.isNumber(o.textHeight) && o.textHeight > 0) { + if (o.whiteSpace !== "normal") { this.element.css({ - "line-height": o.height + "px" + "line-height": o.height - (o.vgap * 2) + "px" }); - BI.createWidget({ - type: "bi.adaptive", - height: o.height, - scrollable: o.whiteSpace === "normal", - element: this, - items: [{ - el: (this.text = BI.createWidget(json)), - left: o.hgap + o.lgap, - right: o.hgap + o.rgap, - top: o.vgap + o.tgap, - bottom: o.vgap + o.bgap - }] - }); - return; } - BI.extend(json, { + this.text = BI.createWidget(BI.extend(json, { // 2.6 + element: this, hgap: o.hgap, vgap: o.vgap, lgap: o.lgap, rgap: o.rgap, tgap: o.tgap, bgap: o.bgap - }); - this.element.css({ - "line-height": o.height + "px" - }); - this.text = BI.createWidget(BI.extend(json, { - element: this })); - BI.createWidget({ - type: "bi.layout", - element: this.text, - scrollable: o.whiteSpace === "normal" - }); return; } BI.extend(json, { @@ -429,23 +318,14 @@ BI.Label = BI.inherit(BI.Single, { tgap: o.tgap, bgap: o.bgap }); - if (o.forceCenter) { - this.text = BI.createWidget(json); - BI.createWidget({ - type: "bi.vertical_adapt", - element: this, - items: [this.text] - }); - o.textHeight && this.element.css({"line-height": o.textHeight + "px"}); - return; - } + this.text = BI.createWidget(BI.extend(json, { - element: this + maxWidth: "100%" })); BI.createWidget({ - type: "bi.layout", - element: this.text, - scrollable: o.whiteSpace === "normal" + type: "bi.vertical_adapt", + element: this, + items: [this.text] }); }, diff --git a/src/base/single/text.js b/src/base/single/text.js index 52105b198..b3d9f909b 100644 --- a/src/base/single/text.js +++ b/src/base/single/text.js @@ -52,10 +52,14 @@ BI.Text = BI.inherit(BI.Single, { if (BI.isNumber(o.lineHeight)) { this.element.css({lineHeight: o.lineHeight + "px"}); } + if (BI.isWidthOrHeight(o.maxWidth)) { + this.element.css({maxWidth: o.maxWidth}); + } this.element.css({ textAlign: o.textAlign, whiteSpace: o.whiteSpace, - textOverflow: o.whiteSpace === "nowrap" ? "ellipsis" : "" + textOverflow: o.whiteSpace === "nowrap" ? "ellipsis" : "", + overflow: o.whiteSpace === "nowrap" ? "" : "auto" }); if (o.handler) { this.text = BI.createWidget({ diff --git a/src/widget/datetime/datetime.popup.js b/src/widget/datetime/datetime.popup.js index d118e1b9c..7102fbc41 100644 --- a/src/widget/datetime/datetime.popup.js +++ b/src/widget/datetime/datetime.popup.js @@ -14,7 +14,6 @@ BI.DateTimePopup = BI.inherit(BI.Widget, { var self = this, opts = this.options; this.cancelButton = BI.createWidget({ type: "bi.text_button", - forceCenter: true, cls: "multidate-popup-button bi-border-top bi-border-right", shadow: true, text: BI.i18nText("BI-Basic_Cancel") @@ -25,7 +24,6 @@ BI.DateTimePopup = BI.inherit(BI.Widget, { this.okButton = BI.createWidget({ type: "bi.text_button", - forceCenter: true, cls: "multidate-popup-button bi-border-top", shadow: true, text: BI.i18nText("BI-Basic_OK") diff --git a/src/widget/dynamicdate/dynamicdate.popup.js b/src/widget/dynamicdate/dynamicdate.popup.js index 95c027bd5..bb5e0e5fb 100644 --- a/src/widget/dynamicdate/dynamicdate.popup.js +++ b/src/widget/dynamicdate/dynamicdate.popup.js @@ -24,7 +24,6 @@ BI.DynamicDatePopup = BI.inherit(BI.Widget, { type: "bi.grid", items: [[{ type: "bi.text_button", - forceCenter: true, cls: "bi-high-light bi-split-top", shadow: true, text: BI.i18nText("BI-Basic_Clear"), @@ -37,7 +36,6 @@ BI.DynamicDatePopup = BI.inherit(BI.Widget, { }] }, { type: "bi.text_button", - forceCenter: true, cls: "bi-split-left bi-split-right bi-high-light bi-split-top", shadow: true, textHeight: c.buttonHeight - 1, @@ -53,7 +51,6 @@ BI.DynamicDatePopup = BI.inherit(BI.Widget, { }] }, { type: "bi.text_button", - forceCenter: true, cls: "bi-high-light bi-split-top", textHeight: c.buttonHeight - 1, shadow: true, diff --git a/src/widget/dynamicdatetime/dynamicdatetime.popup.js b/src/widget/dynamicdatetime/dynamicdatetime.popup.js index 54884a31a..2bdde53d4 100644 --- a/src/widget/dynamicdatetime/dynamicdatetime.popup.js +++ b/src/widget/dynamicdatetime/dynamicdatetime.popup.js @@ -24,7 +24,6 @@ BI.DynamicDateTimePopup = BI.inherit(BI.Widget, { type: "bi.grid", items: [[{ type: "bi.text_button", - forceCenter: true, cls: "bi-high-light bi-split-top", textHeight: c.buttonHeight - 1, shadow: true, @@ -37,7 +36,6 @@ BI.DynamicDateTimePopup = BI.inherit(BI.Widget, { }] }, { type: "bi.text_button", - forceCenter: true, cls: "bi-split-left bi-split-right bi-high-light bi-split-top", textHeight: c.buttonHeight - 1, shadow: true, @@ -53,7 +51,6 @@ BI.DynamicDateTimePopup = BI.inherit(BI.Widget, { }] }, { type: "bi.text_button", - forceCenter: true, cls: "bi-high-light bi-split-top", textHeight: c.buttonHeight - 1, shadow: true, diff --git a/src/widget/time/datetime.popup.js b/src/widget/time/datetime.popup.js index adc18925b..39c5e753d 100644 --- a/src/widget/time/datetime.popup.js +++ b/src/widget/time/datetime.popup.js @@ -28,7 +28,6 @@ type: "bi.grid", items: [[{ type: "bi.text_button", - forceCenter: true, cls: "bi-high-light bi-split-top", shadow: true, text: BI.i18nText("BI-Basic_Clears"), @@ -40,7 +39,6 @@ }] }, { type: "bi.text_button", - forceCenter: true, cls: "bi-split-left bi-split-right bi-high-light bi-split-top", shadow: true, text: BI.i18nText("BI-Basic_Now"), @@ -52,7 +50,6 @@ }] }, { type: "bi.text_button", - forceCenter: true, cls: "bi-high-light bi-split-top", shadow: true, text: BI.i18nText("BI-Basic_OK"), diff --git a/src/widget/year/popup.year.js b/src/widget/year/popup.year.js index 99c358c18..032012018 100644 --- a/src/widget/year/popup.year.js +++ b/src/widget/year/popup.year.js @@ -32,7 +32,6 @@ BI.DynamicYearPopup = BI.inherit(BI.Widget, { type: "bi.grid", items: [[{ type: "bi.text_button", - forceCenter: true, cls: "bi-split-top bi-high-light", textHeight: c.buttonHeight - 1, shadow: true, @@ -45,7 +44,6 @@ BI.DynamicYearPopup = BI.inherit(BI.Widget, { }] }, { type: "bi.text_button", - forceCenter: true, textHeight: c.buttonHeight - 1, cls: "bi-split-left bi-split-right bi-high-light bi-split-top", shadow: true, @@ -61,7 +59,6 @@ BI.DynamicYearPopup = BI.inherit(BI.Widget, { }] }, { type: "bi.text_button", - forceCenter: true, cls: "bi-split-top bi-high-light", textHeight: c.buttonHeight - 1, shadow: true, diff --git a/src/widget/yearmonth/popup.yearmonth.js b/src/widget/yearmonth/popup.yearmonth.js index d3f8fae00..0f4d2c81e 100644 --- a/src/widget/yearmonth/popup.yearmonth.js +++ b/src/widget/yearmonth/popup.yearmonth.js @@ -32,7 +32,6 @@ BI.DynamicYearMonthPopup = BI.inherit(BI.Widget, { type: "bi.grid", items: [[{ type: "bi.text_button", - forceCenter: true, cls: "bi-split-top bi-high-light", textHeight: c.buttonHeight - 1, shadow: true, @@ -45,7 +44,6 @@ BI.DynamicYearMonthPopup = BI.inherit(BI.Widget, { }] }, { type: "bi.text_button", - forceCenter: true, cls: "bi-split-left bi-split-right bi-high-light bi-split-top", textHeight: c.buttonHeight - 1, shadow: true, @@ -61,7 +59,6 @@ BI.DynamicYearMonthPopup = BI.inherit(BI.Widget, { }] }, { type: "bi.text_button", - forceCenter: true, cls: "bi-split-top bi-high-light", textHeight: c.buttonHeight - 1, shadow: true, diff --git a/src/widget/yearquarter/popup.yearquarter.js b/src/widget/yearquarter/popup.yearquarter.js index 9da41412f..51a2b42b3 100644 --- a/src/widget/yearquarter/popup.yearquarter.js +++ b/src/widget/yearquarter/popup.yearquarter.js @@ -25,7 +25,6 @@ BI.DynamicYearQuarterPopup = BI.inherit(BI.Widget, { type: "bi.grid", items: [[{ type: "bi.text_button", - forceCenter: true, cls: "bi-split-top bi-high-light", shadow: true, textHeight: c.buttonHeight - 1, @@ -38,7 +37,6 @@ BI.DynamicYearQuarterPopup = BI.inherit(BI.Widget, { }] }, { type: "bi.text_button", - forceCenter: true, cls: "bi-split-left bi-split-right bi-high-light bi-split-top", textHeight: c.buttonHeight - 1, shadow: true, @@ -54,7 +52,6 @@ BI.DynamicYearQuarterPopup = BI.inherit(BI.Widget, { }] }, { type: "bi.text_button", - forceCenter: true, cls: "bi-split-top bi-high-light", shadow: true, textHeight: c.buttonHeight - 1,