Javascript Dijit路径错误_Javascript_Html_Dojo_Dijit.form

Javascript Dijit路径错误

javascript html dojo

Javascript Dijit路径错误,javascript,html,dojo,dijit.form,Javascript,Html,Dojo,Dijit.form,我对Dijit课程有问题，他们只是不想工作。我的代码并没有在按钮周围创建表格，这个按钮并不像应该的那个样可爱。可能是路径问题，但我不确定。我收到这个错误：“未定义属性值（dijit/layout/TabContainer）。”按钮附近。我的文件与dojo、dijit、dojox位于同一文件夹中它应该是这样的：这是我的代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8">

我对Dijit课程有问题，他们只是不想工作。我的代码并没有在按钮周围创建表格，这个按钮并不像应该的那个样可爱。可能是路径问题，但我不确定。我收到这个错误：“未定义属性值（dijit/layout/TabContainer）。”按钮附近。我的文件与dojo、dijit、dojox位于同一文件夹中

它应该是这样的：

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
    <link rel="stylesheet" href="dijit/themes/claro/claro.css">
    <script src="dojo/dojo.js" data-dojo-config="async: true"></script>

    <script type="text/javascript">
        require([
            "dijit/form/Button",
            "dijit/layout/TabContainer",
            "dijit/layout/ContentPane",
            "dojo/domReady!"
        ], function(Button, TabContainer, ContentPane){
            var tc = new TabContainer({
                    style: {
                        height: "200px",
                        width: "400px"
                    },
                    id: "tc"
                }),
                atab = new ContentPane({
                    title: "A Tab",
                    closable: false,
                    id: "atab"
                }),
                myButton = new Button({
                    label: "Click Me!",
                    id: "myButton"
                });
            atab.addChild(myButton);
            tc.addChild(atab);
            tc.startup();
        });
</script>
</head>
<body class="claro">

    <div id="tc" data-dojo-type="dijit/layout/TabContainer"
            data-dojo-props="style: { height: '200px', width: '400px' }">
        <div id="atab" data-dojo-type="dojo/dijit/layout/ContentPane"
                data-dojo-props="title: 'A Tab', closable: false">
            <button type="button" id="myButton"
                    data-dojo-type="dijit/form/Button">
                <span>Click Me!</span>
            </button>
        </div>
    </div>
</body>
</html>


教程：你好，Dojo！
要求([
“dijit/form/Button”，
“dijit/layout/TabContainer”，
“dijit/layout/ContentPane”，
“dojo/domReady！”
]，函数（按钮、选项卡容器、内容窗格）{
var tc=新标签容器({
风格：{
高度：“200px”，
宽度：“400px”
},
id:“tc”
}),
atab=新内容窗格({
标题：“标签”，
可关闭：错误，
id:“atab”
}),
myButton=新按钮({
标签：“点击我！”，
id:“我的按钮”
});
atab.addChild（myButton）；
tc.addChild（atab）；
tc.startup（）；
});
点击我！

您提供的示例使用了两种不同的方式向页面添加DIJIT，但实际上并没有遵循这两种方式中的任何一种

Dijit有两种实例化小部件的机制：编程式和声明式。要使用编程方法，请创建小部件并使用JavaScript将其添加到页面中。小部件是在示例的require回调中创建的，但它们从未添加到页面中。要添加它们，请使用

tc.placeAt（document.body）将选项卡容器放置在文档中在tc.startup（）之前调用。（placeAt
将接受任何DOM节点或节点ID。）
要使用声明式方法，请创建DOM结构并用小部件类型标记它，然后告诉Dojo的解析器解析DOM。该示例设置了DOM结构，但从未指示Dojo对其进行解析，因此从未创建DIJIT。要完成声明式方法，可以执行以下两项操作之一：
1） 完全删除JS代码，并将parseOnLoad:true
属性添加到datadojoconfig
属性中
<script src="dojo/dojo.js" data-dojo-config="async: true; parseOnLoad: true"></script>`

在任何情况下，只应使用一种方法来添加小部件——编程或声明——但不能同时使用这两种方法
require([ 'dojo/parser', 'dojo/domReady!' ], function (parser) {
    parser.parse();
});