由jQuery实现上下、左右动态改变左右、上下两个div的大小，需要自己引入jquery1.8.0.min.js包

可用于页面布局。

//============================index.html======================================

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>分隔栏动态改变div大小—基于jQuery</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit"/>
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"/>
<meta name="author" content="wind"/>
<meta name="robots" content="index,follow"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>

<style>
.hj-wrap{
width:100%;
height: 200px;
margin:10px auto;
clear:both;
border:1px solid red;
overflow: hidden;
}
.hj-transverse-split-div{
float: left;
height: 100%;
padding:0px;
background: #0099EE;
overflow: hidden;
border:0px solid #0099ff;
}
.hj-wrap .hj-transverse-split-label{
float:left;
width: 10px;
height: 100%;
display:block;
cursor: e-resize;
background-color:#fff;
}
table tr td{
border:1px solid #fff;
}
.hj-vertical-split-div{
height:150px;
border:0px solid red;
width:99.9%;
margin:0 auto;
background-color:#0099ff;
}
.hj-vertical-split-label{
width: 100%;
height: 10px;
display:block;
cursor: n-resize;
background-color:#fff;
}
</style>
</head>
<body>
<div class='hj-wrap'>
<div class="hj-transverse-split-div">
<label>ggg</label>
</div>
<label class="hj-transverse-split-label">&nbsp;</label>
<div class="hj-transverse-split-div">中</div>
<label class="hj-transverse-split-label">&nbsp;</label>
<div class="hj-transverse-split-div">右</div>
<label class="hj-transverse-split-label">&nbsp;</label>
<div class="hj-transverse-split-div">右1</div>
<label class="hj-transverse-split-label">&nbsp;</label>
<div class="hj-transverse-split-div">右2</div>
</div>

<div class='hj-wrap'>
<div class="hj-transverse-split-div">
<h1>Hello word</h1>
</div>
<label class="hj-transverse-split-label">&nbsp;</label>
<div class="hj-transverse-split-div">中</div>
<label class="hj-transverse-split-label">&nbsp;</label>
<div class="hj-transverse-split-div">右</div>
<label class="hj-transverse-split-label">&nbsp;</label>
<div class="hj-transverse-split-div">右1</div>
</div>

<div class='hj-wrap'>
<div class="hj-transverse-split-div">
<h2>javascript</h2>
</div>
<label class="hj-transverse-split-label">&nbsp;</label>
<div class="hj-transverse-split-div">中</div>
<label class="hj-transverse-split-label">&nbsp;</label>
<div class="hj-transverse-split-div">
<table>
<tr>
<td>1</td>
<td>2</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td colspan="2">1</td>
</tr>
</table>
</div>
</div>

<div class='hj-wrap' style="height:500px;">
<div class="hj-transverse-split-div">
<h1>Hello word</h1>
</div>
<label class="hj-transverse-split-label">&nbsp;</label>
<div class="hj-transverse-split-div" style="background-color:#fff;">
<div class="hj-vertical-split-div">上</div>
<label class="hj-vertical-split-label">&nbsp;</label>
<div class="hj-vertical-split-div">中</div>
<label class="hj-vertical-split-label">&nbsp;</label>
<div class="hj-vertical-split-div">下</div>
</div>

</div>

<div class='hj-wrap' style="height:500px;">
<div class="hj-transverse-split-div">
<h1>Hello word</h1>
</div>
<label class="hj-transverse-split-label">&nbsp;</label>
<div class="hj-transverse-split-div">中</div>
<label class="hj-transverse-split-label">&nbsp;</label>
<div class="hj-transverse-split-div" style="background-color:#fff;">
<div class="hj-vertical-split-div">上</div>
<label class="hj-vertical-split-label">&nbsp;</label>
<div class="hj-vertical-split-div">中</div>
<label class="hj-vertical-split-label">&nbsp;</label>
<div class="hj-vertical-split-div">下</div>
</div>
</div>

<div class='hj-wrap' style="height:500px;">
<div class="hj-vertical-split-div">上</div>
<label class="hj-vertical-split-label">&nbsp;</label>
<div class="hj-vertical-split-div">中</div>
<label class="hj-vertical-split-label">&nbsp;</label>
<div class="hj-vertical-split-div">下</div>
</div>

<script src="jquery-1.8.0.min.js"></script>

<script src="monitorSplitWindows.js"></script>
</div>
</body>
</html>

//==================================monitorSplitWindows.js代码=======================================

