ContextMenu 组件 — sgcHTML | eSeGeCe

ContextMenu

TsgcHTMLComponent_ContextMenu — 渲染一个作用于 CSS 选择器的右键 Bootstrap 下拉菜单，支持图标、分隔线、标题和服务器路由的操作，适用于 Delphi、C++ Builder 和 .NET。

概览

TsgcHTMLComponent_ContextMenu

向 Items 添加条目，用 TargetSelector 限定右键点击范围，然后读取 HTML 属性；右键点击会定位并打开菜单。

组件类

TsgcHTMLComponent_ContextMenu

渲染为

Bootstrap 5 下拉菜单 <ul> + 绑定脚本

家族

覆盖层与反馈

语言

Delphi, C++ Builder, .NET

快速入门

添加条目、限定目标范围、渲染它

为每个条目调用 Items.Add 并设置其 Caption/Icon/DataAction（或 Href），用 TargetSelector 限制右键点击范围，然后读取 HTML。

uses
  sgcHTML_Component_ContextMenu;

var
  oMenu: TsgcHTMLComponent_ContextMenu;
  oItem: TsgcHTMLContextMenuItem;
begin
  oMenu := TsgcHTMLComponent_ContextMenu.Create(nil);
  try
    oMenu.MenuID := 'grid_menu';
    oMenu.TargetSelector := '.grid-row';

    oItem := oMenu.Items.Add;
    oItem.Caption := 'Edit';
    oItem.Icon := 'bi bi-pencil';
    oItem.DataAction := 'row:edit';

    oItem := oMenu.Items.Add;
    oItem.Caption := 'Delete';
    oItem.Icon := 'bi bi-trash';
    oItem.DataAction := 'row:delete';

    oItem := oMenu.Items.Add;
    oItem.Divider := True;

    oItem := oMenu.Items.Add;
    oItem.Caption := 'Open in new tab';
    oItem.Href := '/grid/open';

    WebModule.Response := oMenu.HTML;   // hidden <ul> + right-click binding script
  finally
    oMenu.Free;
  end;
end;

// includes: sgcHTML_Component_ContextMenu.hpp

TsgcHTMLComponent_ContextMenu *oMenu = new TsgcHTMLComponent_ContextMenu(NULL);
try
{
  oMenu->MenuID = "grid_menu";
  oMenu->TargetSelector = ".grid-row";

  TsgcHTMLContextMenuItem *oItem = oMenu->Items->Add();
  oItem->Caption = "Edit";
  oItem->Icon = "bi bi-pencil";
  oItem->DataAction = "row:edit";

  oItem = oMenu->Items->Add();
  oItem->Caption = "Delete";
  oItem->Icon = "bi bi-trash";
  oItem->DataAction = "row:delete";

  oItem = oMenu->Items->Add();
  oItem->Divider = true;

  String html = oMenu->HTML;   // hidden <ul> + right-click binding script
}
__finally
{
  delete oMenu;
}

using esegece.sgcWebSockets;

var menu = new TsgcHTMLComponent_ContextMenu();
menu.MenuID = "grid_menu";
menu.TargetSelector = ".grid-row";

var item = menu.Items.Add();
item.Caption = "Edit";
item.Icon = "bi bi-pencil";
item.DataAction = "row:edit";

item = menu.Items.Add();
item.Caption = "Delete";
item.Icon = "bi bi-trash";
item.DataAction = "row:delete";

item = menu.Items.Add();
item.Divider = true;

string html = menu.HTML;   // hidden <ul> + right-click binding script

参考

关键属性与方法

您最常使用的成员。

条目

Items 保存这些条目，每个都是一个 TsgcHTMLContextMenuItem，具有 Caption、Icon、Href、DataAction、Divider、Header 和 Disabled。

添加条目

Items.Add 向集合追加一个条目并返回它，以便您设置其属性。

目标选择器

将右键点击捕获限制在匹配此 CSS 选择器的元素上；留空时，页面上任意右键点击都会打开菜单。

数据操作

点击带有 DataAction 的条目会通过 window.sgcHTMX.send（表单使用的同一通道）发送它，并触发一个 sgcContextMenu:action DOM 事件。

分隔线与标题

Divider 渲染一条分隔线；Header 渲染一个不可点击的分区标题，而非链接。

菜单 ID

显式设置菜单的元素 id；留空时会自动生成并缓存一个唯一 id。

资源

继续探索

	在线帮助此组件的完整 API 参考和使用指南。	打开
	所有 sgcHTML 组件浏览 80 多个组件的完整功能矩阵。	打开
	下载免费试用版30 天试用版附带 60.HTML 演示项目。	打开
	价格Single、Team 和 Site 授权，均含完整源代码。	打开