Question

我正在尝试dojo中的bordercontainer的基本示例，下面是它的html代码，但它没有显示所需的输出。任何人都可以告诉我这里我做错了什么。这个示例代码我只从dojo教程中获取，而且我在firebug中也没有收到任何错误。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ICN Layout</title>

</head>
<body>
  <!-- load Dojo -->
  <script>dojoConfig = {parseOnLoad: true}</script>
  <script src="dojo/dojo.js">
  </script>
  <script>
   require([
   "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
   "dojo/domReady!"
   ], function(BorderContainer, ContentPane){
   // create a BorderContainer as the top widget in the hierarchy
   var bc = new BorderContainer({
    style: "height: 300px; width: 500px;"
   });

   // create a ContentPane as the left pane in the BorderContainer
   var cp1 = new ContentPane({
    region: "left",
    style: "width: 100px",
    content: "hello world"
   });
   bc.addChild(cp1);

   // create a ContentPane as the center pane in the BorderContainer
   var cp2 = new ContentPane({
    region: "center",
    content: "how are you?"
   });
   bc.addChild(cp2);

   // put the top level widget into the document, and then call startup()
   bc.placeAt(document.body);
   bc.startup();
   });
  </script>
</body>
</html>

Answer 1

我不知道您的dojo / dojo.js文件是否正确加载，但我没有在您的代码中看到所需的dojo css文件。确保包含（根据您使用的主题）。例如：

<link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css'>

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

以下是两个显示代码正常工作的工作示例：

笔：http://codepen.io/kyledodge/pen/RPVjgY

小提琴：http://jsfiddle.net/6v0x0jue/2/

Answer 2

您是否已正确下载并放入所有必需的dojo dijit dojox文件夹？然后，您可以在本地包含css：

Memento

如果您添加此代码，我看到代码正常运行：

<link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen">
<link rel="stylesheet" href="dojo/resources/dojo.css">

你可以看到cp0 ContentPane被置于Top而没有任何问题...... 我想你想看到边界（也许是背景颜色）可视化区域？

边框容器在dojo中不起作用

2 个答案: