Jqeury easyui layout problem solution

2020-03-30 02:27:42
OfStack

Today, when I was doing the layout with easyui, I encountered a puzzling problem.

Problem: when you write class= "easyui-layout" in a separate div, the layout style does not appear and no errors are reported.

Such as:

 
<span style="font-size:14px;"><body > 
<div class="easyui-layout"> 
<div data-options="region:'north',title:'North Title',split:true" style="height: 100px;"> 
</div> 
<div data-options="region:'south',title:'South Title',split:true" style="height: 100px;"> 
</div> 
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width: 100px;"> 
</div> 
<div data-options="region:'west',title:'West',split:true" style="width: 100px;"> 
</div> 
<div data-options="region:'center',title:'center title'" href="CenterPage.html" style="background: #eee; overflow: hidden;"> 
</div> 
</div> 
</body></span>

Display:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201403/201403241542461.gif? 2014224154316 ">
Solution: when you write class= "easyui-layout" in the body, the problem is solved. And the region attribute cannot be contained by another unrelated div.

Code:

 
<span style="font-size:14px;"><body class="easyui-layout"> 

<div data-options="region:'north',title:'North Title',split:true" style="height: 100px;"> 
</div> 
<div data-options="region:'south',title:'South Title',split:true" style="height: 100px;"> 
</div> 
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width: 100px;"> 
</div> 
<div data-options="region:'west',title:'West',split:true" style="width: 100px;"> 
</div> 
<div data-options="region:'center',title:'center title'" href="CenterPage.html" style="background: #eee; overflow: hidden;"> 
</div> 

</body></span>

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201403/201403241543522.gif? 201422415445 ">
Wondering why?