Dijit 按钮显示图标但不以编程方式显示标签答案

【问题标题】：Dijit button show icon but not label programaticallyDijit 按钮显示图标但不以编程方式显示标签
【发布时间】：2013-10-16 15:50:03
【问题描述】：

我对 Dojo 比较陌生，并试图掌握 dijits 的窍门。在此处查阅 Dojo 的 dijit/form/Button 小部件的文档后：

http://dojotoolkit.org/reference-guide/1.9/dijit/form/Button.html

我试图创建一个仅显示图标的按钮 (showLabel: false)。这种尝试可以在这个小提琴中看到：

http://jsfiddle.net/msweeney/23Mxh/

或从代码组装：

HTML

<body>
  <button type="button" id="testButton"></button>
</body>

CSS

.plusIcon {
    background-image: url("http://png-2.findicons.com/files/icons/2152/snowish/128/gtk_add.png");
    background-position: center;
    background-repeat: no-repeat;
    height: 19px;
    width: 19px;
}

JS

require(["dojo/parser", "dijit/form/Button", "dojo/domReady!"],

function (parser, Button) {
    parser.parse();

    var testButton = new Button({
        label: "test button",
        showLabel: false,
        iconClass: "plusIcon",
        onClick: function () {
            alert("test button clicked")
        }
    }, "testButton");
    testButton.startup();

});

我似乎无法弄清楚我在这里做错了什么。特别是：

为什么图标不显示？
出现黑点的原因是什么？
为什么即使 showLabel 设置为 false，标签仍然显示？
为什么按钮内没有标签？

注意：我很乐意展示图片来说明我正在得到什么以及我想得到什么，但我还没有足够的声誉。

【问题讨论】：

标签： javascript button dojo imagebutton

【解决方案1】：

使用dijit小部件时，需要包含一个主题css文件（如claro.css）并在body标签上设置class属性

我用额外的 css 资源和 body 标签上的 class="claro" 属性更新了你的 jsfiddle。

html:

<body class="claro">
    <button type="button" id="testButton"></button>
</body>

js:

require(["dojo/parser", "dijit/form/Button", "dojo/domReady!"],

function (parser, Button) {
    var testButton = new Button({
        label: "test button",
        showLabel: false,
        iconClass: "plusIcon",
        onClick: function () {
            alert("test button clicked")
        }
    }, "testButton");
    testButton.startup();

});

css:

.plusIcon {
    background-image: url("http://png-2.findicons.com/files/icons/2152/snowish/128/gtk_add.png");
    background-position: center;
    background-repeat: no-repeat;
    height: 19px;
    width: 19px;
}

【讨论】：

我认为使用完全声明式 (data-dojo-type) 或完全编程式（实例化小部件，然后使用 addChild(otherWidget) 方法）可能会更好。
我的印象是我要么需要由 HTML 生成 DOM 元素，要么使用 dom-construct 来创建我自己的。我计划仅将 HTML 用于最基本的结构，然后以编程方式填写所有 Dojo 内容。你为什么要提倡其中一种？我一直在寻找对此的良好分析。