Перепутались стили кнопок в dijit

Я только начал заниматься додзё. Ниже приведен код.

Код для отображения трех кнопок, взятый из примера, показанного на сайте додзё.

<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.info("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.info("I was clicked");
            </script>
        </button>
    </div>
</body>
</html>

Результат рендеринга

Перепутались стили кнопок в dijit

Может кто-нибудь объяснить, что не так. Я пробовал искать в гугле, но ничего не нашел.

Кроме того, я не вижу ошибок или предупреждений в консоли.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
32
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы просто забыть импортировать файл css темы, а также добавить класс имени темы в тег body,

поэтому добавьте:

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

  2. <body class = "claro">

см. ниже рабочий фрагмент:

узнать больше о тематике додзё здесь

require([
            'dojo/dom',
            'dojo/on',
            'dojo/parser',
            'dijit/registry',
            'dijit/form/Button',
            'dojo/domReady'
        ], function (dom, on, parser, registry) {
            var myClick = function(evt) {
                console.info("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.info("I was clicked");
            </script>
        </button>
    </div>
</body>

Означает ли это, что я не могу использовать бутстрап с додзё, если захочу?

Jitendra Kumar 21.07.2019 10:00

нет, есть библиотека, которая реализует boostrap, вот URL, github.com/atoha/dbootstrap

Spring 21.07.2019 12:46

Другие вопросы по теме