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

Dijit button show icon but not label programatically

本文关键字：显示 编程 方式 标签 按钮 显示图 图标 Dijit      更新时间：2023-09-26

我对Dojo相对较新，并试图掌握dijits的窍门。在查阅了 Dojo 的 dijit/form/Button widget 的文档后：

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

我试图创建一个仅显示图标的按钮（显示标签：假）。这种尝试可以从这把小提琴中看到：

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();
});
我

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

  1. 为什么图标不显示？
  2. 是什么原因导致黑点出现？
  3. 为什么即使将 showLabel 设置为 false，标签仍然显示？
  4. 为什么标签不在按钮内？

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

使用 dijit widgets 时，需要包含一个主题 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;
}
相关文章：