可拖拽边框改变div宽度的管理界面——jQuery UI 实现

许多时候，我们需要用户可以调整网页中div的大小，当用户增大一个div的宽度时，需要同时减小临近div的宽度，以防止网页宽度发生变化。这里，我们使用了jQuery UI来帮助我们实现。因此我们需要引入jQuery和jQuery UI。

<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/jquery-ui-1.12.1/jquery-ui.js"></script>

主体HTML代码：

<div class="content">
	<div id="left"></div>
	<div id="middle"></div>
	<div id="right"></div>
</div>

效果图：

当用户拖拽两条黑框中所示的div边缘时，边缘两侧div的大小都会发生变化：

JS代码：

$('#left').resizable({
	handles:'e', //'e'是east，允许拖动右侧边框的意思
	maxWidth:500,
	minWidth:230,
	//resize方法在#left大小改变后被执行
	resize:function(event,ui){ //由于我们调整的是#left的大小，当#left改变时，要同时改变#middle的大小
		$('#middle').width($('#content').width()-ui.size.width-$('#right').width());
	}
});
$('#middle').resizable({
	handles:'e',
	maxWidth:($('#content').width()-$('#left').width())*0.7,
	minWidth:($('#content').width()-$('#left').width())*0.3,
	resize:function(event,ui){ //由于我们调整的是#middle的大小，当#middle改变时，要同时改变#right的大小
		$('#right').width($('#content').width()-ui.size.width-$('#left').width());
	}
});

//当窗口大小改变时，也要等比例缩放各个div的宽度
$(window).resize(function() {
	//计算缩放比例，bili=新的容器的宽度 除以 旧的容器的宽度
	let bili=$('#content').width()/($('#left').width()+$('#middle').width()+$('#right').width());
	$('#left').width($('#left').width()*bili);
	$('#middle').width($('#middle').width()*bili);
	$('#right').width($('#right').width()*bili);
});

//当三个div的大小被用户调整时，阻止resize事件冒泡到window上，使得window的resize事件被误触发
$('body').bind('resize',function(){return false;})