ligerLayout布局（左右分栏）

爱跳舞的程序员.

于 2023-04-25 17:27:00 发布

阅读量36

点赞数

文章标签： javascript 前端 html html5 css

本文链接：https://blog.csdn.net/weixin_38195943/article/details/136228452

版权

该代码示例展示了如何使用jQuery插件ligerLayout在HTML页面中创建一个左侧为树形菜单，右侧展示内容的布局。通过设置leftWidth和topHeight属性调整布局尺寸，确保菜单和内容区域的显示。

摘要由CSDN通过智能技术生成

场景需求：左边框框用来放树菜单，右边就是点击菜单后显示的内容

$(function () {
    $("#layoutMain").ligerLayout({
        topHeight :80,
        leftWidth: 180, 
        height: '100%'
        });
});

或者(左边栏取五分之一的宽度)

$(function () {
var w=$("#layoutMain").width();
$("#layoutMain").ligerLayout({
topHeight :80,
leftWidth: w/5,
height: '100%'
});
});

html

     <div id="layoutMain" style="width:99.2%; margin:0 auto; margin-top:4px;">
          <div position="left" id="accordion1"  title="变电站名称"> 

           </div>     
       
           <div position="center" id="framecenter"> 

           </div>
       </div>

效果