Main Content

本页翻译不是最新的。点击此处可查看最新英文版本。

HTML 属性

控制 HTML UI 组件的外观和行为

自 R2019b 起

全页展开

通过使用 uihtml 创建的 HTML UI 组件，您可以显示原始 HTML 文本，或将 HTML、JavaScript® 或 CSS 嵌入到您的 App 以及对接到第三方 JavaScript 库。HTML 属性控制着 HTML UI 组件的外观和行为。使用圆点表示法引用特定的对象和属性。

fig = uifigure;
h = uihtml(fig); 
h.Position = [100 100 150 100];
h.HTMLSource = '<p style="font-family:sans-serif">This is <mark>marked</mark> text.</p>';

HTML

全部展开

HTML 标记或文件，指定为字符向量或字符串标量，包含 HTML 文本或 HTML 文件的路径。所有 HTML 标记和文件必须采用正确格式。如果指定的字符向量或字符串标量以 .html 结尾，则它假定为 HTML 文件的路径。

在嵌入 HTML 文本时，您不需要指定 <html> 或 <body> 标签。如果使用 uifigure 函数创建的 MATLAB® 图窗所使用的 Chromium 浏览器支持您指定的标记，则它将会呈现。如果您的代码需要更多结构，则可以考虑改用 HTML 文件。

如果将 HTMLSource 属性设置为 HTML 文件的路径，该文件必须位于本地文件系统可以访问的位置。如果您正在使用支持文件，如 JavaScript、CSS、库或图像，请将这些文件放在本地文件系统可以访问的位置，在 HTML 文件中引用它们，并将 HTMLSource 属性设置为该 HTML 文件的路径。您的组件代码使用的任何支持文件都必须位于包含您为 HTMLSource 属性指定的 HTML 文件的文件夹中，或位于该文件夹的子文件夹中。有关详细信息，请参阅局限性。

示例: h = uihtml('HTMLSource','CustomCharts.html') 指定 HTML 文件。

示例: h = uihtml('HTMLSource','<p>This is <span style="color:red">red</span> text.</p>') 指定标记。

MATLAB 数据，指定为任何 MATLAB 数据类型。当 HTMLSource 的值是定义 JavaScript 对象的 HTML 文件的路径时，请使用此参数。然后，这些数据可以在 MATLAB HTML UI 组件和 JavaScript 对象之间同步。

要在 MATLAB 和您正在 App 中嵌入的第三方内容之间同步 Data 属性的值，请在一个 HTML 文件中创建一个 setup 函数，它将名为 htmlComponent 的 JavaScript 对象连接到 MATLAB 中的 HTML UI 组件。然后，将 HTMLSource 属性值设置为该文件的路径。

Data 属性值的更改只会单向触发回调事件。具体而言，

  • 当在 MATLAB 中设置 Data 属性时，htmlComponent JavaScript 对象的 Data 属性也会更新并触发 'DataChanged' 事件的 JavaScript 事件侦听程序。

  • 当在 JavaScript 中设置 htmlComponent.Data 时，MATLAB 中的 HTML UI 组件的 Data 属性也会更新并触发 DataChangedFcn 回调。

如果您有嵌套元胞数组、结构体数组或 MATLAB 表数组数据等数据，您可能需要有关数据如何在 MATLAB 和 JavaScript 之间转换的更多信息。当在 MATLAB 中设置 HTML UI 组件的 Data 属性时，数据将使用 jsonencode 函数进行转换，与 JavaScript 同步，使用 JSON.parse() 进行解析，最后设置为 htmlComponent JavaScript 对象的 Data 属性。通过 JSON.stringify() 和 jsondecode 函数，也可以进行反向转换。Data 属性是唯一与 JavaScript 同步的属性。

有关它支持的数据类型的详细信息，请参考 jsonencode 函数。如果 jsonencode 函数不支持您的数据类型，请使用数据类型转换函数（如 num2str）将您的数据转换为支持的类型。然后，将其设置为 Data 属性的值。