/**
* name: monitorSplitWindows.js
* route: /static/js/control/ui
* author: luozhubang
* date: 2016-10-26
* function: 监听窗口拖动事件，依赖于/static/js/control/ui/DynamicWindow.js,
* 演示地址：http://www.vfkjsd.cn/div/2/div.html
*/
$(function(){
//alert("ok");
//鼠标横向、竖向操作对象
var thisHorizontalObject,thisVerticalObject;
//文档对象
var doc = document;
//查找横向分割栏
var horizontalLabels = $(".hj-wrap").find('.hj-transverse-split-label');
//查找竖向分割栏
var verticalLabels = $(".hj-wrap").find('.hj-vertical-split-label');

//定义一个对象
function PointerObject(){
this.el = null;//当前鼠标选择的对象
this.clickX =0;//鼠标横向初始位置
this.clickY =0;//鼠标竖向初始位置
this.horizontalDragging=false;//判断鼠标可否横向拖动
this.verticalDragging=false;//判断鼠标可否竖向拖动
}

doc.onmousedown = function(e){
console.log("--mousedown--");
horizontalLabels = $(".hj-wrap").find('.hj-transverse-split-label');
verticalLabels = $(".hj-wrap").find('.hj-vertical-split-label');
//判断窗体个数，并初始化窗体宽度
if($(".hj-wrap").length>0){
for(var i=0;i<$(".hj-wrap").length;i++){
var hjDivNums = $($(".hj-wrap")[i]).children(".hj-transverse-split-div");
var defaultWidth =Math.floor(100/hjDivNums.length);
$($(".hj-wrap")[i]).children(".hj-transverse-split-div").width(defaultWidth-1+"%");
}
}
//横向分隔栏绑定事件
horizontalLabels.bind('mousedown',function(e){
thisHorizontalObject = new PointerObject();
thisHorizontalObject.horizontalDragging = true;//鼠标可横向拖动
thisHorizontalObject.el = this;
thisHorizontalObject.clickX = e.pageX;//记录鼠标横向初始位置
});

//竖向分隔栏绑定事件
verticalLabels.bind('mousedown',function(e){
console.log("----");
thisVerticalObject = new PointerObject();
thisVerticalObject.verticalDragging = true;//鼠标可竖向拖动
thisVerticalObject.el = this;
thisVerticalObject.clickY = e.pageY;//记录鼠标竖向初始位置
});
}

//横向分隔栏绑定事件
horizontalLabels.bind('mousedown',function(e){
thisHorizontalObject = new PointerObject();
thisHorizontalObject.horizontalDragging = true;//鼠标可横向拖动
thisHorizontalObject.el = this;
thisHorizontalObject.clickX = e.pageX;//记录鼠标横向初始位置
});

//竖向分隔栏绑定事件
verticalLabels.bind('mousedown',function(e){
console.log("----");
thisVerticalObject = new PointerObject();
thisVerticalObject.verticalDragging = true;//鼠标可竖向拖动
thisVerticalObject.el = this;
thisVerticalObject.clickY = e.pageY;//记录鼠标竖向初始位置
});

doc.onmousemove = function(e){
//鼠标横向拖动
if(thisHorizontalObject != null){
if (thisHorizontalObject.horizontalDragging) {
var changeDistance = 0;
var nextWidth = $(thisHorizontalObject.el).next().width();
var prevWidth = $(thisHorizontalObject.el).prev().width();
if(thisHorizontalObject.clickX>=e.pageX){
//鼠标向左移动
changeDistance = Number(thisHorizontalObject.clickX)-Number(e.pageX);
if($(thisHorizontalObject.el).prev().width()-changeDistance<20){

}else{
$(thisHorizontalObject.el).prev().width($(thisHorizontalObject.el).prev().width()-changeDistance);
$(thisHorizontalObject.el).next().width($(thisHorizontalObject.el).next().width()+changeDistance);
thisHorizontalObject.clickX=e.pageX;
$(thisHorizontalObject.el).offset({left:e.pageX-4});
}
}else{
//鼠标向右移动
changeDistance = Number(e.pageX)-Number(thisHorizontalObject.clickX);
if($(thisHorizontalObject.el).next().width()-changeDistance<20){

}else{
$(thisHorizontalObject.el).prev().width($(thisHorizontalObject.el).prev().width()+changeDistance);
$(thisHorizontalObject.el).next().width($(thisHorizontalObject.el).next().width()-changeDistance);
thisHorizontalObject.clickX=e.pageX;
$(thisHorizontalObject.el).offset({left:e.pageX-4});
}
}
$(thisHorizontalObject.el).width(10);
}
}
//鼠标竖向拖动
if(thisVerticalObject != null){
if (thisVerticalObject.verticalDragging) {
var changeDistance = 0;
var nextheight = $(thisVerticalObject.el).next().height();
var prevheight = $(thisVerticalObject.el).prev().height();
if(thisVerticalObject.clickY>=e.pageY){
//鼠标向上移动
changeDistance = Number(thisVerticalObject.clickY)-Number(e.pageY);
if($(thisVerticalObject.el).prev().height()-changeDistance<20){

}else{
$(thisVerticalObject.el).prev().height($(thisVerticalObject.el).prev().height()-changeDistance);
$(thisVerticalObject.el).next().height($(thisVerticalObject.el).next().height()+changeDistance);
thisVerticalObject.clickY=e.pageY;
$(thisVerticalObject.el).offset({top:e.pageY-4});
}
}else{
//鼠标向下移动
changeDistance = Number(e.pageY)-Number(thisVerticalObject.clickY);
if($(thisVerticalObject.el).next().height()-changeDistance<20){

}else{
$(thisVerticalObject.el).prev().height($(thisVerticalObject.el).prev().height()+changeDistance);
$(thisVerticalObject.el).next().height($(thisVerticalObject.el).next().height()-changeDistance);
thisVerticalObject.clickY=e.pageY;
$(thisVerticalObject.el).offset({top:e.pageY-4});
}
}
$(thisVerticalObject.el).height(10);
}
}
};

$(doc).mouseup(function(e) {
console.log("-+");
//鼠标释放时判断是否有横向操作对象
if (thisHorizontalObject != null) {
thisHorizontalObject.horizontalDragging = false;//修改横向可拖动状态
thisHorizontalObject = null;//当鼠标释放的时候，销毁横向对象
}
//鼠标释放时判断是否有竖向操作对象
if (thisVerticalObject != null) {
thisVerticalObject.verticalDragging = false;//修改竖向可拖动状态
thisVerticalObject = null;//当鼠标释放的时候，销毁竖向对象
}

e.cancelBubble = true;
});

});

