Question

我正在尝试在现有应用程序中使用dojo实现选项卡控件。以下是我所做的一些事情：

<head> 
.....
<script type="text/javascript" src="js/dojo/dojo/dojo.js')}"></script>
<script type="text/javascript">
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
</script>
....
</head>
<body>
....
<div data-dojo-type="dijit.layout.TabContainer" style="width: 400px; height: 100px;" tabStrip="true">
    <div data-dojo-type="dijit.layout.ContentPane" title="title1" selected="true">
 ...content...
</div>
<div data-dojo-type="dijit.layout.ContentPane" title="title2">
...content...
</div>
</div>
....
</body>

js正确加载（firebug没有显示错误）。

当我浏览页面时，我看到所有内容div都被绘制，好像根本没有格式化，它们只是常规div。

我的第一个猜测是，我打算包含一个css文件。我发现所有的例子都是工作链接到一个非常复杂的css文件，该文件执行了很多不适合我的应用程序的东西。我无法找到任何关于应该包含的CSS的解释，所以我怀疑这个猜测是错误的。

有人可以指出我的错误，或指出我的简明和最新的例子吗？

Answer 1

是否已创建小部件？在浏览器的控制台中运行dijit.registry将显示已创建的小部件。

如果尚未创建它们，则需要配置dojo来解析html。

<script type="text/javascript" src="dojo/dojo.js"
  data-dojo-config="parseOnLoad: true"></script>

Dojo使用主题来为小部件提供外观。要完成此任务，您应该添加以下css：

<link type="text/css" rel="stylesheet" href="dijit/themes/dijit.css" />
<link type="text/css" rel="stylesheet" href="dijit/themes/claro/claro.css" />

并将claro类添加到body节点：

<body class="claro"/>

dojo1.7选项卡显示为普通div

1 个答案: