Split.js是一款可调节大小的拆分视图面板纯JavaScript插件。该插件的特点是轻量级,无需任何外部依赖。Split.js可以轻松的制作出拆分视图(或分割面板)效果。
安装
可以使用bower或npm来安装Split.js插件。
bower install Split.js
npm install split.js
使用方法
使用该插件需要引入split.js文件。
<script src="js/split.js" charset="utf-8"></script>
HTML结构
split.js使用嵌套<div>
的HTML结构
<div class="example">
<div id="one" class="split split-horizontal">
<p>......</p>
</div>
<div id="two" class="split split-horizontal">
<p>......</p>
</div>
</div>
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(<selector[]> selectors, <options> 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 | 拖动结束时候的回调函数 |
split.js插件的github地址为:https://github.com/nathancahill/Split.js