• dojo之Button篇


    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>
    


  • 相关阅读:
    最短母串
    noip模拟测试7
    linux下的对拍程序
    noip模拟测试6
    QWidget 前后位置设定
    C++编程规范_第5~13条 设计风格
    random /timer/sort 示例代码
    资料准备
    【转】三维动态数组 分配与释放
    批量修改文件名
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315482.html
Copyright © 2020-2023  润新知