复杂面板布局

使用教程 » 复杂面板布局

面板允许您为多种用途创建自定义布局。在这个例子中，我们使用面板和布局插件创建了一个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="/jeasyui/tutorial/layout/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 实例: