使用easyUI在panel中创建复杂布局
@author YHC
Panel 允许你创建自定义布局对多种用途.在这个示例我们使用panel和layout插件创建一个msn消息框.
我们使用多个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代码,它自己有非常强大的功能去设计用户界面.