Question

我是dojo的新手，我正在尝试制作带有图像的按钮，但图像没有显示，此外，当单击按钮时，它会正确显示“hi”警告。

“zoom_in.png”图像与html位于同一目录中。萤火虫没有显示任何错误或警告。

更新。感谢ed，我设法通过声明式方法使其工作

<!DOCTYPE html>
<html >
<head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dijit/themes/claro/claro.css">
    <script>dojoConfig = {parseOnLoad: true}</script>
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>    
    <script>require(["dojo/parser", "dijit/form/Button"]);</script>

    <style>
    .zoom_in_icon {
    background-image: url('zoom_in.png');
    height: 25px;
    width: 25px;
    text-align: center;
    background-repeat: no-repeat;
    }
    </style>    
</head>

<body class="claro">
    <button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'zoom_in_icon'" type="button">
    <script type="dojo/on" data-dojo-event="click" data-dojo-args="evt">
        require(["dojo/dom"], function(dom){
            alert( "Thank you! ");
        });
    </script>
</button>
<div id="result2"></div>
</body>
</html>

但是，以编程方式，问题仍然存在

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Button</title>

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"  data-dojo-config="async: true"></script>

<style>
.zoom_in_icon {
    background-image: url('zoom_in.png');
    height: 250px;
    width: 250px;
    text-align: center;
    background-repeat: no-repeat;
}
</style>

<script>
require([
"dijit/form/Button",
"dojo/domReady!"
], 
function(Button) {    
    new Button({
    title: 'Zoom in', iconClass:'zoom_in_icon',
    onClick: function() { alert("hi"); }}, "zoom_in").startup();  
});
</script>
</head>

<body>
     <button  id="zoom_in" type="button"></button>
</body>
</html>

感谢

Answer 1

如果你想以编程方式创建按钮，你需要在新按钮上调用startup（），而你不需要数据-dojo-type =＆＃34; dijit / form / Button＆＃34;或者在html中解析，如果你想以声明方式创建它，你不需要新的按钮，但你需要在html中设置图标。请参阅此处的编程示例： http://dojotoolkit.org/reference-guide/1.10/dijit/form/Button.html

非常基本的道场：按钮不显示图标

1 个答案: