布局框架
可自由拖动分割Div容器jQuery插件
PetitQ
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>
Github 网址为：https://github.com/biaochenxuying/split
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
