使用easyUI在panel中創建復雜布局

@author YHC

Panel 允許你創建自定義布局對多種用途.在這個示例我們使用panel和layout插件創建一個msn消息框.

查看 Demo

我們使用多個layout在面板里面,在消息框的頂部我們放置一個查詢輸入框,我們也放置一個人的圖片在右邊,中間的區域我們切割為2部分,通過設置split 

屬性為true,允許用戶改變panel區域的大小.

以下就是所有代碼:

<div class="easyui-panel" title="Complex Panel Layout" iconCls="icon-search" collapsible="true" style="padding:5px;width:500px;height:250px;">  
    <div class="easyui-layout" fit="true">  
        <div region="north" border="false" class="p-search">  
            <label>Search:</label><input></input>  
        </div>  
        <div region="center" border="false">  
            <div class="easyui-layout" fit="true">  
                <div region="east" border="false" class="p-right">  
                    <img src="images/msn.gif"/>  
                </div>  
                <div region="center" border="false" style="border:1px solid #ccc;">  
                    <div class="easyui-layout" fit="true">  
                        <div region="south" split="true" border="false" style="height:60px;">  
                            <textarea style="border:0;width:100%;height:100%;resize:none">Hi,I am easyui.</textarea>  
                        </div>  
                        <div region="center" border="false">  
                        </div>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </div>  
</div>  

我們不需要寫任何的javascript代碼,它自己有非常強大的功能去設計用戶界面.

下載EasyUI 示例代碼:

easyui-panel-demo.zip