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


  • 相关阅读:
    qt教程
    linux shell 教程
    CMakeList.txt学习
    tx2上直接编译带contrib cuda的opencv
    tx2 opencv交叉编译后的对应文件的放置位置
    opencv4.1.0 交叉编译遇到的问题
    docker 学习
    c++ 类注意点
    数据库整理(五)数据库编程 触发器 事务 过程
    数据库整理(四)数据库安全性与完整性
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315482.html
Copyright © 2020-2023  润新知