Dijit按钮显示图标但不是以编程方式标记

时间:2013-10-16 15:50:04

标签: javascript button dojo imagebutton

我对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. 为什么按钮内没有标签?
  5. 注意:我很乐意展示图片来说明我得到了什么以及我想要得到什么,但我还没有足够的声誉。

1 个答案:

答案 0 :(得分: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;
}
相关问题