有关如何编写支持数据同步的 HTML 文件以及 htmlComponent JavaScript 对象的属性的详细信息，请参阅Create HTML Content in Apps。

交互性

全部展开

可见性状态，指定为 'on' 或 'off'，或者指定为数值或逻辑值 1 (true) 或 0 (false)。值 'on' 等效于 true，'off' 等效于 false。因此，您可以使用此属性的值作为逻辑值。该值存储为 matlab.lang.OnOffSwitchState 类型的 on/off 逻辑值。

  • 'on' - 显示对象。

  • 'off' - 隐藏对象而不删除它。您仍然可以访问不可见 UI 组件的属性。

要使您的 App 更快地启动，请将不需要在启动时出现的所有 UI 组件的 Visible 属性设置为 'off'。

工具提示，指定为字符向量、字符向量元胞数组、字符串数组或一维分类数组。如果使用此属性，则在运行时当用户将指针悬停在组件上时，将显示消息。即使禁用组件，工具提示也会显示。要显示多行文本，请指定字符向量元胞数组或字符串数组。数组中的每个元素变为一行文本。如果将此属性指定为分类数组，MATLAB 将使用数组中的值，而不是完整的类别集。

上下文菜单，指定为使用 uicontextmenu 函数创建的 ContextMenu 对象。

注意

当设置 HTML UI 组件的 HTMLSource 属性时，此属性不起作用。要在用户右键点击组件时显示上下文菜单，请检测事件并编写代码，以编程方式在预期位置打开上下文菜单。

示例：打开 HTML UI 组件的上下文菜单

创建一个名为 cmexample.html 的 HTML 文件。在该文件中：

  • 创建一个构成组件外观的 <div> 元素。

  • 编写一个 setup 函数，以将 htmlComponent JavaScript 对象连接到 MATLAB 中的 HTML UI 组件。

  • 在 setup 函数中添加一个事件侦听程序，用于侦听 JavaScript 对象上的 contextmenu 事件（如右键点击）并创建一个侦听程序回调函数。当 contextmenu 事件发生时，该侦听程序回调设置 htmlComponent 对象的 Data 属性，以存储触发事件的操作和事件触发的位置。然后，可以从关联的 MATLAB HTML UI 组件中获得这些数据。

<!DOCTYPE html> 
<html> 
<body> 

<div id="contextMenuTarget" style="background-color:gray;width:200px;height:200px;">
    Right-click on this component to open a context menu.
</div>

<script type="text/javascript">
    function setup(htmlComponent) {
        document.getElementById("contextMenuTarget").addEventListener("contextmenu", function(event) {
            htmlComponent.Data = {Action:"showContextMenu", PosData:[event.clientX, event.clientY]};
        });
    }
</script>

</body> 
</html>

在 MATLAB 脚本中，在 UI 图窗中创建一个 HTML UI 组件和一个上下文菜单对象。将 cmexample.html 文件指定为 HTML UI 组件的 HTMLSource 属性。然后，定义一个名为 openContextMenu 的回调函数，该回调函数将上下文菜单作为输入，并且在 HTML UI 组件的 Data 属性发生更改时执行。在该回调函数中，检查触发回调执行的事件是否为上下文菜单事件。如果是，则检索事件的位置，并使用它在图窗中的预期位置打开上下文菜单。

fig = uifigure;

h = uihtml(fig,"HTMLSource","cmexample.html");
h.Position = [100 100 200 200];

cm = uicontextmenu(fig);
m1 = uimenu(cm,"Text","Option 1");
m2 = uimenu(cm,"Text","Option 2");
h.ContextMenu = cm;

h.DataChangedFcn = {@openContextMenu,cm};

function openContextMenu(src,event,cm)
    switch src.Data.Action
        case "showContextMenu"
            p = getpixelposition(src,true);
            xClick = src.Data.PosData(1);
            yClick = src.Data.PosData(2);
            xOpen = p(1)+xClick;
            yOpen = p(2)+p(4)-yClick;
            open(cm,xOpen,yOpen);
    end
