工具栏功能区

SpreadJS 设计器组件提供了两种不同的功能区模式，如下所示：

功能区模式

工具栏模式

工具栏模式对移动设备特别有用。

切换到工具栏模式

SpreadJS 设计器组件启动时默认是功能区模式。不过，您可以按照快速入门中的步骤进行操作，并通过在 setConfig 方法中设置 GC.Spread.Sheets.Designer.ToolbarModeConfig 来切换到工具栏模式，如下所示。

// 使用功能区模式初始化设计器组件
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById('designerHost'));
// 切换到工具栏模式
designer.setConfig(GC.Spread.Sheets.Designer.ToolBarModeConfig);

在功能区模式和工具栏模式之间切换

以下代码示例展示了如何在功能区模式和工具栏模式之间进行切换。

<script>
    window.onload = function () {
        var switchConfig = true;
        var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"));
        document.getElementById('btn').addEventListener('click', function () {
            designer.setConfig(switchConfig ? GC.Spread.Sheets.Designer.ToolBarModeConfig : GC.Spread.Sheets.Designer.DefaultConfig);
            switchConfig = !switchConfig;
        });
    }
</script>
</head>

<body>
    <!--DOM 元素-->
    <div id="designerHost" style="width:100%; height:400px;border: 1px solid gray;"></div>
    <button id="btn">切换模式</button>

将会生成以下输出：

在工具栏模式下设置功能区高度

您可以通过使用工具栏配置中的 ribbonHeight 选项来设置工具栏模式下的功能区高度。工具栏模式下 ribbonHeight 的默认值和推荐值均为 50。

以下代码示例将功能区高度设置为 80。

var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"));
var config = GC.Spread.Sheets.Designer.ToolBarModeConfig;
// 设置功能区高度
config.ribbon.ribbonHeight = 80;
// 设置自定义配置
designer.setConfig(config);

将会生成以下输出：

注意： 功能区模式下推荐的功能区高度为 115 或不进行定义。为了保持工具栏模式，ribbonHeight 应设置为小于 115 的值。