dojo dijit中按钮的样式混乱

i86rm4rw 于 2022-12-16 发布在 Dojo

关注(0)|答案(1)|浏览(180)

我刚刚开始学习 dojo 。下面是代码。
显示三个按钮的代码取自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>

渲染输出为

有人能解释一下出了什么问题吗？我试着在谷歌上搜索，但没有找到任何东西。
此外，我在控制台中没有看到任何错误或警告。

dojo

来源：https://stackoverflow.com/questions/57125714/messed-up-styles-of-buttons-in-dijit

1条答案

按热度按时间

ndasle7k1#

为了简单你忘了导入主题css文件，也添加主题名称类到您的身体标记，
因此添加：

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

赞(0）回复(0）举报 2022-12-16

我来回答

dojo dijit中按钮的样式混乱

1条答案

相关问题

热门标签

最新问答