ContextMenu Component — sgcHTML | eSeGeCe

ContextMenu

TsgcHTMLComponent_ContextMenu — renderizza un menu dropdown Bootstrap attivato dal tasto destro, delimitato a un selettore CSS, con icone, divisori, intestazioni e azioni instradate al server, in Delphi, C++ Builder e .NET.

In sintesi

TsgcHTMLComponent_ContextMenu

Aggiungi voci a Items, delimita i clic destri con TargetSelector, quindi leggi la proprietà HTML; un clic destro posiziona e apre il menu.

Classe del componente

TsgcHTMLComponent_ContextMenu

Renderizza

Bootstrap 5 dropdown-menu <ul> + binding script

Famiglia

Overlay e Feedback

Linguaggi

Delphi, C++ Builder, .NET

QuickStart

Aggiungi le voci, delimita il target, renderizzalo

Chiama Items.Add per ogni voce e imposta il suo Caption/Icon/DataAction (oppure Href), limita i clic destri con TargetSelector, quindi leggi 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

Riferimento

Proprietà e metodi principali

I membri che utilizzerai più spesso.

Items

Items contiene le voci, ciascuna un TsgcHTMLContextMenuItem con Caption, Icon, Href, DataAction, Divider, Header e Disabled.

Items.Add

Items.Add aggiunge una voce alla collezione e la restituisce così puoi impostarne le proprietà.

TargetSelector

Limita l’intercettazione del clic destro agli elementi che corrispondono a questo selettore CSS; se lasciato vuoto, ogni clic destro sulla pagina apre il menu.

DataAction

Il clic su una voce con DataAction la invia tramite window.sgcHTMX.send (lo stesso canale usato dai moduli) e attiva un evento DOM sgcContextMenu:action.

Divider e Header

Divider renderizza una linea di separazione; Header renderizza un titolo di sezione non cliccabile al posto di un link.

MenuID

Imposta esplicitamente l’id dell’elemento del menu; se lasciato vuoto, un id univoco viene generato e memorizzato automaticamente.

Risorse

Continua a esplorare

	Guida in lineaRiferimento API completo e guida all’uso per questo componente.	Apri
	Tutti i componenti sgcHTMLEsplora la matrice completa delle funzionalità di oltre 80 componenti.	Apri
	Scarica la Prova GratuitaLa prova di 30 giorni include i progetti demo 60.HTML.	Apri
	PrezziLicenze Single, Team e Site con codice sorgente completo.	Apri