dojo之Button篇

来源：互联网发布：奇异矩阵特征值分解编辑：程序博客网时间：2024/06/07 13:45

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 | Templatesand 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>

1 0