2015-12-15 3 views
0

Я пытаюсь использовать Dojo BorderContainer, и я попытался поместить BorderContainer в тело html. Кажется, BorderContainer не помещает вещи в правильное место.Dojo BorderContainer размещает его содержимое в неправильном положении

Вот код. В принципе, это учебник Dojo Helloword с кодом dojo, замененным примером BorderContainer для Dojo. (Файл является локальным hello.html HTML-файл)

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Tutorial: Hello Dojo!</title> 
</head> 
<body> 
    <h1 id="greeting">Hello</h1> 
    <!-- load Dojo --> 
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" 
      data-dojo-config="async: true"></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: "why am i here?" 
      }); 
      bc.addChild(cp1); 

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

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

И вот что я получил:

Browser screen shot

Обратите внимание, что содержание, которое должно было быть внутри BorderContainer ("почему я я здесь, не доволен. ") выше, чем тег" Hello "h1.

Я использовал функцию проверки элементов Chrome. BorderContainer размещен правильно, но атрибут позиции ContentPane установлен абсолютным по Dojo.

<div class="dijitContentPane dijitBorderContainer-child dijitBorderContainer-dijitContentPane dijitBorderContainerPane dijitAlignCenter" id="dijit_layout_ContentPane_1" widgetid="dijit_layout_ContentPane_1" style="left: 100px; top: 0px; position: absolute; width: 400px; height: 300px;">not happy.</div> 

Код просто скопирован для веб-сайта Dojo, интересно, что может пойти не так. Может ли кто-нибудь помочь?

ответ

0

Вы не включаете файлы cjo dojo (т. Е. Claro.css), и это, скорее всего, почему-то не выглядит правильным.

+0

Это работает, спасибо. – user2533131

Смежные вопросы