---

jQuery EasyUI 布局 - 在面板中创建复杂布局

简介

jQuery EasyUI 是一款用于构建用户界面的开源 JavaScript 库。它提供了众多易用的 UI 组件和丰富的 API，支持丰富的自定义和可扩展性，是开发 Web 前端界面的不二之选。

EasyUI 提供了一些功能强大的布局组件，可以在面板中创建复杂布局，如面板分割器、折叠面板、选项卡和窗口等。这些布局组件都支持自适应大小和自适应大小调整，使得开发人员可以快速轻松地构建漂亮且易于访问和使用的 Web 界面。

本文将介绍如何使用 EasyUI 的布局组件来创建复杂布局。我们将会探讨 EasyUI 的四种布局组件：布局器（Layout）、分割器（Splitter）、折叠面板（Accordion）和选项卡（Tabs）。

布局器（Layout）

在 EasyUI 中，布局器是最灵活的布局组件之一，它可以轻松地创建各种复杂的 Web 界面布局。布局器支持面板的分隔和调整大小，并自动调整子控件的大小和位置。

<div id="layout" class="easyui-layout" style="width:700px;height:400px;">
    <div data-options="region:'north',split:true" style="height:100px"></div>
    <div data-options="region:'south',split:true" style="height:50px;"></div>
    <div data-options="region:'east',split:true" style="width:100px;"></div>
    <div data-options="region:'west',split:true" style="width:200px;"></div>
    <div data-options="region:'center'"></div>
</div>

如上代码所示，我们首先创建了一个 id 为 "layout" 的 div 容器，并定义它的宽度和高度。然后，我们在容器中创建了五个子 div，分别代表布局器的五个区域："north"、"south"、"east"、"west" 和 "center"。这些区域的大小和位置都可以通过设置子 div 的样式进行调整。

在指定每个子 div 的区域时，我们使用了 data-options 属性来设置相应的选项。例如，我们通过 data-options="region:'north',split:true" 来设置第一个子 div 属于 "north" 区域，并开启分隔条（splitter）。布局器支持的选项还包括 title、iconCls、href、cache、hidden 等等。

分割器（Splitter）

EasyUI 分割器是一种常用的 Web 布局控件，用于在水平或垂直方向上分割面板。分割器支持自动调整面板大小，使分割后的面板大小适应其容器大小。

<div class="easyui-splitter" style="width:700px;height:400px;">
    <div style="height:200px;background:#ff0;"></div>
    <div style="background:#0f0;"></div>
</div>

如上代码所示，我们创建了一个包含两个子 div 的分割器。我们没有指定分隔条（splitter）的位置或方向，因为 EasyUI 将自动将分割条放置在两个子 div 之间，并根据水平或垂直方向自动调整宽度或高度。

在分割器组件中，我们可以使用 data-options 属性设置一些常用选项，如 orientation、splitSize、minSize 和 maxSize 等等。

折叠面板（Accordion）

EasyUI 折叠面板是一种非常有用的布局组件，通常用于创建复杂的 Web 页面布局。折叠面板允许用户展开和折叠面板内容，这在需要显示和隐藏段落或区块时非常有用。

<div id="accordion" class="easyui-accordion" style="width:700px;height:400px;">
    <div title="面板 1" data-options="selected:true" style="padding:10px;">
        <p>内容 1</p>
    </div>
    <div title="面板 2" style="padding:10px;">
        <p>内容 2</p>
    </div>
    <div title="面板 3" style="padding:10px;">
        <p>内容 3</p>
    </div>
</div>

如上代码所示，我们创建了一个 id 为 "accordion" 的折叠面板，包含三个带标题的子 div。通过 title 属性，我们设置了每个面板的标题。在第一个子 div 中，我们设置了 data-options="selected:true"，表示默认选中第一个面板。

折叠面板还支持一些选项，例如 animate、width 和 height 等等。我们可以通过设置这些选项来自定义折叠面板的外观和行为。

选项卡（Tabs）

EasyUI 选项卡是一种非常常用的布局组件，通过选项卡我们可以将内容分隔为多个选项卡页面，从而使得我们的 Web 页面更加易于访问和使用。

<div id="tt" class="easyui-tabs" style="width:700px;height:400px;">
    <div title="Tab1">
        <p>选项卡 1 的内容</p>
    </div>
    <div title="Tab2">
        <p>选项卡 2 的内容</p>
    </div>
    <div title="Tab3">
        <p>选项卡 3 的内容</p>
    </div>
</div>

如上代码所示，我们创建了一个 id 为 "tt" 的选项卡组件，包含三个选项卡页面。我们通过设置 title 属性来设置每个选项卡的标题。

选项卡组件还支持一些选项，如 tabWidth、tabHeight、border、selected 和 plain 等等。我们可以通过设置这些选项来自定义选项卡组件的外观和行为。

结论

通过 EasyUI 提供的布局组件，我们可以轻松地创建复杂的 Web 界面布局，并实现诸如分隔、折叠、选项卡等各种效果。EasyUI 提供了丰富的选项和灵活的自定义能力，让开发人员可以自由地构建自己所需的用户界面。