1、设计关键
(1)设置Button背景图片
(2)设计Button点击事件
2、设计步骤
(1)设置Button背景图片
A、样式设置
.btnIcon{
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{
80%;
height:100%;
font-size:12px;
text-align:center;
}
.btnIcon{
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>