goldenLayout布局

版本系列	最新版本	状态	核心特点
v2.x（主力）	v2.6.0	活跃维护	TypeScript 重构、移除 jQuery 依赖、强类型配置、优化响应式 / 性能
v1.x（维护）	v1.5.9	仅 bug 修复	基于 jQuery、原生 JS 实现，兼容性好但无新功能

因项目框架是jQuery+HTML，所以我使用的版本是v1.5.9，能更好的兼容jQuery语法及一些Dom操作。

官网(v1.5.9)

二、下载引入方式

1.NPM 安装最新版：

bash 复制代码

npm install golden-layout@latest # 自动安装 v2.6.0
# 或指定版本
npm install golden-layout@2.6.0

2.历史版本 / 源码：

GitHub 仓库：golden-layout/golden-layout（官方源码，可查看 tag 列表）；
CDN 资源：unpkg、jsDelivr 等可直接引用 golden-layout的编译文件。

3.CDN 引入（快速集成）：

html 复制代码

<!-- 先引入 jQuery（v1.11+ / v2+ / v3+ 均可） -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<!-- 再引入 GoldenLayout v1.5.9 核心文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.9/goldenlayout.min.js"></script>
<!-- 引入默认样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.9/css/goldenlayout-base.css">
<!-- 引入主题样式(亮色) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.9/css/goldenlayout-light-theme.css">

关于布局的主题，官方给提供了两种，一种是暗夜，一种是明亮的，根据需求选择，也可以自定义主题样式。

三、示例

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery + GoldenLayout v1.5.9</title>
  <!-- 先引入 jQuery（v1.11+ / v2+ / v3+ 均可） -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
  <!-- 再引入 GoldenLayout v1.5.9 核心文件 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.9/goldenlayout.min.js"></script>
    <!-- 引入默认样式 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.9/css/goldenlayout-base.css">
    <!-- 引入主题样式(亮色) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.9/css/goldenlayout-light-theme.css">
  <style>
    #layout-container { width: 100%; height: 800px; }
  </style>
</head>
<body>
  <!-- 容器 -->
  <div id="layout-container"></div>

  <script>
    // 1. 初始化配置（v1.x 配置与 v2.x 核心兼容，无破坏性变更）
    const config = {
      hasHeaders: true,
      reorderEnabled: true,
      content: [
        {
          type: 'row',
          content: [
            {
              type: 'component',
              componentName: 'jqueryTable',
              title: 'jQuery 表格',
              width: 0.7
            },
            {
              type: 'component',
              componentName: 'jqueryForm',
              title: 'jQuery 表单',
              width: 0.3
            }
          ]
        }
      ]
    };

    // 2. 初始化 GoldenLayout（依赖 jQuery，需在 jQuery 加载后执行）
    const layout = new GoldenLayout(config, $('#layout-container'));

    // 3. 注册组件（直接使用 jQuery 操作 DOM）
    layout.registerComponent('jqueryTable', function(container, state) {
      // 用 jQuery 创建内容（符合现有项目习惯）
      const $table = $('<table border="1"><tr><th>ID</th><th>名称</th></tr><tr><td>1</td><td>测试</td></tr></table>');
      container.getElement().append($table); // container.getElement() 返回 jQuery 对象
    });

    layout.registerComponent('jqueryForm', function(container) {
      const $form = $(`
        <form>
          <input type="text" placeholder="输入内容" class="form-input">
          <button type="button" class="submit-btn">提交</button>
        </form>
      `);
      // 绑定 jQuery 事件（无缝集成现有逻辑）
      $form.find('.submit-btn').click(function() {
        alert('提交内容：' + $form.find('.form-input').val());
      });
      container.getElement().append($form);
    });

    // 4. 渲染布局
    layout.init();
  </script>
</body>
</html>

上述代码是一个简单的示例，实现了左右可拖拽的布局，包含了类似tab标签的标题展示。

四、基础属性介绍

1、全局根配置（Root Config）

这是初始化 GoldenLayout 时传入的顶层配置对象，包含布局的整体规则和初始结构：

