Split.js, <2kb unopinionated实用工具,可以用于可以调整大小的拆分视图

分享于 

16分钟阅读

GitHub

  繁體 雙語
Lightweight, unopinionated utility for adjustable split views
  • 源代码名称:Split.js
  • 源代码网址:http://www.github.com/nathancahill/Split.js
  • Split.js源代码文档
  • Split.js源代码下载
  • Git URL:
    git://www.github.com/nathancahill/Split.js.git
    Git Clone代码到本地:
    git clone http://www.github.com/nathancahill/Split.js
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/nathancahill/Split.js
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    Split.js

    Build StatusFile SizeDependenciesBackers on Open CollectiveSponsors on Open Collective

    Split.js

    <2kb unopinionated实用工具,可以用于可以调整大小的拆分视图。

    • 小: 重量 LESS 比 2kb 压缩。
    • 快速: 无开销或者附加窗口事件侦听器,使用纯CSS调整大小。
    • Unopinionated:calcflexgrid 配合良好。
    • 兼容: 在IE9工作很出色,甚至在IE8的IE8中加载。 早期的Firefox/Chrome/Safari/Opera 支持。

    安装

    纱线:

    
    $ yarn add split.js
    
    
    
    

    npm:

    
    $ npm install --save split.js
    
    
    
    

    Bower:

    
    $ bower install --save Split.js
    
    
    
    

    包含一个像汇总或者 web pack的MODULE bundler:

    // using ES6 modulesimportSplitfrom'split.js'// using CommonJS modulesvar Split =require('split.js')

    UMD 构建也可以在 unpkg上使用:

    <scriptsrc="https://unpkg.com/split.js/split.min.js"></script>

    你可以在 window.Split 上找到图书馆。

    文档

    var split =Split(<HTMLElement|selector[]> elements, <options> options?)
    选项类型默认说明
    sizes数组百分比或者CSS值中每个元素的初始大小。
    minSize数字或者数组100每个元素的最小大小。
    gutterSize号码10檐沟大小以像素为单位。
    snapOffset号码30捕捉最小大小偏移以像素为单位。
    direction字符串"水平"'拆分方向:水平或者垂直。
    cursor字符串'col调整大小'拖动时显示光标。
    gutter函数调用以创建每个檐沟元素
    elementStyle函数调用以设置每个元素的样式。
    gutterStyle函数调用以设置装订线的样式。
    onDrag函数拖动时回调。
    onDragStart函数拖动开始时的回调。
    onDragEnd函数拖动结束时的回调。

    重要说明

    Split.js 不设置超出管理元素宽度或者高度所需的最小值的CSS。 这是通过设计来实现的。它使 Split.js 在许多不同情况下变得灵活且有用。 如果创建水平拆分,则负责( 有可能) 浮动元素和排水槽,并设置它的高度。 参见 CSS 节 below。 如果你的gutters 没有显示,请检查应用的CSS样式。

    这是关于库的#1 问题。

    命令行选项

    大小

    元素初始大小的array,指定为百分比值。 示例:将初始大小设置为 25%和 75%。

    Split(['#one', '#two'], {
     sizes: [25, 75]
    })
    minSize缺省值:100

    元素的最小大小的array,指定为像素值。 示例:分别将最小大小设置为 100px 和 300像素。

    Split(['#one', '#two'], {
     minSize: [100, 300]
    })

    如果传递数字而不是 array,则所有元素都将设置为相同的最小大小:

    Split(['#one', '#two'], {
     minSize:100})
    gutterSize。默认值:10

    檐沟大小以像素为单位。例如: 将檐沟大小设置为 20像素。

    Split(['#one', '#two'], {
     gutterSize:20})
    snapOffset。默认值:30

    以像素为单位捕捉这里偏移量的最小大小。 示例:设置为 0以禁用捕捉效果。

    Split(['#one', '#two'], {
     snapOffset:0})
    direction 默认值:''

    要拆分的方向。可以是'竖直'或者'水平'。 确定应用哪些CSS属性( IE。 width/高度) 每个元素和檐沟。 示例:垂直拆分:

    Split(['#one', '#two'], {
     direction:'vertical'})
    cursor 默认值:col调整大小"'

    光标显示在装订线( 同时在拖动时应用于两个相邻元素以防止闪烁) 上。 默认为'调整大小',因此在使用 direction 时应该切换到'行调整大小': "垂直":

    Split(['#one', '#two'], {
     direction:'vertical',
     cursor:'row-resize'})
    装订线

    调用以创建每个檐沟元素的可选函数。 这里签名类似于:

    (index, direction) =>HTMLElement

    默认情况下,使用 class="gutter gutter-horizontal" 或者 class="gutter gutter-vertical" 创建 div,具体取决于 direction。 默认装订线函数如下所示:

    (index, direction) => {
     constgutter=document.createElement('div')
     gutter.className=`gutter gutter-${direction}`return gutter
    }

    返回的元素被插入到DOM中,它的宽度或者高度被设置为。 这里选项可以用于克隆现有的DOM元素,或者创建具有自定义样式的新元素。

    elementStyle

    可选函数,称为设置元素的CSS样式。 这里签名类似于:

    (dimension, elementSize, gutterSize) =>Object

    维度将为字符串,'宽度'或者'高度',并且可以在返回样式中使用。 elementSize是元素的目标百分比值,而gutterSize是檐沟的目标像素值。

    它应该返回一个带有CSS属性的对象来应用到元素。 对于水平拆分,返回对象如下所示:

    {
     'width':'calc(50% - 5px)'}

    垂直拆分样式如下所示:

    {
     'height':'calc(50% - 5px)'}

    如果你使用的布局像Flexbox或者网格( 请参见 Flexbox ),则使用这里函数。 水平拆分的flexbox样式如下所示:

    {
     'flex-basis':'calc(50% - 5px)'}
    gutterStyle

    设置 gutters的CSS样式时调用的可选函数。 这里签名类似于:

    (dimension, gutterSize) =>Object

    Dimension是字符串,'宽度'或者'高度',gutterSize是表示装订线宽度的像素值。

    它应该返回一个类似于 elementStyle的对象,一个带有CSS属性的对象,它可以应用到 gutter。 由于 gutters 具有固定宽度,因此它通常会如下所示:

    {
     'width':'10px'}

    在拖动时,elementStylegutterStyle 都是连续调用的,所以除了返回这些函数中的样式对象之外,不要做任何事情。

    ondrag,ondragstart,onDragEnd

    可以在拖动( 连续激发) 上添加的回调,拖动开始和拖动结束。 如果在 onDrag 中执行多个基本操作,那么添加一个去抖函数来限制回调。

    用法示例

    参考HTML示例自动插入 gutters:

    <div>
     <divid="one">content one</div>
     <divid="two">content two</div>
     <divid="three">content three</div>
    </div>

    有两个元素的分裂,从 25%到 75%宽,最小宽度为 200px。

    Split(['#one', '#two'], {
     sizes: [25, 75],
     minSize:200});

    分为3 个元素,以 100像素,100px 和 300px 最小宽度开始。

    Split(['#one', '#two', '#three'], {
     minSize: [100, 100, 300]
    });

    有两个元素的垂直分割。

    Split(['#one', '#two'], {
     direction:'vertical'});

    使用CSS值指定初始宽度。 不推荐,大小/沟道计算必须在手动之前完成,并且不会缩放视口大小。

    Split(['#one', '#two'], {
     sizes: ['200px', '500px']
    });

    JSFiddle风格也是可能的: 演示工具。

    保存状态

    使用本地存储保存最近的状态:

    var sizes =localStorage.getItem('split-sizes')if (sizes) {
     sizes =JSON.parse(sizes)
    } else {
     sizes = [50, 50] // default sizes}var split =Split(['#one', '#two'], {
     sizes: sizes,
     onDragEnd:function () {
     localStorage.setItem('split-sizes', JSON.stringify(split.getSizes()));
     }
    })

    Flexbox

    定制 elementStylegutterStyle CSS支持Flexbox布局。 给出这样的布局:

    <divid="flex">
     <divid="flex-1"></div>
     <divid="flex-2"></div>
    </div>

    和CSS样式如下:

    #flex {
     display: flex;
     flex-direction: row;
    }

    然后,elementStylegutterStyle 可以用于设置flex基础:

    Split(['#flex-1', '#flex-2'], {
     elementStyle:function (dimension, size, gutterSize) {
     return {
     'flex-basis':'calc('+ size +'% - '+ gutterSize +'px)' }
     },
     gutterStyle:function (dimension, gutterSize) {
     return {
     'flex-basis': gutterSize +'px' }
     }
    })

    API

    Split.js 返回具有几个函数的实例。 创建时返回该实例:

    
    var instance = Split([],.. .)
    
    
    
    
    . setSizes( [] )

    setSizes的行为与 sizes 配置选项相同,它传递百分比或者CSS值的array。 它更新分割中的元素的大小。 添加于 v1.1.0:

    
    instance.setSizes([25, 75])
    
    
    
    
    . getSizes( )

    getSizes返回百分比的array,适用于 setSizes 或者创建。 不支持在IE8中添加在v1.1.2中:

    
    instance.getSizes()
    
    
    > [25, 75]
    
    
    
    
    . collapse(index )

    折叠将 index 处元素的大小更改为 0. 除最后一个元素之外的每个元素都将折叠到前面的( 左侧或者顶部)。 最后一个是向后折叠的。 不支持在IE8中添加在v1.1.0中:

    
    instance.collapse(0)
    
    
    
    
    . destroy( )

    销毁该实例。它移除了排水槽元素,并且大小的CSS样式 Split.js 设置为。 添加于 v1.1.1.

    
    instance.destroy()
    
    
    
    

    CSS

    在非opionionated中,唯一的CSS Split.js 集是元素的宽度或者高度。 剩下的一切都交给你了。 在使用水平模式时,必须设置要素和檐沟高度。 如果 gutters 高度为 0像素,则将不可见。 下面是一些基本的CSS,用来对 gutters 进行样式化,尽管它不是必需的。 这里 repo 中包含两个 grip 映像:

    .gutter {
     background-color: #eee;
     background-repeat: no-repeat;
     background-position: 50%;
    }.gutter.gutter-horizontal {
     background-image: url('grips/vertical.png');
     cursor: ew-resize;
    }.gutter.gutter-vertical {
     background-image: url('grips/horizontal.png');
     cursor: ns-resize;
    }

    grip 图像是小文件,可以包含在base64中:

    .gutter.gutter-vertical {
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=')
    }.gutter.gutter-horizontal {
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==')
    }

    当使用 border-box 调整元素大小时,Split.js 也工作得最好。 要应用这些样式,必须手动添加 split 类:

    .split {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
    }

    对于水平分割,请确保布局允许将元素( 包括檐沟) 显示为 side-by-side。 浮动元素是一个选项:

    .split, .gutter.gutter-horizontal {
     float: left;
    }

    如果使用浮动,则设置元素的高度,包括 gutters。 如果高度设置为 0像素,则 gutters 将不可见。

    .split, .gutter.gutter-horizontal {
     height: 300px;
    }

    溢出也可以处理,以便在元素中滚动:

    .split {
     overflow-y: auto;
     overflow-x: hidden;
    }

    浏览器支持

    库使用 CSS calc()CSS box-sizing 和JS getBoundingClientRect()。 以下浏览器支持这些功能:

    Chrome logoFirefox logoInternet Explorer logoOpera logoSafari logoBrowserStack logo

    优雅地返回 IE 8和 below,只设置初始宽度/高度,不允许拖动。 IE 8要求 Array.isArray()Array.forEachArray.mapArray.filterObject.keys()getComputedStyle polyfills。 这里脚本来自 Polyfill.io,其中包含了所有这些,将 1.91 kb添加到。

    如果你支持收费价格为 ,则只需要:

    
    <script src="///polyfill.io/v2/polyfill.min.js?features=Array.isArray,Array.prototype.forEach,Array.prototype.map,Object.keys,Array.prototype.filter,getComputedStyle"></script>
    
    
    
    

    项目测试运行在多个桌面和移动浏览器,由 BrowserStack

    Credits

    贡献者

    这个项目已经存在,因为所有的人都。 [ Contribute ]。

    支持者

    感谢我们所有的支持者 !


    VIEW  UTIL  UTI  工具  查看  UNO  
    相关文章