搞乱了 dijit 中的按钮样式

Question

我刚开始学习道场。下面是代码。

显示三个按钮的代码取自dojo网站上的示例。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>First | dojo</title>
</head>
<body>
    <script>
        var dojoConfig = {
            async: true
        };
    </script>
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    <script>
        require([
            'dojo/dom',
            'dojo/on',
            'dojo/parser',
            'dijit/registry',
            'dijit/form/Button',
            'dojo/domReady'
        ], function (dom, on, parser, registry) {
            var myClick = function(evt) {
                console.log("I was clicked");
            };

            parser.parse();

            on(dom.byId("button1"), "click", myClick);
            on(registry.byId("button2"), "click", myClick);
        });
    </script>

    <h1 id="greeting">Namastey</h1>

    <div>
        <button id="button1" type="button">Button1</button>
        <button id="button2" data-dojo-type="dijit/form/Button" type="button">Button2</button>
        <button id="button3" data-dojo-type="dijit/form/Button" type="button">
            <div>Button3</div>
            <script type="dojo/on" data-dojo-event="click">
                console.log("I was clicked");
            </script>
        </button>
    </div>
</body>
</html>

渲染输出为

谁能解释一下哪里出了问题。我尝试在 google 上搜索，但没有找到任何内容。

此外，我在控制台中没有看到任何错误或警告。

Answer 1

为了简单起见，您忘记导入主题 css 文件，并将主题名称 class 添加到您的 body 标签中，

所以添加：

<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" rel="stylesheet" />
<body class="claro">

请参阅下面的工作片段：

了解有关主题 dojo 的更多信息 here

require([
            'dojo/dom',
            'dojo/on',
            'dojo/parser',
            'dijit/registry',
            'dijit/form/Button',
            'dojo/domReady'
        ], function (dom, on, parser, registry) {
            var myClick = function(evt) {
                console.log("I was clicked");
            };

            parser.parse();

            on(dom.byId("button1"), "click", myClick);
            on(registry.byId("button2"), "click", myClick);
        });

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#accContainer {
  height: 100% !important;
}

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>

<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" rel="stylesheet" />
<script>
  dojoConfig = {
    parseOnLoad: true,
    async: true
  };
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    

<body class="claro">
  <h1 id="greeting">Namastey</h1>

    <div>
        <button id="button1" type="button">Button1</button>
        <button id="button2" data-dojo-type="dijit/form/Button" type="button">Button2</button>
        <button id="button3" data-dojo-type="dijit/form/Button" type="button">
            <div>Button3</div>
            <script type="dojo/on" data-dojo-event="click">
                console.log("I was clicked");
            </script>
        </button>
    </div>
</body>

搞乱了 dijit 中的按钮样式

Messed up styles of buttons in dijit

javascript

dojo

dijit.form