配置项	类型	默认值	说明
`content`	`LayoutItem[]`	`[]`	布局的核心内容结构，由各类布局容器（行、列、堆栈、组件）组成，是配置的核心
`settings`	`SettingsConfig`	见下方	全局行为 / 交互设置（如拖拽、调整大小、快捷键等）
`dimensions`	`DimensionsConfig`	见下方	全局尺寸规则（如最小宽度 / 高度、边框大小等）
`labels`	`LabelsConfig`	见下方	自定义文本标签（如关闭按钮、最大化按钮的提示）
`theme`	`string`	`light`	主题名称（内置 `light`/`dark`，也可自定义）
`hasHeaders`	`boolean`	`true`	全局是否显示组件头部（标签栏）
`reorderEnabled`	`boolean`	`true`	是否允许拖拽重新排序组件
`selectionEnabled`	`boolean`	`true`	是否允许选中组件（点击头部）
`popoutWholeStack`	`boolean`	`false`	弹出组件时是否弹出整个堆栈（而非单个组件）
`blockedPopoutsThrowError`	`boolean`	`true`	弹出被阻止时是否抛出错误（否则静默失败）
`closePopoutsOnUnload`	`boolean`	`true`	页面卸载时是否关闭弹出的窗口
`hideHeadersOnDrag`	`boolean`	`true`	拖拽组件时是否隐藏其他组件的头部
`lockAspectRatio`	`boolean`	`false`	调整组件大小时是否锁定宽高比
`responsiveMode`	`string`	`static`	响应式模式：`static`（固定）/`compact`（紧凑）/`fluid`（流体）

2、核心子配置（嵌套在 `content` 中）

content 是一个数组，元素为布局容器 或组件项，支持嵌套组合（如行包含列、列包含堆栈）：

1. 布局容器类型（Row/Column/Stack）

配置项	类型	说明
`type`	`string`	容器类型：`row`（行）/`column`（列）/`stack`（堆栈 / 标签页）
`content`	`LayoutItem[]`	容器内的子元素（可嵌套其他容器或组件）
`width`	`number`	仅行 / 列有效，占父容器的宽度比例（0-1，如 `0.5` 表示 50%）
`height`	`number`	仅行 / 列有效，占父容器的高度比例（0-1）
`isClosable`	`boolean`	`true`	容器内组件是否可关闭
`title`	`string`	-	堆栈 / 组件的标题（显示在头部）
`activeItemIndex`	`number`	`0`	堆栈中默认激活的标签页索引
componentState	object	{}	存储自定义核心属性

componentState中可以添加一些必要属性，向组件注册函数传递初始化数据（如 URL、接口参数、默认配置等），替代全局变量，实现组件数据隔离，在注册的事件中，第二个参数可以获取到自定义的必要属性，在渲染dom时可以用到。

2. 组件项（Component）

最终承载业务内容的最小单元，嵌套在容器中：

配置项	类型	说明
`type`	`string`	固定为 `component`
`componentName`	`string`	自定义组件名称（需提前注册）
`componentState`	`any`	传递给组件的自定义数据（如初始化参数）
`title`	`string`	组件头部显示的标题
`isClosable`	`boolean`	`true`	是否允许关闭该组件
`isHidden`	`boolean`	`false`	是否默认隐藏
`width`	`number`	初始宽度（像素或比例，取决于父容器）
`height`	`number`	初始高度（像素或比例）
`minWidth`	`number`	组件最小宽度（覆盖全局 `dimensions.minItemWidth`）
`minHeight`	`number`	组件最小高度（覆盖全局 `dimensions.minItemHeight`）

这些是最为常用的属性，可以根据自身需求做出相应的调整。

五、常用方法介绍

1.getItemsById()

通过组件id (确保id的唯一性) 获取已注册过得组件，返回的是一个数组，若没有的话返回空数组，类似的方法还有getItemsByType( type )、getComponentsByName( componentName)

javascript 复制代码

  let homeContents = myLayout.root.getItemsById('home');

取到指定组件后，里面又一个tab属性，其中有一个isActive(是否活动标签), true则是当前活动的标签页

javascript 复制代码

homeContents[0].tab.isActive;// 是当前活跃标签 返回 true，反之返回false

2.popout()

组件中的方法用于关闭当前组件标签，并弹出到新的window

javascript 复制代码

myLayout.root.getItemsById('test')[0].popout()

3.getActiveContentItem(contentitem)

只有堆栈有这个方法！返回当前选择的内容项。

4.setActiveContentItem(contentitem)

这个方法相当于实现tab标签的点击事件

以上是对goldenLayout的简单介绍，若想进一步了解可到官网中查看。