jQuery EasyUI使用教程之在面板中创建复杂布局

<jQuery EasyUI最新版下载>

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

查看演示

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

下面是所有的代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<divclass="easyui-panel"title="Complex Panel Layout" iconcls="icon-search"collapsible="true"style="padding:5px;width:500px;height:250px;">

<divclass="easyui-layout"fit="true">

<divregion="north"border="false"class="p-search">

<label>Search:</label><input>

</div>

<divregion="center"border="false">

<divclass="easyui-layout"fit="true">

<divregion="east"border="false"class="p-right">

<imgsrc="images/msn.gif">

</div>

<divregion="center"border="false"style="border:1px solid #ccc;">

<divclass="easyui-layout"fit="true">

<divregion="south"split="true"border="false"style="height:60px;">

<textareastyle="border:0;width:100%;height:100%;resize:none">Hi,I am easyui.</textarea>

</div>

<divregion="center"border="false">

</div>

</div>

</div>

</div>

</div>

</div>

</div>

我们不需要编写任何JavaScript代码，它自身拥有强大的用户界面设计功能。

下载该EasyUI示例：easyui-panel-demo.zip

有兴趣的朋友可以点击查看更多有关jQuery EasyUI的教程！