个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-02 18:14:40 26 4
gpt4 key购买 nike

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

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

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

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 小部件时，需要包含主题 css 文件(如 claro.css )并在 body 标签上设置 class 属性

我更新了您的jsfiddle带有额外的 css 资源和 body 标记上的 class="claro"属性。

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;
}

关于javascript - Dijit 按钮以编程方式显示图标但不显示标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19407984/

26 4 0
文章推荐： javascript - 实时事件轮询
文章推荐： rust - 字符串文字是不可变的吗？
文章推荐： python - 为什么在python中使用抽象类时要声明metaclass=abc.ABCMeta？
文章推荐： Javascript 对象数组 - 自杀式破坏