可上下左右拖动的jQuery分割div容器插件

当前位置:主页 > jQuery库 > 布局和界面 > 可上下左右拖动的jQuery分割div容器插件
可上下左右拖动的jQuery分割div容器插件
分享:

    插件介绍

    split.js是一款可上下左右拖动的jQuery分割div容器插件。该插件可以实现父容器div的上下左右动态分割,并可以上下改变父div的高度,而且宽和高都是按百分比计算。

    浏览器兼容性

    浏览器兼容性
    时间:2019-03-27
    阅读:
简要教程

split.js是一款可上下左右拖动的jQuery分割div容器插件。该插件可以实现父容器div的上下左右动态分割,并可以上下改变父div的高度,而且宽和高都是按百分比计算。

使用方法

在页面中引入jquery和split.js文件。

<script src="js/split.js"></script>                  
<script src="js/jquery.min.js"></script>                  
                
HTML结构
<div class='hj-wrap'>
  <div class="arrow"></div>
</div>
                

实现原理为:首先一个父 div 为hj-wrap,相对定位 。arrow是分割线,用于上下拖动 , 不能占有位置,绝对定位到父容器的底部。上下拖动的 arrow,当上拖动时,arrow的父 div 的高度变小,当下拖动时,arrow的父 div 的高度变大。

横向布局
<div class='hj-wrap'>
    <div class="hj-transverse-split-div">
        横 向
        <label class="hj-transverse-split-label"></label>
    </div>
    <div class="hj-transverse-split-div">横 向 2
        <label class="hj-transverse-split-label"></label>
    </div>
    <div class="hj-transverse-split-div">横 向 3
        <label class="hj-transverse-split-label"></label>
    </div>
    <div class="hj-transverse-split-div">横 向 4
        <label class="hj-transverse-split-label"></label>
    </div>
    <div class="hj-transverse-split-div">横 向 5
    </div>
    <div class="arrow"></div>
</div>
                
竖向布局
<div class='hj-wrap verticals'>
    <div class="hj-vertical-split-div">上
        <label class="hj-vertical-split-label"></label>
    </div>
    <div class="hj-vertical-split-div">中
        <label class="hj-vertical-split-label"></label>
    </div>
    <div class="hj-vertical-split-div">下</div>
    <div class="arrow"></div>
</div>                  
                

该可上下左右拖动的jQuery分割div容器插件的github网址为:https://github.com/biaochenxuying/split