2012-01-25 3 views
2

누군가가 dojo 레이아웃 작업 예제를 게시 할 수 있습니까? 나는 아래 html 파일을 가지고있다. 레이아웃이 전혀 보이지 않는다. 웹 애플리케이션의 루트에있는 모든 도장 관련 파일이있다. [Google CDN을 사용해도 도움이되지 않지만] 페이지 내용이 레이아웃없이 표시된다. . 인터넷에있는 예제를 붙여 넣었지만 성공하지 못했습니다. 귀하의 도움에 감사드립니다. 미리 감사드립니다.dojo 레이아웃이 작동하지 않습니다.

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Demo: Layout with Dijit</title> 
<style type="text/css"> 
@import "dojoroot/dijit/themes/tundra/tundra.css"; 

@import "dojoroot/dojo/resources/dojo.css"; 

@import "dojoroot/dijit/themes/tundra/claro.css"; 
</style> 
<script type="text/javascript" src="dojoroot/dojo/dojo.js" 
    data-dojo-config="parseOnLoad: false , isDebug: true"></script> 

<script> 
    dojo.require("dojo.parser"); 
    dojo.require("dijit.layout.BorderContainer"); 
    dojo.require("dijit.layout.TabContainer"); 
    dojo.require("dijit.layout.ContentPane"); 
</script> 

</head> 

<body class="claro"> 
    <div id="appLayout" class="demoLayout" 
     data-dojo-type="dijit.layout.BorderContainer" 
     data-dojo-props="design: 'headline'"> 
     <div class="centerPanel" data-dojo-type="dijit.layout.ContentPane" 
      data-dojo-props="region: 'center'"> 
      <div> 
       <h4>Group 1 Content</h4> 
       <p>para 1</p> 
      </div> 
      <div> 
       <h4>h4 para 2</h4> 
      </div> 
      <div> 
       <h4>h4 para 3</h4> 
      </div> 
     </div> 
     <div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" 
      data-dojo-props="region: 'top'">Header content (top)</div> 
     <div id="leftCol" class="edgePanel" 
      data-dojo-type="dijit.layout.ContentPane" 
      data-dojo-props="region: 'left', splitter: true">Sidebar 
      content (left)</div> 
    </div> 
</body> 
</html> 
+0

parseOnLoad : false를 설정 했으므로 파서를 수동으로 호출하는 것처럼 보이지 않습니다. 그럴까요? – Frode

+0

여기 보셨나요? http://dojotoolkit.org/documentation/tutorials/1.6/dijit_layout/ – Ted

+0

안녕하세요, 답장을 보내 주셔서 감사합니다. 먼저 parseOnLoad를 삽입했습니다. 작동하지 않았는데 parseOnLoad : false를 시도했습니다. 둘 다 작동하지 않습니다. 위의 링크에서 예를 들어 보았습니다 –

답변

4

dojo를 사용하여 문서를 구문 분석해야합니다 (Frode의 설명 참조).

또한 몸에 명시적인 너비와 높이를 지정해야 할 수도 있습니다 (iirc, IE는 그렇지 않으면 접을 것입니다).

+0

진정한 도장의 마스터. 당신의 답장을 읽은 후에, 나는 몸 높이와 너비에 대한 CSS를 배치했다. –

+0

도움이 된 것을 기쁘게 생각합니다! 대답을 확인하는 것을 잊지 마세요! – mtyson

1
<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Demo: Layout with Dijit</title> 

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

<style type="text/css"> 
html, body { 
    height: 100%; 
    margin: 0; 
    overflow: hidden; 
    padding: 0; 
} 

#appLayout { 
    height: 100%; 
} 
#leftCol { 
    width: 14em; 
} 
</style> 

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"  
    data-dojo-config="parseOnLoad: true"> 
    </script> 

<script> 
    dojo.require("dojo.parser"); 
    dojo.require("dijit.layout.BorderContainer"); 
    dojo.require("dijit.layout.TabContainer"); 
    dojo.require("dijit.layout.ContentPane"); 
</script> 

</head> 

<body class="claro"> 
    <div id="appLayout" class="demoLayout" 
     data-dojo-type="dijit.layout.BorderContainer" 
     data-dojo-props="design: 'headline'"> 
     <div class="centerPanel" data-dojo-type="dijit.layout.ContentPane" 
      data-dojo-props="region: 'center'"> 
      <div> 
       <h4>Group 1 Content</h4> 
       <p>para 1</p> 
      </div> 
      <div> 
       <h4>h4 para 2</h4> 
      </div> 
      <div> 
       <h4>h4 para 3</h4> 
      </div> 
     </div> 
     <div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" 
      data-dojo-props="region: 'top'">Header content (top)</div> 
     <div id="leftCol" class="edgePanel" 
      data-dojo-type="dijit.layout.ContentPane" 
      data-dojo-props="region: 'left', splitter: true">Sidebar 
      content (left)</div> 
    </div> 
</body> 
</html> 

위의 코드는 레이아웃을 가져옵니다. 도와 주신 모든 분들께 감사드립니다.

관련 문제