Componente ContextMenu — sgcHTML

De un vistazo

TsgcHTMLComponent_ContextMenu

Añade entradas a Items, delimita los clics derechos con TargetSelector, y luego lee la propiedad HTML; un clic derecho posiciona y abre el menú.

Clase del componente

TsgcHTMLComponent_ContextMenu

Genera

<ul> de menú desplegable de Bootstrap 5 + script de vinculación

Familia

Superposiciones y Avisos

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Añade entradas, delimita el destino, renderízalo

Llama a Items.Add para cada entrada y define su Caption/Icon/DataAction (o Href), restringe los clics derechos con TargetSelector, y luego lee 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

Referencia

Propiedades y métodos clave

Los miembros que más vas a usar.

Items

Items contiene las entradas, cada una un TsgcHTMLContextMenuItem con Caption, Icon, Href, DataAction, Divider, Header y Disabled.

Items.Add

Items.Add añade una entrada a la colección y la devuelve para que puedas definir sus propiedades.

TargetSelector

Restringe la captura del clic derecho a los elementos que coincidan con este selector CSS; si se deja vacío, cualquier clic derecho en la página abre el menú.

DataAction

Al hacer clic en una entrada con DataAction, esta se envía a través de window.sgcHTMX.send (el mismo canal que usan los formularios) y dispara un evento DOM sgcContextMenu:action.

Separador y encabezado

Divider renderiza una línea separadora; Header renderiza un título de sección no clicable en lugar de un enlace.

MenuID

Define explícitamente el id del elemento del menú; si se deja vacío, se genera y almacena en caché un id único automáticamente.

Recursos

Sigue explorando

	Ayuda en líneaReferencia completa de la API y guía de uso para este componente.	Abrir
	Todos los componentes de sgcHTMLExplora la matriz completa de más de 80 componentes.	Abrir
	Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.	Abrir
	PreciosLicencias Single, Team y Site con código fuente completo.	Abrir

ContextMenu