1、Nested Layout（嵌套布局），The layout region panel contains another layout or other components（这种布局区域面板包含另一个布局或者其它组件）.<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Nested Layout - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script></head><body> <h2>Nested Layout</h2> <p>The layout region panel contains another layout or other components.</p> <div style="margin:20px 0;"></div> <div class="easyui-layout" style="width:700px;height:350px;"> <div data-options="region:'north'" style="height:50px"></div> <div data-options="region:'south',split:true" style="height:50px;"></div> <div data-options="region:'east',split:true" title="East" style="width:180px;"></div> <div data-options="region:'west',split:true" title="West" style="width:100px;"></div> <div data-options="region:'center',iconCls:'icon-ok'" title="Center"> <div class="easyui-layout" data-options="fit:true"> <div data-options="region:'north',split:true,border:false" style="height:50px"></div> <div data-options="region:'west',split:true,border:false" style="width:100px"></div> <div data-options="region:'center',border:false"></div> </div> </div> </div></body></html>
2、Nested Layout（嵌套布局），运行效果如下图所示。
3、No collapsible button in Layout钱砀渝测（没有折叠按钮的布局），The layout reg足毂忍珩ion panel has no collapsible button.<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>No collapsible button in Layout - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script></head><body> <h2>No collapsible button in Layout</h2> <p>The layout region panel has no collapsible button.</p> <div style="margin:20px 0;"></div> <div class="easyui-layout" style="width:700px;height:350px;"> <div data-options="region:'north'" style="height:50px"></div> <div data-options="region:'south',split:true" style="height:50px;"></div> <div data-options="region:'east',split:true,title:'East',collapsible:false" style="width:250px;"> <table id="tt" class="easyui-propertygrid" data-options=" url: 'propertygrid_data1.json', method: 'get', showGroup: true, fit: true, border: false "> </table> </div> <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok',href:'_content.html'" style="padding:10px"> </div> </div></body></html>
4、No collapsible button in Layout（没有折叠按钮的布局），运行效果如下图所示。
5、Auto Height for La鲻戟缒男yout（自适应高度布局），This example shows how to auto adjust layout height after dynamically adding items.<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Auto Height for Layout - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script></head><body> <h2>Auto Height for Layout</h2> <p>This example shows how to auto adjust layout height after dynamically adding items.</p> <div style="margin:20px 0;"> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="addItem()">Add Item</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="removeItem()">Remove Item</a> </div> <div id="cc" style="width:700px;height:350px;"> <div data-options="region:'north'" style="height:50px"></div> <div data-options="region:'south'" style="height:50px;"></div> <div data-options="region:'west'" style="width:150px;"></div> <div data-options="region:'center'" style="padding:20px"> <p>Panel Content.</p> <p>Panel Content.</p> <p>Panel Content.</p> <p>Panel Content.</p> <p>Panel Content.</p> </div> </div> <script type="text/javascript"> $(function(){ $('#cc').layout(); setHeight(); }); function addItem(){ $('#cc').layout('panel','center').append('<p>More Panel Content.</p>'); setHeight(); } function removeItem(){ $('#cc').layout('panel','center').find('p:last').remove(); setHeight(); } function setHeight(){ var c = $('#cc'); var p = c.layout('panel','center'); // get the center panel var oldHeight = p.panel('panel').outerHeight(); p.panel('resize', {height:'auto'}); var newHeight = p.panel('panel').outerHeight(); c.layout('resize',{ height: (c.height() + newHeight - oldHeight) }); } </script></body></html>
6、Auto Height for Layout（自适应高度布局），运行效果如下图所示。
7、Fluid Layout（流式布局），Percentage width of region panel in a layout.<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Fluid Layout - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script></head><body> <h2>Fluid Layout</h2> <p>Percentage width of region panel in a layout.</p> <div style="margin:20px 0;"></div> <div class="easyui-layout" style="width:700px;height:350px;"> <div id="p" data-options="region:'west'" title="West" style="width:30%;padding:10px"> <p>width: 30%</p> </div> <div data-options="region:'center'" title="Center"> </div> </div></body></html>
8、Fluid Layout（流式布局），运行效果如下图所示。
