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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!