ContextMenu Component — sgcHTML | eSeGeCe

ContextMenu

TsgcHTMLComponent_ContextMenu — erzeugen Sie ein Rechtsklick-Dropdown-Menü, begrenzt auf einen CSS-Selektor, mit Icons, Trennlinien, Überschriften und serverseitig weitergeleiteten Aktionen, in Delphi, C++ Builder und .NET.

Auf einen Blick

TsgcHTMLComponent_ContextMenu

Fügen Sie Einträge zu Items hinzu, begrenzen Sie Rechtsklicks mit TargetSelector, und lesen Sie dann die HTML-Eigenschaft; ein Rechtsklick positioniert und öffnet das Menü.

Komponentenklasse

TsgcHTMLComponent_ContextMenu

Rendert

Bootstrap-5-Dropdown-Menü-<ul> + Bindungsskript

Familie

Overlays & Feedback

Sprachen

Delphi, C++ Builder, .NET

QuickStart

Einträge hinzufügen, Ziel begrenzen, rendern

Rufen Sie Items.Add für jeden Eintrag auf und setzen Sie dessen Caption/Icon/DataAction (oder Href), beschränken Sie Rechtsklicks mit TargetSelector, und lesen Sie dann 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

Referenz

Wichtige Eigenschaften & Methoden

Die Member, die Sie am häufigsten verwenden.

Items

Items enthält die Einträge, jeder ein TsgcHTMLContextMenuItem mit Caption, Icon, Href, DataAction, Divider, Header und Disabled.

Items.Add

Items.Add hängt einen Eintrag an die Sammlung an und gibt ihn zurück, sodass Sie seine Eigenschaften setzen können.

TargetSelector

Beschränkt das Erfassen von Rechtsklicks auf Elemente, die diesem CSS-Selektor entsprechen; bleibt es leer, öffnet jeder Rechtsklick auf der Seite das Menü.

DataAction

Ein Klick auf einen Eintrag mit DataAction sendet ihn über window.sgcHTMX.send (denselben Kanal, den auch Formulare nutzen) und löst ein sgcContextMenu:action-DOM-Ereignis aus.

Divider & Header

Divider rendert eine Trennlinie; Header rendert einen nicht klickbaren Abschnittstitel statt eines Links.

MenuID

Setzt die Element-ID des Menüs explizit; bleibt sie leer, wird automatisch eine eindeutige ID erzeugt und zwischengespeichert.

Ressourcen

Weiter entdecken

	Online-HilfeVollständige API-Referenz und Verwendungshandbuch für diese Komponente.	Öffnen
	Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 80 Komponenten.	Öffnen
	Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte.	Öffnen
	PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode.	Öffnen