下面是EasyUI jQuery布局小工具的完整攻略。
简介
EasyUI是一款基于jQuery实现的简单易用的UI工具库，其中包含了布局小工具。这个小工具可以帮助我们快速实现网站的布局，提高开发效率。
安装
首先，我们需要先下载EasyUI库，下载地址是：http://www.jeasyui.com/download/。下载完成后，将其解压到网站根目录下，然后在页面中引入EasyUI的CSS和JavaScript文件：
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
常用布局
EasyUI提供了几种常用的布局方式，包括面板布局、分割布局、折叠布局、选项卡布局、手风琴布局等。下面我们来分别介绍一下这几种布局方式。
面板布局
面板布局是最简单的一种布局方式，它将页面分成几个面板，这些面板之间可以展开和收缩。代码示例如下：
<div class="easyui-layout" style="height:500px">
<div data-options="region:'north',split:true" style="height:100px"></div>
<div data-options="region:'south',split:true" style="height:100px"></div>
<div data-options="region:'east',split:true" style="width:100px"></div>
<div data-options="region:'west',split:true" style="width:100px"></div>
<div data-options="region:'center'"></div>
</div>
以上代码将页面分成了五个面板：上、下、左、右和中央。其中，split:true表示可以拖动面板来改变面板的大小。
分割布局
分割布局将页面分成了两个面板，并且可以设置分割线的位置和方向。代码示例如下：
<div class="easyui-layout" style="height:500px">
<div data-options="region:'west',split:true,title:'West Title',iconCls:'icon-reload'" style="width:200px"></div>
<div data-options="region:'center',title:'Center Title',iconCls:'icon-remove'" style="background:#eee;"></div>
</div>
以上代码将页面分成了两个面板：左边的面板和中央的面板。其中，split:true表示可以拖动分割线来改变面板的大小，title是面板的标题，iconCls是面板的图标。
折叠布局
折叠布局可以将面板折叠起来，点击标题可以展开和收缩面板。代码示例如下：
<div class="easyui-layout" style="height:500px">
<div data-options="region:'north',split:true" style="height:100px"></div>
<div data-options="region:'center'" style="background:#eee;">
<div class="easyui-layout" style="height:100%">
<div data-options="region:'west',split:true,title:'West',iconCls:'icon-reload',collapsible:true,collapsed:true" style="width:200px;"></div>
<div data-options="region:'center'" style="background:#ccc;"></div>
</div>
</div>
</div>
以上代码将页面分成了两个面板：上边的面板和中央的面板。中央的面板又分成了两个面板：左边的面板和中间的面板。左边的面板可以折叠，collapsed:true表示默认折叠起来，collapsible:true表示可以折叠。
选项卡布局
选项卡布局将页面分成了几个选项卡，每个选项卡中可以放置内容。代码示例如下：
<div class="easyui-layout" style="height:500px">
<div data-options="region:'north',split:true" style="height:100px"></div>
<div data-options="region:'center'" style="background:#eee;">
<div class="easyui-tabs" style="height:100%;">
<div title="Tab1" style="padding:10px;">Content1</div>
<div title="Tab2">Content2</div>
</div>
</div>
</div>
以上代码将页面分成了两个面板：上边的面板和中央的面板。中央的面板是一个选项卡，包含两个选项卡页：Tab1和Tab2。
手风琴布局
手风琴布局是一种特殊的折叠布局，可以在一个面板中展示多个子面板，每次只展开其中的一个子面板。代码示例如下：
<div class="easyui-accordion" style="height:300px;">
<div title="Title1" data-options="selected:true" style="padding:10px;">
Content1
</div>
<div title="Title2" style="padding:10px;">
Content2
</div>
<div title="Title3" style="padding:10px;">
Content3
</div>
</div>
以上代码将页面分成了一个手风琴布局，包含了三个子面板：Title1、Title2和Title3。
示例说明
下面我们来看两个使用EasyUI布局小工具的示例。
示例一：2列布局
这个示例将页面分成了两列，左边放置菜单，右边放置内容。代码示例如下：
<div class="easyui-layout" style="height:500px">
<div data-options="region:'west',split:true,title:'菜单',iconCls:'icon-menu'" style="width:200px;">
菜单内容
</div>
<div data-options="region:'center'">
内容区域
</div>
</div>
以上代码将页面分成了两个面板：左边的面板和右边的面板。左边的面板是一个菜单面板，右边的面板是一个内容面板。
示例二：3行4列布局
这个示例将页面分成了三行四列，中间一行包含了四个子面板。代码示例如下：
<div class="easyui-layout" style="height:500px">
<div data-options="region:'north'" style="height:50px;">北部</div>
<div data-options="region:'west',split:true" style="width:200px;">西部</div>
<div data-options="region:'east',split:true" style="width:200px;">东部</div>
<div data-options="region:'south'" style="height:50px;">南部</div>
<div data-options="region:'center'">
<div class="easyui-layout" style="height:100%;">
<div data-options="region:'west',split:true" style="width:100px;">左上</div>
<div data-options="region:'center'" style="background:#eee;">
<div class="easyui-layout" style="height:100%;">
<div data-options="region:'west',split:true" style="width:100px;">左下</div>
<div data-options="region:'center'" style="background:#ccc;">右下</div>
</div>
</div>
<div data-options="region:'east',split:true" style="width:100px;">右上</div>
</div>
</div>
</div>
以上代码将页面分成了三行四列。中间一行在上下两个子面板中又分别包含了两个子面板，最终共分为四个子面板。