jQuery实现动态分割的更多相关文章

  1. 转载 * jQuery实现动态分割div—通过拖动分隔栏实现上下、左右动态改变左右、上下两个相邻div的大小

    由jQuery实现上下.左右动态改变左右.上下两个div的大小,需要自己引入jquery1.8.0.min.js包 可用于页面布局. //============================ind ...

  2. jQuery实现动态分割div—通过拖动分隔栏实现上下、左右动态改变左右、上下两个相邻div的大小

    由jQuery实现上下.左右动态改变左右.上下两个div的大小,需要自己引入jquery1.8.0.min.js包 可用于页面布局. //============================ind ...

  3. jQuery实现动态分割div

    转自:https://www.cnblogs.com/herd/p/6014848.html 演示地址:http://www.vfkjsd.cn/div/2/div.html

  4. [转]jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  5. Jquery Mobile 动态添加元素然后刷新 转

    Jquery Mobile 动态添加元素然后刷新 (2013-05-09 12:39:05) 转载▼ 标签: it 分类: Mobile jquery 表单元素每一个元素都有自己刷新的方法,每当改变它 ...

  6. 【jQuery Demo】jQuery打造动态下滑菜单

    作者:漫凯维奇      来源:[教程]jQuery打造动态下滑菜单 Tip:这只是一个转载,源代码可以在上面的来源博文中下载 此教程将分步讲解如何使用JQuery和CSS打造一个炫酷动感菜单.效果如 ...

  7. 一款jQuery立体感动态下拉导航菜单特效

    一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...

  8. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

  9. jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

随机推荐

  1. 【WCF】如何将WCF部署到远程服务器

    一.前言       最近需要将自己写的WCF服务部署到远程服务器上,也就是公网上.宿主是IIS,在配置成功之前遇到了很多问题,问题如下: 1. WCF该怎么宿主在IIS上,为何会出现 400 Bad ...

  2. C#批量插入数据到Sqlserver中的四种方式

    我的新书ASP.NET MVC企业级实战预计明年2月份出版,感谢大家关注! 本篇,我将来讲解一下在Sqlserver中批量插入数据. 先创建一个用来测试的数据库和表,为了让插入数据更快,表中主键采用的 ...

  3. VMware安装CentOS时，无法以图形界面安装解决办法

    有的同学问: 用虚拟机软件(vmware.VirtualBox)安装CentOS系统时, 安装过程中没有中文,也没有出现图形界面,都是以命令行方式去安装, 有时候又会出现图形界面,不知道哪里配置的问题 ...

  4. php简单实现socket通信

    socket通信的原理在这里就不说了,它的用途还是比较广泛的,我们可以使用socket来做一个API接口出来,也可以使用socket来实现两个程序之间的通信,我们来研究一下在php里面如何实现sock ...

  5. 无脑简单 命令升级git Centos

    yum remove git yum install zlib (系统默认已经装上) yum install zlib-devel ># wget https://github.com/git/ ...

  6. jq实现发送短信验证码

    前端的工作经常会涉及到短信验证的功能(注册或获取当前手机号信息),于是自己也写了一个,路过的小伙伴可以看一下 未点击状态 点击之后的状态 var timer=""; ; var v ...

  7. Android中使用Notification实现进度通知栏（Notification示例三）

    我们在使用APP的过程中,软件会偶尔提示我们进行版本更新,我们点击确认更新后,会在通知栏显示下载更新进度(已知长度的进度条)以及安装情况(不确定进度条),这就是我们今天要实现的功能.实现效果如下: 在 ...

  8. 整理分享原生态mac AndroidStudio的快捷键

    使用AndroidStudio开发半年了,一路爬坑至今,刚由Windows转mac一个星期.通过查些资料和自己摸索,记录一些常用的快捷键,犹豫个人不喜欢改快捷键,所以都是原生的.特此分享给大家!欢迎补 ...

  9. django ftp 研究

    做个网络运维多年,一直在用filezilla搭建ftp服务器,总体上还是不错的.但是用户配置与管理方面还是不太方便,希望能够通过web页面对用户进行管理和对ftp服务器进行监控. 工具: (1)dja ...

  10. ubuntu 16 安装django nginx uWSGI

    参考 https://www.digitalocean.com/community/tutorials/how-to-serve-django-applications-with-uwsgi-and- ...