数字路径错误
Dijit path error
我对 Dijit 类 有疑问,他们只是不想工作。我的代码没有在按钮周围创建 table 并且这个按钮并不像它应该的那样可爱。可能与路径有关,但我不确定。
我收到此错误:"Undefined attribute value (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>
您提供的示例使用两种不同的方式向页面添加 dijit,但实际上并没有遵循其中任何一种方式。
Dijit 有两种实例化小部件的机制:编程式和声明式。要使用编程方法,请创建小部件并使用 JavaScript 将它们添加到页面。小部件正在示例的 require 回调中创建,但它们从未添加到页面中。要添加它们,请在 tc.startup();
之前使用 tc.placeAt(document.body);
调用将选项卡容器放置在文档中。 (placeAt
将接受任何 DOM 节点或节点 ID。)
要使用声明性方法,请创建 DOM 结构并用小部件类型标记它,然后告诉 Dojo 的解析器解析 DOM。该示例设置了 DOM 结构,但从未指示 Dojo 解析它,因此永远不会创建 dijits。要完成声明式方法,您可以执行以下两项操作之一:
1) 完全删除JS代码并在data-dojo-config
属性中添加parseOnLoad:true
属性。
<script src="dojo/dojo.js" data-dojo-config="async: true; parseOnLoad: true"></script>`
2) 加载'dojo/parser'并在require回调中调用parser.parse()
。
require([ 'dojo/parser', 'dojo/domReady!' ], function (parser) {
parser.parse();
});
在任何情况下,只应使用一种添加小部件的方法——编程或声明——但不能同时使用这两种方法。
我对 Dijit 类 有疑问,他们只是不想工作。我的代码没有在按钮周围创建 table 并且这个按钮并不像它应该的那样可爱。可能与路径有关,但我不确定。 我收到此错误:"Undefined attribute value (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>
您提供的示例使用两种不同的方式向页面添加 dijit,但实际上并没有遵循其中任何一种方式。
Dijit 有两种实例化小部件的机制:编程式和声明式。要使用编程方法,请创建小部件并使用 JavaScript 将它们添加到页面。小部件正在示例的 require 回调中创建,但它们从未添加到页面中。要添加它们,请在 tc.startup();
之前使用 tc.placeAt(document.body);
调用将选项卡容器放置在文档中。 (placeAt
将接受任何 DOM 节点或节点 ID。)
要使用声明性方法,请创建 DOM 结构并用小部件类型标记它,然后告诉 Dojo 的解析器解析 DOM。该示例设置了 DOM 结构,但从未指示 Dojo 解析它,因此永远不会创建 dijits。要完成声明式方法,您可以执行以下两项操作之一:
1) 完全删除JS代码并在data-dojo-config
属性中添加parseOnLoad:true
属性。
<script src="dojo/dojo.js" data-dojo-config="async: true; parseOnLoad: true"></script>`
2) 加载'dojo/parser'并在require回调中调用parser.parse()
。
require([ 'dojo/parser', 'dojo/domReady!' ], function (parser) {
parser.parse();
});
在任何情况下,只应使用一种添加小部件的方法——编程或声明——但不能同时使用这两种方法。