end

运行脚本并右键点击 HTML UI 组件以打开上下文菜单。

HTML UI component inside a UI figure window. The HTML UI component contains text that says: "Right-click on this component to open a context menu." There is a context menu open on the component.

位置

全部展开

HTML UI 组件相对于父容器的位置和大小，指定为 [left bottom width height] 形式的四元素向量。此表介绍该向量中的每个元素。

元素描述
left父容器的内部左边缘与 HTML UI 组件的外部左边缘之间的距离
bottom父容器的内部下边缘与 HTML UI 组件的外部下边缘之间的距离
widthHTML UI 组件的左右外部边缘之间的距离
heightHTML UI 组件的上下外部边缘之间的距离

Position 值相对于父容器的可绘制区域。可绘制区域是指容器边框内的区域，不包括装饰元素（如菜单栏或标题）所占的区域。

所有测量值都以像素为单位。

HTML UI 组件的内部位置和大小，指定为 [left bottom width height] 形式的四元素向量。所有测量值都以像素为单位。此属性值等同于 Position 属性值。

此 属性 为只读。

HTML UI 组件的外部位置和大小，以 [left bottom width height] 形式的四元素向量形式返回。所有测量值都以像素为单位。此属性值等同于 Position 属性值。

布局选项，指定为 GridLayoutOptions 对象。此属性为网格布局容器的子级组件指定选项。如果组件不是网格布局容器的子级（例如，它是图窗或面板的子级），则此属性为空且不起作用。但是，如果组件是网格布局容器的子级，则可以通过在 GridLayoutOptions 对象上设置 Row 和 Column 属性，将组件放置在网格的所需行和列中。

例如，以下代码将一个 HTML UI 组件放置在其父网格的第三行第二列中。

g = uigridlayout([4 3]);
h = uihtml(g);
h.HTMLSource = '<body style="background-color:powderblue;"><p>Hello World!</p></body>';
h.Layout.Row = 3;
h.Layout.Column = 2;

要使 HTML UI 组件占据连续的行或列，请将 Row 或 Column 属性指定为二元素向量。例如，以下 HTML UI 组件占据第 2 到第 3 列。

h.Layout.Column = [2 3];

回调

全部展开

在数据更改时执行的回调，指定为下列值之一：

  • 函数句柄。

  • 第一个元素是函数句柄的元胞数组。元胞数组中的后续元素是传递到回调函数的参数。

  • 包含有效 MATLAB 表达式的字符向量（不推荐）。MATLAB 在基础工作区计算此表达式。

当 htmlComponent JavaScript 对象中的 Data 属性的值发生变化时，将更新 MATLAB HTML UI 组件的 Data 属性，并执行此回调。

此回调函数可以访问关于 JavaScript 对象中数据更改的特定信息。MATLAB 将 DataChangedData 对象中的信息作为第二个参数传递给回调函数。在 App 设计工具中，该参数名为 event。您可以使用圆点表示法查询 DataChangedData 对象属性。例如，event.PreviousData 返回上次更新或更改前 Data 的先前值。DataChangedData 对象不可用于指定为字符向量的回调函数。

下表列出了 DataChangedData 对象的属性。

属性描述
Data上次 DataChanged 事件产生的最新数据
PreviousData上次 DataChanged 事件前的数据
Source

执行回调的 MATLAB HTML UI 组件

EventName'DataChanged'

有关编写回调的详细信息，请参阅App 设计工具中的回调。

自 R2023a 起

从 HTML 源代码接收到事件时回调，指定为以下值之一：

  • 函数句柄。

  • 第一个元素是函数句柄的元胞数组。元胞数组中的后续元素是传递到回调函数的参数。

  • 包含有效 MATLAB 表达式的字符串标量或字符向量（不推荐）。MATLAB 在基础工作区计算此表达式。

