JQuery Layout Split 插件是一款基于 JQuery 的布局插件，可以方便地實現(xiàn)垂直或水平分割布局。這個插件提供了豐富的 API，可以通過代碼來控制布局的大小和位置，同時還支持多種分隔器和布局風格的自定義。

使用 JQuery Layout Split 插件首先需要添加相應的 CSS 和 JS 文件。這可以通過 CDN 引入或者下載到本地。為了方便引入，我們可以把 CSS 和 JS 文件放在同一目錄下。

<!-- 引入 CSS 文件 -->
<link rel="stylesheet" href="jquery.layout.css">
<!-- 引入 JS 文件 -->
<script src="jquery.js"></script>
<script src="jquery.layout.js"></script>

接下來我們需要定義 HTML 代碼，在 HTML 文件中添加幾個 div 元素作為容器。這些元素需要按照順序進行嵌套。在最外層的容器上添加類名 .ui-layout-container。在內(nèi)部容器上定義類名 .ui-layout-west、.ui-layout-east、.ui-layout-north、.ui-layout-south、.ui-layout-center 分別代表布局中的五個區(qū)域。

<div class="ui-layout-container">
<div class="ui-layout-west"></div>
<div class="ui-layout-east"></div>
<div class="ui-layout-north"></div>
<div class="ui-layout-south"></div>
<div class="ui-layout-center"></div>
</div>

最后，我們需要初始化布局。可以在 $(document).ready() 代碼塊中調用 layout() 函數(shù)來初始化布局。在初始化函數(shù)中可以設置布局的大小、位置、分隔器樣式等參數(shù)。以下是一個基本的初始化示例：

$(document).ready(function() {
$('.ui-layout-container').layout({
resizable: true,
resizeWhileDragging: true,
east: {
size: 300
},
north: {
size: 100
},
south: {
size: 100
}
});
});

在這個示例中，我們開啟了可拖拽改變大小的選項，并且設置了東、北、南三個區(qū)域的大小。

總體來看，JQuery Layout Split 插件是一個非常實用的布局插件。它提供了許多實用的功能，并且可以使我們的頁面布局更加美觀、易讀。