2015-12-17 7 views
0

У меня проблемы с классами Dijit, они просто не хотят работать. Мой код не создает кнопку вокруг стола, и эта кнопка не симпатична, как должна быть. Наверное, с путём, но я не уверен. Я получаю эту ошибку: «Неопределенное значение атрибута (dijit/layout/TabContainer)». рядом с кнопками. Мой файл находится в той же папке, что и dojo, dijit, dojox.Ошибка пути Dijit

Вот как это должно выглядеть следующим образом: 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> 

ответ

0

пример вы предоставили применяет два различных способа добавления dijits на страницу, но на самом деле это не происходит ни с одним из них.

У Dijit есть два механизма для создания виджета: программный и декларативный. Чтобы использовать программный подход, создайте виджеты и добавьте их на страницу с помощью JavaScript. Виджеты создаются в требуемом обратном вызове, но они никогда не добавляются на страницу. Чтобы добавить их, поместите контейнер табуляции в документ с помощью вызова tc.placeAt(document.body); до tc.startup();. (placeAt будет принимать любые DOM-узлы или идентификаторы узлов.)

Чтобы использовать декларативный подход, создайте структуру DOM и пометьте его типами виджетов, а затем скажите парсору Dojo на синтаксический анализ DOM. В этом примере создается структура DOM, но никогда не инструктирует Dojo для ее анализа, поэтому dijits никогда не создаются. Чтобы закончить декларативный подход, вы можете сделать одну из двух вещей:

1) полностью удалите код JS и добавьте свойство parseOnLoad:true в атрибут data-dojo-config.

<script src="dojo/dojo.js" data-dojo-config="async: true; parseOnLoad: true"></script>` 

2) LOAD 'додзё/парсер' и вызвать parser.parse() в требуют обратного вызова.

require([ 'dojo/parser', 'dojo/domReady!' ], function (parser) { 
    parser.parse(); 
}); 

В любом случае, следует использовать только один метод для добавления виджетов - либо программно или декларативной - но не оба.

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