当通过对 JavaScript htmlComponent 对象调用 sendEventToMATLAB 函数将事件从 JavaScript 发送到 MATLAB 时，将执行此回调。使用此回调编写 MATLAB 代码，以响应用户交互或 HTML 组件中的更改，如点击按钮 HTML 元素。有关详细信息，请参阅Create HTML Content in Apps。

此回调函数可以访问关于 JavaScript 对象发送的事件的特定信息。MATLAB 将 HTMLEventReceivedData 对象中的信息作为第二个参数传递给回调函数。在 App 设计工具中，该参数名为 event。使用圆点表示法查询 HTMLEventReceivedData 对象属性。例如，event.HTMLEventName 返回由 JavaScript 对象指定的事件的名称。HTMLEventReceivedData 对象不可用于指定为字符串标量或字符向量的回调函数。

下表列出了 HTMLEventReceivedData 对象的属性。

属性描述
HTMLEventName由 JavaScript 代码中调用的 sendEventToMATLAB 函数指定的事件的名称
HTMLEventData由 JavaScript 代码中调用的 sendEventToMATLAB 函数指定的事件数据
Source

执行回调的 MATLAB HTML UI 组件

EventName'HTMLEventReceived'

有关编写回调的详细信息，请参阅Create Callbacks for Apps Created Programmatically。

对象创建函数，指定为下列值之一：

  • 函数句柄。

  • 第一个元素是函数句柄的元胞数组。元胞数组中的后续元素是传递到回调函数的参数。

  • 包含有效 MATLAB 表达式的字符向量（不推荐）。MATLAB 在基础工作区计算此表达式。

有关将回调指定为函数句柄、元胞数组或字符向量的详细信息，请参阅App 设计工具中的回调。

此属性指定要在 MATLAB 创建对象时执行的回调函数。MATLAB 将在执行 CreateFcn 回调之前初始化所有属性值。如果不指定 CreateFcn 属性，则 MATLAB 执行默认的创建函数。

对现有组件设置 CreateFcn 属性没有任何作用。

如果将此属性指定为函数句柄或元胞数组，则可以使用回调函数的第一个参数访问正在创建的对象。否则，使用 gcbo 函数访问该对象。

对象删除函数，指定为下列值之一：

  • 函数句柄。

  • 第一个元素是函数句柄的元胞数组。元胞数组中的后续元素是传递到回调函数的参数。

  • 包含有效 MATLAB 表达式的字符向量（不推荐）。MATLAB 在基础工作区计算此表达式。

有关将回调指定为函数句柄、元胞数组或字符向量的详细信息，请参阅App 设计工具中的回调。

此属性指定在 MATLAB 删除对象时要执行的回调函数。MATLAB 在销毁对象的属性之前执行 DeleteFcn 回调。如果不指定 DeleteFcn 属性，则 MATLAB 执行默认的删除函数。

如果将此属性指定为函数句柄或元胞数组，则可以使用回调函数的第一个参数访问要删除的对象。否则，使用 gcbo 函数访问该对象。

回调执行控件

全部展开

回调中断，指定为 'on' 或 'off'，或者指定为数值或逻辑值 1 (true) 或 0 (false)。值 'on' 等效于 true，'off' 等效于 false。因此，您可以使用此属性的值作为逻辑值。该值存储为 matlab.lang.OnOffSwitchState 类型的 on/off 逻辑值。

此属性确定是否可以中断运行中回调。有以下两种回调状态要考虑：

  • 运行中回调是当前正在执行的回调。

  • 中断回调是试图中断运行中回调的回调。

每次执行处理回调队列的命令时，MATLAB 都会确定回调中断行为。这些命令包括 drawnow、figure、uifigure、getframe、waitfor 和 pause。

如果运行中回调不包含上述命令之一，则不会发生中断。MATLAB 首先完成执行运行中回调，然后执行中断回调。

