Dojo学习笔记（十一）：Dojo布局—

                         
<!DOCTYPE HTML>
<html>
<head>
    
<meta charset=
"UTF-8"
>
    
<link rel=
"stylesheet"
href=
"dijit/themes/soria/soria.css"
>
    
<style type=
"text/css"
>
        
html,body{ 
            
height: 
100
%;
            
margin: 
0
;
            
overflow: hidden;
            
padding: 
0
;
        
}
        
#appLayout{ 
            
height: 
100
%;
        
}
        
#leftCol{ 
            
width: 120px;
        
}
        
.claro .demoLayout .edgePanel{ 
            
background-color: #d0e9fc;
        
}
    
</style>
    
<script type=
"text/javascript"
src=
"dojo/dojo.js"
djConfig=
"parseOnLoad:true"
></script>
    
<script type=
"text/javascript"
>
    
</script>
    
<title>GridContainer学习</title>
</head>
<body 
class
=
"soria"
>
<div 
class
=
"demoLayout"
style=
"height: 300px; width: 300px"
data-dojo-type=
"dijit.layout.BorderContainer"
data-dojo-props=
"design: 'headline'"
>
    
<div 
class
=
"demoLayout"
style=
"height: 50%"
data-dojo-type=
"dijit.layout.BorderContainer"
data-dojo-props=
"region: 'top', splitter: true, design: 'headline'"
>
        
<div 
class
=
"centerPanel"
data-dojo-type=
"dijit.layout.ContentPane"
data-dojo-props=
"region: 'center'"
>center</div>
        
<div 
class
=
"edgePanel"
data-dojo-type=
"dijit.layout.ContentPane"
data-dojo-props=
"region: 'bottom'"
>bottom</div>
    
</div>
    
<div 
class
=
"centerPanel"
data-dojo-type=
"dijit.layout.ContentPane"
data-dojo-props=
"region: 'center'"
>center</div>
    
<div 
class
=
"edgePanel"
data-dojo-type=
"dijit.layout.ContentPane"
data-dojo-props=
"splitter: true, region: 'left'"
>left</div>
    
<div 
class
=
"demoLayout"
style=
"width: 50%"
data-dojo-type=
"dijit.layout.BorderContainer"
data-dojo-props=
"region: 'right', design: 'headline'"
>
        
<div 
class
=
"centerPanel"
data-dojo-type=
"dijit.layout.ContentPane"
data-dojo-props=
"region: 'center'"
>center</div>
        
<div 
class
=
"edgePanel"
data-dojo-type=
"dijit.layout.ContentPane"
data-dojo-props=
"region: 'left'"
>left</div>
    
</div>
    
<div 
class
=
"edgePanel"
data-dojo-type=
"dijit.layout.ContentPane"
data-dojo-props=
"splitter: true, region: 'bottom'"
>bottom</div>
</div>
<!-- load dojo and provide config via data attribute -->
<script src=
"dojo/dojo.js"
data-dojo-config=
"async:true, parseOnLoad:true"
></script>
<script>
    
require([
"dijit/layout/BorderContainer"
, 
"dijit/layout/ContentPane"
, 
"dojo/parser"
]);
</script>
</body>
</html>
        
      
输出：
本文转自stock0991 51CTO博客，原文链接：http://blog.51cto.com/qing0991/1565113，如需转载请自行联系原作者