可上下左右拖动的jQuery分割div容器插件

split.js是一款可上下左右拖动的jQuery分割div容器插件。该插件可以实现父容器div的上下左右动态分割，并可以上下改变父div的高度，而且宽和高都是按百分比计算。

使用方法

在页面中引入jquery和split.js文件。

<script src="js/split.js"></script>                  
<script src="js/jquery.min.js"></script>                  
                

HTML结构

<div class='hj-wrap'>
  <div class="arrow"></div>
</div>
                

实现原理为：首先一个父 div 为hj-wrap，相对定位 。arrow是分割线，用于上下拖动 , 不能占有位置，绝对定位到父容器的底部。上下拖动的 arrow，当上拖动时，arrow的父 div 的高度变小，当下拖动时，arrow的父 div 的高度变大。

横向布局

<div class='hj-wrap'>
    <div class="hj-transverse-split-div">
        横 向
        <label class="hj-transverse-split-label"></label>
    </div>
    <div class="hj-transverse-split-div">横 向 2
        <label class="hj-transverse-split-label"></label>
    </div>
    <div class="hj-transverse-split-div">横 向 3
        <label class="hj-transverse-split-label"></label>
    </div>
    <div class="hj-transverse-split-div">横 向 4
        <label class="hj-transverse-split-label"></label>
    </div>
    <div class="hj-transverse-split-div">横 向 5
    </div>
    <div class="arrow"></div>
</div>
                

竖向布局

<div class='hj-wrap verticals'>
    <div class="hj-vertical-split-div">上
        <label class="hj-vertical-split-label"></label>
    </div>
    <div class="hj-vertical-split-div">中
        <label class="hj-vertical-split-label"></label>
    </div>
    <div class="hj-vertical-split-div">下</div>
    <div class="arrow"></div>
</div>                  
                

该可上下左右拖动的jQuery分割div容器插件的github网址为：https://github.com/biaochenxuying/split