Easy UI has two ways of page layout: Tag creation layout and global layout, tag creation layout is set class= "Easyui-layout" in div tag, global layout is set class= "Easyui-layout" in body tag. Create a global layout
Set class= "Easyui-layout" in the Body tab. Lay out the page
<body class= "Easyui-layout" >
<div data-options= "region: ' North '" style= "height:80px;padding:20px" >
</div>
<div data-options= "region: ' South '" style= "height:30px;padding:6px" >
XXX Technology Co., ltd All rights reserved
</div>
<div data-options= "region: ' West ', title: ' Navigator ', split:true" style= " width:200px;padding:10px ">
<ul id=" Menutree "class=" Easyui-tree "></ul>
</div>
<div data-options= "region: ' Center '" >
<div id= "Maintabs" class= "Easyui-tabs" data-options= "Fit:true" >
</div>
</div>
</body>
The values for region in the Data-option attribute are North, south, west, center, and east, respectively, corresponding to the upper, lower, left, middle, and right
Title sets the name of each module
When split is true, indicates that the module has a stretch that changes its size
3. Generally add a tree menu to the left module, and the middle area is dynamically adding a tab when clicking on the left tree menu, followed by a description.