ContextMenu-component — sgcHTML | eSeGeCe

ContextMenu

TsgcHTMLComponent_ContextMenu — render een rechtsklik-Bootstrap-dropdownmenu gekoppeld aan een CSS-selector, met iconen, scheidingslijnen, koppen en server-gerouteerde acties, in Delphi, C++ Builder en .NET.

In één oogopslag

TsgcHTMLComponent_ContextMenu

Voeg items toe aan Items, beperk rechtsklikken met TargetSelector, en lees dan de HTML-eigenschap; een rechtsklik positioneert en opent het menu.

Componentklasse

TsgcHTMLComponent_ContextMenu

Rendert

Bootstrap 5 dropdown-menu <ul> + koppelingsscript

Familie

Overlays en feedback

Talen

Delphi, C++ Builder, .NET

QuickStart

Voeg items toe, beperk het doel, render het

Roep Items.Add aan voor elk item en stel de Caption/Icon/DataAction in (of Href), beperk rechtsklikken met TargetSelector, en lees dan 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

Referentie

Belangrijkste eigenschappen en methoden

De members die je het vaakst gebruikt.

Items

Items bevat de items, elk een TsgcHTMLContextMenuItem met Caption, Icon, Href, DataAction, Divider, Header en Disabled.

Items.Add

Items.Add voegt een item toe aan de collectie en retourneert het zodat je de eigenschappen kunt instellen.

TargetSelector

Beperkt het opvangen van rechtsklikken tot elementen die overeenkomen met deze CSS-selector; leeg gelaten opent elke rechtsklik op de pagina het menu.

DataAction

Klikken op een item met een DataAction stuurt het via window.sgcHTMX.send (hetzelfde kanaal dat formulieren gebruiken) en activeert een sgcContextMenu:action DOM-gebeurtenis.

Divider en Header

Divider rendert een scheidingslijn; Header rendert een niet-klikbare sectietitel in plaats van een link.

MenuID

Stelt het element-id van het menu expliciet in; leeg gelaten wordt automatisch een uniek id gegenereerd en gecachet.

Bronnen

Blijf ontdekken

	Online helpVolledige API-referentie en gebruikshandleiding voor dit onderdeel.	Open
	Alle sgcHTML-componentenBlader door de volledige functiematrix van 80+ componenten.	Openen
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Openen
	PrijzenSingle-, Team- en Site-licenties met volledige broncode.	Openen