LigerUI入门帮助（API里没写的入门帮助）【不断更新】

LigerUI 左侧导航与右侧 Tab 联动配置

在基于 LigerUI 的页面布局中，若需实现左侧区域（如 #accordion1）的链接点击后在右侧区域（#framecenter）显示内容并自动生成 Tab 选项卡，需进行以下配置。

1. 定义高度自适应回调函数

首先，创建 f_heightChanged 函数。该函数通常作为布局组件（ligerLayout）的高度变化回调，用于在窗口缩放或布局调整时，同步更新 Tab 和 Accordion 的高度：

function f_heightChanged(options) {
    if (tab) {
        tab.addHeight(options.diff);
    }
    if (accordion && options.middleHeight - 24 > 0) {
        accordion.setHeight(options.middleHeight - 24);
    }
}

2. 初始化组件管理器

在页面加载完成的 jQuery 入口函数 $(function() { ... }); 中，获取并缓存 Tab、Accordion 和 Tree 组件的管理器实例，以便后续调用：

$(function() {
    tab = $("#framecenter").ligerGetTabManager();
    accordion = $("#accordion1").ligerGetAccordionManager();
    tree = $("#tree1").ligerGetTreeManager();

    // 其他布局初始化逻辑...
});

3. 配置左侧 Tree 组件

将左侧树形组件（#tree1）的声明调整为如下形式，关闭复选框与滑动动画以适配常规导航交互：

$("#tree1").ligerTree({
    checkbox: false,
    slide: false
});

提示：完成上述基础配置后，通常还需在 Tree 组件的 onClick 事件中调用 tab.addTabItem() 方法，将节点对应的 URL 或 HTML 内容动态渲染至右侧 Tab 区域。具体事件绑定与参数传递逻辑请结合实际业务需求补充。