对话框，类似于QQ对话框中间div为工具条拖动上下div框自动适应

最新推荐文章于 2024-09-11 12:01:27 发布

weixin_33794672

最新推荐文章于 2024-09-11 12:01:27 发布

阅读量78

点赞数

文章标签： xhtml python ui

原文链接：https://my.oschina.net/antianlu/blog/189313

版权

2019独角兽企业重金招聘Python工程师标准>>>

在网上找了很对对话框在网页中布局情况，一直没找到满意的，输入内容与现实内容的高度可以根据实际情况改变，中间的工具条可拖动，如果把整个布局放在一个可变化(高和宽)的容器中，也要能保持整个容器上中下也就是：现实内容，工具条，信息输入框，都能随变化而变化。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../js/jquery-1.9.1.min.js"></script>
<script src="../js/jquery-ui-1.10.3.custom.min.js"></script>
<script>
$(function(){
	var inner ;
	var top,bottom;
	$('.menubar').draggable({
		axis: 'y',
		containment:'.left',
		start:function(){
			inner = parseInt($('.container').height())
			$('.menubar').css({'top':'auto','bottom':'opx'});
		},
	drag:function(e,ui){
		top = (ui.position.top/inner) * 100;
		bottom = 100-top;
		$('.top').height(top+'%');
		$('.bottom').height(bottom+'%');
		//$('.middle').css('bottom',bottom+'%');
	},
	stop:function(){
		$('.menubar').css({'top':'auto','bottom':'opx'});
	}
	});
	$('.container').resizable({});
});
</script>
<style>
body,div{margin:0;padding:0}
.container{margin: 0 auto; width:1000px; position:absolute; height:510px; background-color:#CCC; top:100px;}
.left{width:700px; height:100%;float:left; background-color:#0CF; overflow:hidden; position:relative}
.left .top{height:70%; width:100%;  border:1px solid #F00; overflow-x:hidden; overflow-y:auto;padding-bottom:40px; position:relative}
.left .content{height:100%}
.left .menubar{height:40px; position:absolute; background-color:#0F9; bottom:0; width:100% }
.left .bottom{height:30%; width:100%;border:1px solid #00F;overflow-x:hidden; overflow-y:auto;}
.right{width:280px;float:left; height:100%;border:1px solid #009}
</style>
</head>

<body>
<div class="container">
<div class="left">
	<div class="top">
    	<div class="content">内容</div>
    	<div class="menubar">工具条，可拖动</div>
    </div>
    <div class="bottom">内容输入</div>
    
</div>
<div class="right">右侧</div>
</div>
</body>
</html>

如果container，改变大小内部全部会自动适应

转载于:https://my.oschina.net/antianlu/blog/189313