使用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