纯JavaScript可调节大小的拆分视图面板插件

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?)                
              

split.js插件的github地址为：https://github.com/nathancahill/Split.js