html5 侧边伸缩面板,纯JavaScript可调节大小的拆分视图面板插件

Split.js是一款可调节大小的拆分视图面板纯JavaScript插件。该插件的特点是轻量级，无需任何外部依赖。Split.js可以轻松的制作出拆分视图(或分割面板)效果。

安装

可以使用bower或npm来安装Split.js插件。

bower install Split.js

npm install split.js

使用方法

使用该插件需要引入split.js文件。

HTML结构

split.js使用嵌套

的HTML结构

......

......

CSS样式

下面是split.js插件所必须的一些CSS样式。

.gutter {

background-color: #eee;

background-repeat: no-repeat;

background-position: 50%;

cursor: move;

cursor: grab;

cursor: -moz-grab;

cursor: -webkit-grab;

}

.gutter.gutter-horizontal {

background-image: url('grips/vertical.png');

}

.gutter.gutter-vertical {

background-image: url('grips/horizontal.png');

}

.split {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

overflow-y: auto;

overflow-x: hidden;

}

.split, .gutter.gutter-horizontal {

height: 100%;

float: left;

}

初始化插件

下面的方法初始化两个分割面板，宽度分别为25%和75%，最小宽度为200像素。

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

sizes: [25, 75],

minSize: 200

});

下面的方法初始化三个分割面板，宽度分别为100像素，100像素和300像素。

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

minSize: [100, 100, 300]

});

下面是一个垂直分割面板，两个面板高度相等。

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

direction: 'vertical'

});

下面是使用CSS值来初始化宽度的方法(不建议这样做)。

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

sizes: ['200px', '500px']

});

配置参数

Split( selectors, options?)

参数

类型

默认值

描述

sizes

Array

每个元素的初始化百分比值或CSS值

minSize

Number 或 Array

100

每个元素的最小尺寸

gutterSize

Number

10

Gutter的尺寸，单位像素

snapOffset

Number

30

捕捉像素的最小宽度偏移

direction

String

'horizontal'

面板分割的方向：horizontal 或 vertical

cursor

String

'grabbing'

在拖动的时候光标的样式

onDrag

Function

拖动时候的回调函数

onDragStart

Function

开始拖动时候的回调函数

onDragEnd

Function

拖动结束时候的回调函数