Пограничный контейнер не работает так, как ожидалось в додзё

Я пытаюсь базовый пример bordercontainer в Dojo и ниже 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>
Источник

2 ответа

Я не знаю, правильно ли загружается ваш файл 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/

Источник

Правильно ли вы скачали и поместили все необходимые папки dojo dijit dojox? И затем, вы можете включить CSS локально:

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

Я видел, что код работает без проблем, если вы добавите этот код:

    // create a ContentPane as the Top pane in the BorderContainer
    var cp0 = new ContentPane({
        region: "top",
        content: "This is The Top!"
    });
    bc.addChild(cp0);

Вы можете видеть, что cp0 ContentPane помещается сверху без каких-либо проблем... Я думаю, вы хотите увидеть границы (и, возможно, цвет фона), чтобы визуализировать область?

Источник
Другие вопросы по тегам