Question

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

这应该是这样的： http://i.stack.imgur.com/HcKuJ.png

这是我的代码：

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

Answer 1

您提供的示例是使用两种不同的方式将dijit添加到页面中，但它实际上并没有完成其中任何一项。

Dijit有两种实例化小部件的机制：程序化和声明性。要使用编程方法，请创建窗口小部件并使用JavaScript将它们添加到页面。窗口小部件正在示例中创建，需要回调，但它们永远不会添加到页面中。要添加它们，请在tc.placeAt(document.body);之前使用tc.startup();调用将标签容器放入文档中。（placeAt将接受任何DOM节点或节点ID。）

要使用声明性方法，请创建DOM结构并使用窗口小部件类型标记它，然后告诉Dojo的解析器解析DOM。该示例设置DOM结构，但从不指示Dojo解析它，因此永远不会创建dijit。要完成声明性方法，您可以执行以下两项操作之一：

1）完全删除JS代码并在parseOnLoad:true属性中添加data-dojo-config属性。

<script src="dojo/dojo.js" data-dojo-config="async: true; parseOnLoad: true"></script>`

2）加载＆＃39; dojo / parser＆＃39;并在require回调中调用parser.parse()。

require([ 'dojo/parser', 'dojo/domReady!' ], function (parser) {
    parser.parse();
});

在任何情况下，只应使用一种添加小部件的方法 - 程序化或声明性 - 但不能同时使用。

Dijit路径错误

1 个答案: