备案控制台
首页 智能媒体管理 操作指南 文档处理 WebOffice前端开发 JS-SDK API 公共 CommandBarControl

CommandBarControl

更新时间: 2023-01-09 19:13:56

本文介绍CommandBarControl的方法、属性和事件。

方法

CommandBars(CommandBarId).Controls.Item()

单个定制元素，即具体到对应的自定义元素，我们可以获取该元素，从而控制该元素的标题、点击该元素等等。

  • 效果演示

    • 新增新增

    • 删除删除

  • 语法

    表达式.CommandBars(CommandBarId).Controls.Item(Index)

    表达式：文档类型应用对象

  • 参数

    属性

    数据类型

    是否必填

    描述

    Index

    Number

    是

    第Index个定制元素。

  • 示例

    async function example() {
  await instance.ready();

  const app = instance.Application;

  //获取定制元素对象开始Tab
  const controls = await app.CommandBars('StartTab').Controls;
  
  //新增1个按钮定制元素
  const controlButton = await controls.Add(1);
  controlButton.Caption = '按钮';

  //6000 ms后删除该定制元素
  setTimeout(() => {
    controlButton.Delete();
  }, 6000);
}

CommandBars(CommandBarId).Controls.Add(Type).Delete()

通过Delete()方法，您可以删除定制元素。

  • 效果演示

    • 删除前添加后

    • 删除后添加前

  • 语法

    表达式.CommandBars(CommandBarId).Controls.Add(Type).Delete()

    表达式：文档类型应用对象

  • 示例

    async function example() {
  await instance.ready();

  const app = instance.Application;

  //定制元素对象开始Tab
  const controls = await app.CommandBars('StartTab').Controls;
  
  //添加1个按钮定制元素并设置标题为“按钮”
  const controlButton = await controls.Add(1);
  controlButton.Caption = '按钮';
  
  //添加1个下拉框定制元素并设置标题为“下拉框”
  const controlPopup = await controls.Add(10);
  controlPopup.Caption = '下拉框';

  //6000 ms后删除这2个定制元素
  setTimeout(() => {
    controlButton.Delete();
    controlPopup.Delete();
  }, 6000);
}

CommandBars(CommandBarId).Controls.Add(Type).Execute()

通过Execute()方法，您可以单击定制元素。配合CommandBars(CommandBarId).Controls.Add(Type).OnAction()，可以得知按钮是否被单击。

  • 语法

    表达式.CommandBars(CommandBarId).Controls.Add(Type).Execute()

    表达式：文档类型应用对象

  • 示例

    async function example() {
  await instance.ready();

  const app = instance.Application;

  //获取定制元素对象开始Tab
  const controls = await app.CommandBars('StartTab').Controls;
  
  //添加1个按钮定制元素并设置单击监听
  const controlButton = await controls.Add(1);
  controlButton.Caption = '按钮';
  controlButton.OnAction = () => console.log('按钮点击了');
  
  //添加1个下拉框定制元素并设置单击监听
  const controlPopup = await controls.Add(10);
  controlPopup.Caption = '下拉框';
  controlPopup.OnAction = () => console.log('下拉框点击了');

  //6000 ms后执行单击操作
  setTimeout( async () => {
    await controlButton.Execute();
    await controlPopup.Execute();
  }, 6000);
}

CommandBars(CommandBarId).Controls.Add(Type).SetFocus()

通过SetFocus()方法，您可以将光标聚集到对应位置，即聚焦定制元素。

  • 效果演示聚焦

  • 语法

    表达式.CommandBars(CommandBarId).Controls.Add(Type).SetFocus()

    表达式：文档类型应用对象

  • 示例

    async function example() {
  await instance.ready();

  const app = instance.Application;

  //获取定制元素对象开始Tab
  const controls = await app.CommandBars('StartTab').Controls;
  
  //添加1个按钮定制元素并聚焦
  const controlButton = await controls.Add(1);
  controlButton.Caption = '按钮';
  await controlButton.SetFocus();
  
  //添加1个下拉框定制元素并聚焦
  const controlPopup = await controls.Add(10);
  controlPopup.Caption = '下拉框';
  await controlPopup.SetFocus();
}

属性

CommandBars(CommandBarId).Controls.Add(Type).Caption

通过设置Caption属性，您可以设置定制元素的标题。

  • 效果显示添加后

  • 语法

    表达式.CommandBars(CommandBarId).Controls.Add(Type).Caption

    表达式：文档类型应用对象

  • 示例

    async function example() {
  await instance.ready();

  const app = instance.Application;

  //获取定制元素对象开始Tab
  const controls = await app.CommandBars('StartTab').Controls;
  
  //添加1个按钮定制元素并设置标题为“按钮”
  const controlButton = await controls.Add(1);
  controlButton.Caption = '按钮';
  
  //添加1个下拉框定制元素并设置标题为“下拉框”
  const controlPopup = await controls.Add(10);
  controlPopup.Caption = '下拉框';
}

CommandBars(CommandBarId).Controls.Add(Type).Enabled

通过设置Enabled属性，您可以禁用定制元素。

  • 效果演示（置灰）禁用

  • 语法

    表达式.CommandBars(CommandBarId).Controls.Add(Type).Enabled

    表达式：文档类型应用对象

  • 示例

    async function example() {
  await instance.ready();

  const app = instance.Application;

  //定制元素对象开始Tab
  const controls = await app.CommandBars('StartTab').Controls;
  
  //添加1个按钮定制元素并禁用
  const controlButton = await controls.Add(1);
  controlButton.Caption = '按钮';
  controlButton.Enabled = false;
  
  //添加1个下拉框定制元素并禁用
  const controlPopup = await controls.Add(10);
  controlPopup.Caption = '下拉框';
  controlPopup.Enabled = false;
}

CommandBars(CommandBarId).Controls.Add(Type).Picture

通过设置Picture属性，您可以定制元素图标。如下以Base64为例介绍如何设置对应的元素图标。

  • 效果演示图标

  • 语法

    表达式.CommandBars(CommandBarId).Controls.Add(Type).Picture

    表达式：文档类型应用对象

  • 示例

    async function example() {
  await instance.ready();

  const app = instance.Application;

  //获取定制元素对象开始Tab
  const controls = await app.CommandBars('StartTab').Controls;
  
  //添加1个按钮定制元素并设置图标
  const controlButton = await controls.Add(1);
  controlButton.Caption = '按钮';
  controlButton.Picture = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjM0Q0NzU3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik04LjIxMyAxM0g2LjhsNi42MzYtNi42MzYtNC4yNDMtNC4yNDMtNy4wNyA3LjA3MUw1LjkyOCAxM0g0LjUxNUwxLjA2IDkuNTQ2YS41LjUgMCAwIDEgMC0uNzA3TDguODM5IDEuMDZhLjUuNSAwIDAgMSAuNzA3IDBsNC45NSA0Ljk1YS41LjUgMCAwIDEgMCAuNzA3TDguMjEzIDEzeiIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTQuNTM2IDYuMzY0bDQuOTUgNC45NS0uNzA3LjcwNy00Ljk1LTQuOTV6TTQuNTIxIDEzaDEwLjAzdjFINS40OTZ6Ii8+PC9nPjwvc3ZnPg==';
  
  //添加1个下拉框定制元素并设置图标
  const controlPopup = await controls.Add(10);
  controlPopup.Caption = '下拉框';
  controlPopup.Picture = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik03LjUgMnYyLjVINGEuNS41IDAgMCAwLS41LjV2MmEuNS41IDAgMCAwIC41LjVoOWEuNS41IDAgMCAwIC41LS41VjVhLjUuNSAwIDAgMC0uNS0uNUg5LjVWMmEuNS41IDAgMCAwLS41LS41SDhhLjUuNSAwIDAgMC0uNS41eiIgc3Ryb2tlPSIjM0Q0NzU3Ii8+PHBhdGggZmlsbD0iIzNENDc1NyIgZD0iTTEzIDdoMXY0aC0xeiIvPjxwYXRoIGQ9Ik0xMSAxM2EyIDIgMCAwIDAgMi0yVjguNzY0QTMgMyAwIDEgMSA4Ljc2NCAxM0gxMXoiIGZpbGw9IiMzRDQ3NTciLz48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNMSAxM2gxMHYxSDF6Ii8+PHBhdGggZD0iTTEgMTNhMiAyIDAgMCAwIDItMlY4Ljc2NEEzIDMgMCAwIDEgMSAxNHYtMXoiIGZpbGw9IiMzRDQ3NTciLz48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNMyA3aDF2NEgzeiIvPjwvZz48L3N2Zz4=';
}

CommandBars(CommandBarId).Controls.Add(Type).TooltipText

通过设置tooltipText属性，您可以设置定制元素的悬浮提示。

  • 效果演示

    • 按钮悬浮 按钮

    • 下拉框悬浮 下拉框

  • 语法

    表达式.CommandBars(CommandBarId).Controls.Add(Type).TooltipText

    表达式：文档类型应用对象

  • 示例

    async function example() {
  await instance.ready();

  const app = instance.Application;

  //获取定制元素对象开始Tab
  const controls = await app.CommandBars('StartTab').Controls;
  
  //添加1个按钮定制元素并设置悬浮提示
  const controlButton = await controls.Add(1);
  controlButton.Caption = '按钮';
  controlButton.TooltipText = '悬浮提示-按钮';

  //添加1个下拉框定制元素并设置悬浮提示
  const controlPopup = await controls.Add(10);
  controlPopup.Caption = '下拉框';
  controlPopup.TooltipText = '悬浮提示-下拉框';
}

CommandBars(CommandBarId).Controls.Add(Type).Visible

通过设置Visible属性，您可以设置隐藏或显示元素。

  • 效果演示

    • 显示新增

    • 隐藏删除

  • 语法

    表达式.CommandBars(CommandBarId).Controls.Add(Type).Visible

    表达式：文档类型应用对象

  • 示例

    async function example() {
  await instance.ready();

  const app = instance.Application;

  //获取定制元素对象开始Tab
  const controls = await app.CommandBars('StartTab').Controls;
  
  //添加1个按钮定制元素
  const controlButton = await controls.Add(1);
  controlButton.Caption = '按钮';

  //添加1个下拉框定制元素
  const controlPopup = await controls.Add(10);
  controlPopup.Caption = '下拉框';

  //6000 ms后隐藏定制元素
  setTimeout(() => {
    controlButton.Visible = false;
    controlPopup.Visible = false;
  }, 6000);
}

CommandBars(CommandBarId).Controls.Add(Type).With()

通过设置With()属性，您可以批量设置定制元素的属性。关于各个属性的设置，请参见单个定制元素。

  • 语法

    表达式.CommandBars(CommandBarId).Controls.Add(Type).With(Properties)

    表达式：文档类型应用对象

  • 参数

    属性

    数据类型

    是否必填

    描述

    Caption

    String

    是

    标题。

    Enabled

    Boolean

    否

    是否禁用。

    Picture

    String

    否

    图标。

    Visible

    Boolean

    否

    显示或隐藏。

    TooltipText

    String

    否

    悬浮提示。

  • 示例

    async function example() {
  await instance.ready();

  const app = instance.Application;

  //获取定制元素对象开始Tab
  const controls = await app.CommandBars('StartTab').Controls;
  
  //添加1个按钮定制元素并设置标题和禁用
  const controlButton = await controls.Add(1);
  controlButton.With({
    Caption: 按钮,
    Enabled: false,
  });

  //添加1个下拉框定制元素并设置标题和禁用
  const controlPopup = await controls.Add(10);
  controlPopup.With({
    Caption: '下拉框',
    Enabled: false,
  });
}

事件

CommandBars(CommandBarId).Controls.Add(Type).OnAction()

通过设置OnAction()监听定制元素单击事件后，若按钮被单击，可以通过控制台查看到对应的信息，从而制定相关的业务。

  • 语法

    表达式.CommandBars(CommandBarId).Controls.Add(Type).OnAction() = Function

    表达式：文档类型应用对象

  • 示例

    async function example() {
  await instance.ready();

  const app = instance.Application;

  //获取定制元素对象开始Tab
  const controls = await app.CommandBars('StartTab').Controls;
  
  //添加1个按钮定制元素并设置单击监听
  const controlButton = await controls.Add(1);
  controlButton.Caption = '按钮';
  controlButton.OnAction = () => console.log('按钮点击了');
  
  //添加1个下拉框定制元素并设置单击监听
  const controlPopup = await controls.Add(10);
  controlPopup.Caption = '下拉框';
  controlPopup.OnAction = () => console.log('下拉框点击了');
}

文档推荐
阿里云首页 智能媒体管理 相关技术圈