我对 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();
});
我似乎无法弄清楚我在这里做错了什么。特别是:
- 为什么图标不显示？
- 是什么导致出现黑点？
- 为什么即使 showLabel 设置为 false，标签仍然显示？
- 为什么标签不在按钮内？
注意:我很乐意展示图片来说明我正在得到什么以及我想要得到什么，但我还没有足够的声誉。
最佳答案
使用 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/