dojo之Button篇

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>

原文链接：https://www.f2er.com/dojo/291290.html

猜你在找的Dojo相关文章