如果运行中回调确实包含上述命令之一，则由运行中回调所属对象的 Interruptible 属性来确定是否发生中断：

  • 如果 Interruptible 的值为 'off'，则不会发生中断。此时，由中断回调所属对象的 BusyAction 属性确定中断回调是被丢弃还是添加到回调队列中。

  • 如果 Interruptible 的值为 'on'，则发生中断。下次 MATLAB 处理回调队列时，它会停止运行中回调的执行，并执行中断回调。在中断回调完成后，MATLAB 将继续执行运行中回调。

注意

回调的中断和执行在以下情况下会有不同的表现：

  • 如果中断回调是 DeleteFcn、CloseRequestFcn 或 SizeChangedFcn 回调，则无论是否存在 Interruptible 属性值都会发生中断。

  • 如果运行中回调当前正在执行 waitfor 函数，则无论是否存在 Interruptible 属性值都会发生中断。

  • 如果中断回调由 Timer 对象所有，则回调将根据调度执行，而不考虑 Interruptible 属性值。

注意

发生中断时，MATLAB 不保存属性状态或显示内容。例如，gca 或 gcf 命令返回的对象可能会在另一个回调执行时发生改变。

回调排队，指定为 'queue' 或 'cancel'。BusyAction 属性决定 MATLAB 如何处理中断回调的执行。有以下两种回调状态要考虑：

  • 运行中回调是当前正在执行的回调。

  • 中断回调是试图中断运行中回调的回调。

BusyAction 属性仅在同时满足以下两个条件时才确定回调排队行为：

在这些情况下，由中断回调所属对象的 BusyAction 属性确定 MATLAB 如何处理中断回调。以下是 BusyAction 属性的可能值：

  • 'queue' - 将中断回调放入队列中，以便在运行中回调执行完毕后进行处理。

  • 'cancel' - 不执行中断回调。

此 属性 为只读。

删除状态，以 matlab.lang.OnOffSwitchState 类型的 on/off 逻辑值形式返回。

当 DeleteFcn 回调开始执行时，MATLAB 会将 BeingDeleted 属性设置为 'on'。BeingDeleted 属性将一直保持 'on' 设置状态，直到组件对象不再存在为止。

在查询或修改对象之前，请先检查其 BeingDeleted 属性的值，以确认它不是待删除项。

父级/子级

全部展开

父容器，指定为使用 uifigure 函数创建的 Figure 对象或其子容器之一：Tab、Panel、ButtonGroup 或 GridLayout。如果未指定容器，MATLAB 将调用 uifigure 函数以创建一个新 Figure 对象来充当父容器。

对象句柄的可见性，指定为 'on'、'callback' 或 'off'。

此属性控制对象在其父级的子级列表中的可见性。当对象未显示在其父级的子级列表中时，通过搜索对象层次结构或查询属性来获取对象的函数不会返回该对象。这些函数包括 get、findobj、clf 和 close。对象即使在不可见时也有效。如果可以访问某个对象，则可以设置和获取其属性，并将其传递给针对对象进行运算的任意函数。

HandleVisibility 值描述
'on'对象始终可见。
'callback'对象对于回调或回调调用的函数可见，但对于命令行调用的函数不可见。此选项阻止通过命令行访问对象，但允许回调函数访问它。
'off'对象始终不可见。该选项用于防止另一函数无意中对 UI 进行更改。将 HandleVisibility 设置为 'off' 可在执行该函数时暂时隐藏对象。

标识符

全部展开

此 属性 为只读。

图形对象的类型，以 'uihtml' 形式返回。

对象标识符，指定为字符向量或字符串标量。您可以指定唯一的 Tag 值作为对象的标识符。如果需要访问您代码中其他位置的对象，可以使用 findobj 函数基于 Tag 值搜索对象。

用户数据，指定为任何 MATLAB 数组。例如，您可以指定标量、向量、矩阵、元胞数组、字符数组、表或结构体。使用此属性存储对象上的任意数据。

如果您在 App 设计工具中工作，请在该 App 中创建公共或私有属性以共享数据，而不是使用 UserData 属性。有关详细信息，请参阅在用 App 设计工具创建的 App 内共享数据。

版本历史记录

在 R2019b 中推出

全部展开

另请参阅

函数

主题