jquery-easyui中创建复杂布局

Panel是一个容器，可以容纳各种组件，结合layout可以达到复杂布局的要求，看下面一个例子：

 

利用jquery-easyui可以很轻易地实现这个消息框：

<div class="easyui-panel" title="Complex Panel Layout"
        icon="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="msn.gif" mce_src="msn.gif"/>
                </div>
                <div region="center" border="false" style="border:1px solid #ccc;" 
                                                     mce_style="border:1px solid #ccc;">
                    <div class="easyui-layout" fit="true">
                        <div region="south" split="true" border="false" style="height:60px;">
                            <textarea style="overflow:auto;border:0;width:100%;height:100%;">
                                     Hi,I am easyui.
                            </textarea>
                        </div>
                        <div region="center" border="false">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我们无须编写任何JS代码就能够拥有强大的布局能力。

 

原文及下载地址：http://jquery-easyui.wikidot.com/tutorial:panel