zoukankan      html  css  js  c++  java
  • 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>
    


  • 相关阅读:
    RHEL7 安装Docker-CE
    Django2.2 Vue 前后端分离 无法访问Cookie
    Vue error: Parsing error: Unexpected token
    Python Warning
    Http post 接收 html .netcore
    Echart 中国地图
    CKplayer 视频播放插件
    (转)解决windows10下无法安装.net framework 3.5,错误代码0x800F081F
    第1章 信息化和信息系统
    .net core 添加 swagger
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315482.html
Copyright © 2011-2022 走看看