1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Basic Layout - jQuery EasyUI Demo</title> 6 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> 7 <link rel="stylesheet" type="text/css" href=http://www.jeasyui.com/easyui/themes/icon.css"> 8 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css"> 9 <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery-1.8.0.min.js"></script> 10 <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> 11 </head> 12 <body> 13 <h2>Basic Layout</h2> 14 <div class="demo-info"> 15 <div class="demo-tip icon-tip"></div> 16 <div>The layout contains north,south,west,east and center regions.</div> 17 </div> 18 <div style="margin:10px 0;"></div> 19 <div class="easyui-layout" style="700px;height:350px;"> 20 <div data-options="region:'north'" style="height:50px"></div> 21 <div data-options="region:'south',split:true" style="height:50px;"></div> 22 <div data-options="region:'east',split:true" title="East" style="180px;"></div> 23 <div data-options="region:'west',split:true" title="West" style="100px;"></div> 24 <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'"> 25 <table class="easyui-datagrid" 26 data-options="url:'http://www.jeasyui.com/demo/layout/datagrid_data1.json',border:false,singleSelect:true,fit:true,fitColumns:true"> 27 <thead> 28 <tr> 29 <th data-options="field:'itemid'" width="80">Item ID</th> 30 <th data-options="field:'productid'" width="100">Product ID</th> 31 <th data-options="field:'listprice',align:'right'" width="80">List Price</th> 32 <th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th> 33 <th data-options="field:'attr'" width="150">Attribute</th> 34 <th data-options="field:'status',align:'center'" width="50">Status</th> 35 </tr> 36 </thead> 37 </table> 38 </div> 39 </div> 40 41 </body> 42 </html>