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

当前位置:主页 > jQuery库 > 布局和界面 > 纯JavaScript可调节大小的拆分视图面板插件
纯JavaScript可调节大小的拆分视图面板插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2015-12-07
    阅读:
简要教程

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