0

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

});

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

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

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

4

1 回答 1

2

使用 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;
}
于 2013-10-16T16:09:01.260 回答