我对Dojo相对较新,并试图抓住dijits。在这里查阅了Dojo的dijit / form / Button小部件的文档之后:
http://dojotoolkit.org/reference-guide/1.9/dijit/form/Button.html
我尝试创建一个只显示图标的按钮(showLabel:false)。这个尝试可以在这个小提琴中看到:
http://jsfiddle.net/msweeney/23Mxh/
或从代码组装:
<body>
<button type="button" id="testButton"></button>
</body>
.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;
}
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();
});
我似乎无法弄清楚我在这里做错了什么。特别是:
注意:我很乐意展示图片来说明我得到了什么以及我想要得到什么,但我还没有足够的声誉。
答案 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;
}