jQuery EasyUI Layout - Creating Complex Layouts within Panels
Panels allow you to create custom layouts for various purposes. In this example, we use panels and layout plugins to create an MSN message box.
We use multiple layouts within region panels. At the top of the message box, we place a search input field, and on the right, we place a person's image. In the central area, we set the split attribute to true, dividing this section into two parts, allowing users to resize the region panels.
Here is all the code:
<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 decoding="async" 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>
We do not need to write any JavaScript code, as it has a very powerful design for user interfaces.