纯JavaScript可调节大小的拆分视图面板插件 A lightweight, unopinionated utility for creating adjustable split views or panes

DEMO1 DEMO2

Split.js is a lightweight, unopinionated utility for creating adjustable split views or panes.

No dependencies or markup required, just two or more elements with a common parent.

Views can be split horizontally or vertically, with draggable gutters inserted between every two elements.

Documentation

Split(<selector[]> selectors, <options> options?)

Options	Type	Default	Description
sizes	Array of numbers		Initial sizes of each element in percents.
minSize	Number or array	100	Minimum size of each element.
gutterSize	Number	10	Gutter size in pixels.
snapOffset	Number	30	Snap to minimum size offset.
direction	String	'horizontal'	Direction to split: horizontal or vertical.
cursor	String	'grabbing'	Cursor to display while dragging.
onDrag	Function		Callback on drag.
onDragStart	Function		Callback on drag start.
onDragEnd	Function		Callback on drag end.

Usage Examples

A split with two elements, starting at 25% and 75% wide with 200px minimum width.

Split(['#one', '#two'], {
    sizes: [25, 75],
    minSize: 200
});

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.

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. Hamburger tongue tenderloin meatball picanha. Rump bresaola chicken bacon, ground round corned beef ribeye salami. Turkey fatback short ribs andouille meatball, brisket pork belly cow t-bone turducken pig beef ribs.

A split with three elements, starting with even widths with 100px, 100px and 300px minimum widths, respectively.

Split(['#one', '#two', '#three'], {
    minSize: [100, 100, 300]
});

Min width: 100px

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.

Min width: 100px

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.

Min width: 300px

Hamburger tongue tenderloin meatball picanha. Rump bresaola chicken bacon, ground round corned beef ribeye salami. Turkey fatback short ribs andouille meatball, brisket pork belly cow t-bone turducken pig beef ribs.

A vertical split with two elements, starting with even heights.

Split(['#eight', '#nine'], {
    direction: 'vertical'
});

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.

Nested splits, horizontal and vertical.

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

Split(['#twelve', '#thirteen'], {
    direction: 'vertical'
});

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.