easyUI中在js调整layout中的高度

最新推荐文章于 2023-05-16 14:57:58 发布

六一首席

最新推荐文章于 2023-05-16 14:57:58 发布

阅读量1k

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_20594019/article/details/99840532

版权

前端专栏收录该内容

39 篇文章

订阅专栏

本文详细介绍了如何使用EasyUI框架进行网页布局，并通过JavaScript实现布局区域的高度动态调整，确保了不同屏幕尺寸下布局的适应性和美观性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="cc" class="easyui-layout" style="margin:20px;width:95%;height:650px;">
    <div data-options="region:'west'" style="width:70%;">
        <div id="left-Content" class="easyui-tabs" style="width:97%;height:100%;toolPosition:right"></div>
    </div>
    <div data-options="region:'center',title:'已选择单位'" style="padding:5px;width: 30%">
        <span id="chooseNum"></span>
        <div>
            <ul id="chooseList">
            </ul>
        </div>
    </div>
    <div data-options="region:'south'" id="bottomtUi" style="height:60px;vertical-align: middle;display: table-cell">
       
    </div>
</div>

js中

function setHeight(){
		var win_width = $("#cc").width();
		$('#cc').layout();    
		var w=$('#cc').layout('panel',"west");
		var p=$('#cc').layout('panel',"south");
		var c=$('#cc').layout('panel',"center");
		w.panel('resize',{height:win_width*0.8});
		c.panel('resize',{height:win_width*0.8});
		p.panel('resize',{height:"60px"});
    }