jsRapSpliter是一个轻量级的jQuery拆分器插件，允许在垂直和水平方向上拆分网页或特定容器。

它采用一个带有两个子DIV的DIV元素，并将它们转换为垂直或水平拆分视图，用户可以通过鼠标拖动来调整每个DIV窗格的大小。

参见：

• 创建拆分视图的7个最佳拆分器JavaScript库

如何使用它:

1.将DIV窗格添加到拆分视图中。

<div id="demo" >
 <div>Panel 1</div>
 <div>Panel 2</div>
</div>

2.下载并加载jsRapSpliter.jsjQuery之后的库。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jsRapSpliter.js"></script>

3.初始化顶部容器上的插件以生成水平拆分视图。

$(function(){
  $('#demo').jsRapSpliter();
});

4.改为生成垂直拆分视图。

$(function(){
  $('#demo').jsRapSpliter({
    horizontal: true,
  });
});

5.设置拆分视图的高度。默认值：200px。

$(function(){
  $('#demo').jsRapSpliter({
    height: '300px',
  });
});

6.设置拖动手柄（拆分器）的起始位置。默认值：0.5（50%）。

$(function(){
  $('#demo').jsRapSpliter({
    position: 0.6,
  });
});

7.设置拖动手柄（拆分器）的宽度。默认值：8.0。

$(function(){
  $('#demo').jsRapSpliter({
    spliterWidth: 0.6
  });
});

8.覆盖拖动手柄（拆分器）的默认样式。

/* vertical splitter */
.spliterV {
  position: absolute;
  height: 100%;
  cursor: col-resize;
  border: solid 1px #bab;
}
 
/* horizontal splitter */
.spliterH {
  position: absolute;
  width: 100%;
  cursor: row-resize;
  border: solid 1px #bab;
}

预览截图

jQuery 垂直和水平拆分视图 jsRapSpliter