<div id="cc" class="easyui-layout" fit=true> //加上fit屬性就會自適應父類的大小,整個瀏覽器 <div region="north" title="North Title" split="false" style="height:100px;"></div> //region是方位,就代碼中幾個值,split是分裂,能不能鼠標調整大小,false就固定 <!-- <div region="south" title="South Title" split="true" style="height:100px;"></div> --> <!-- <div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;"></div> --> <div region="west" split="true" title="West" style="width:100px;"></div> <div region="center" title="center title" style="padding:5px;background:#eee;"></div> //center這個不能注釋,因為他是有其他幾個div計算出來的 </div>
依賴panel
panel中幾個特性都適應layout,
1、collapsed:
<div region="west" split="true" title="West" style="width:100px;" collapsed="true"></div>
2、href 遠程加載:只加載body中內容,如果想加載scritp中,可以抽取到body中,如下index.jsp
<div region="center" title="center title" style="padding:5px;background:#eee;" href="index.jsp"></div>
index.jsp: <body> <script type="text/javascript"> alert('我也被加載了!'); </script> This is my JSP page. <br> </body>
tabs標簽頁,比jquery tabs插件簡單
div id="tt" class="easyui-tabs" style="width:500px;height:250px;"> <div title="Tab1" style="padding:20px;display:none;"> tab1 </div> <div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;"> //closable控制上面圖標* tab2 </div> <div title="Tab3" iconCls="icon-reload" closable="true" style="padding:20px;display:none;"> tab3 </div> </div>
Accordion 手風琴
<div id="aa" class="easyui-accordion" style="width:300px;height:200px;"> <div title="Title1" iconCls="icon-save" style="overflow:auto;padding:10px;"> <h3 style="color:#0099FF;">Accordion for jQuery</h3> <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p> </div> <div title="Title2" iconCls="icon-reload" selected="true" style="padding:10px;"> content2 </div> <div title="Title3"> content3 </div> </div>