1、设计关键 （1）设置Button背景图片 （2）设计Button点击事件 2、设计步骤 （1） 设置Button背景图片 A、样式设置 .btnIcon{ width:30px; height:32px; background:url("../images/search.png") center center no-r
1、设计关键
（1）设置Button背景图片
（2）设计Button点击事件
2、设计步骤
（1）设置Button背景图片
A、样式设置
.btnIcon{
width:30px;
height:32px;
background:url("../images/search.png") center center no-repeat;
}
B、样式引入
data-dojo-props="iconClass:'btnIcon'"
（2） 设计Button点击事件
<script type="dojo/on" data-dojo-event="click" data-dojo-args="evt">
require(["dojo/dom"], function(dom){
dom.byId("content").innerHTML += "查询! ";
});
</script>
3、设计结果
（1）初始化时，运行如图所示：
（2）点击“查询”按钮后，出现
4、附录
源码：
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Button</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="../script/dojoroot/dijit/themes/tundra/tundra.css"/>
<script type="text/javascript" src="../script/dojoroot/dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
<style type="text/css">
body{
width:80%;
height:100%;
font-size:12px;
text-align:center;
}
.btnIcon{
width:30px;
height:32px;
background:url("../images/search.png") center center no-repeat;
}
</style>
<script type="text/javascript">
</script>
</head>
<body class="tundra">
<button data-dojo-type="dijit/form/Button" id="myBtn" data-dojo-id="myBtn" data-dojo-props="iconClass:'btnIcon'" type="button">查询
<script type="dojo/on" data-dojo-event="click" data-dojo-args="evt">
require(["dojo/dom"], function(dom){
dom.byId("content").innerHTML += "查询! ";
});
</script>
</button>
<div id="content"></div>
</body>
</html>