转载

轻量级的可调视图和面板分栏Layout布局工具

Split是一个轻量级的可以动态调整的视图或面板分栏工具。没有任何外部依赖，只需要一两个有父元素的普通元素。可将页面水平或垂直分割，你不需要自己在面板之间手动插入分割条。

使用示例

此代码将两个元素左右分割，各占25%、75%，最小宽度为200px。

Split(['#one', '#two'], {

sizes: [25, 75],

minSize: 200

});

使用下面的代码拼出更为复杂的布局结构。

Split(['#ten', '#eleven']);

Split(['#twelve', '#thirteen'], {

direction: 'vertical'

});

注* DOM关系如下

<div>

<p>Bacon ipsum dolor amet beef ribs meatloaf picanha pork loin pork chop rump pig sausage bacon shank boudin beef fatback. Pork loin turducken t-bone chicken.</p>

</div>

<p>Bacon ipsum dolor amet beef ribs meatloaf picanha pork loin pork chop rump pig sausage bacon shank boudin beef fatback. Pork loin turducken t-bone chicken.</p>

</div>

<p>Brisket andouille cow ball tip. Ham ground round short loin tri-tip ribeye t-bone boudin, pork loin turkey drumstick tongue pork chop. Kielbasa doner picanha turducken, swine bacon shank pastrami andouille.</p>

</div>