Kendo UI for jQuery——创建现代Web应用程序的最完整UI库！查看详情>>>

<jQuery EasyUI最新版下载>

本教程主要为大家介绍如何在面板中创建复杂的布局。面板允许你创建用于多种用途的自定义布局，在本示例中，我们通过使用面板和布局插件来创建一个MSN的消息框。

查看演示

我们在区域面板中使用多个布局。在消息框顶部我们放置一个搜索输入，将一个人物图片放置在右边。在中间的区域我们通过将split属性设置为true，来把这部分切割为两部分，允许用户改变区域面板的尺寸大小。

下面是所有的代码：

<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

购买最新正版授权！"咨询在线客服"