Composant ContextMenu — sgcHTML | eSeGeCe

ContextMenu

TsgcHTMLComponent_ContextMenu — affichez un menu déroulant Bootstrap au clic droit, limité à un sélecteur CSS, avec icônes, séparateurs, en-têtes et actions routées côté serveur, en Delphi, C++ Builder et .NET.

En bref

TsgcHTMLComponent_ContextMenu

Ajoutez des entrées à Items, limitez les clics droits avec TargetSelector, puis lisez la propriété HTML ; un clic droit positionne et ouvre le menu.

Classe du composant

TsgcHTMLComponent_ContextMenu

Produit

Un <ul> de menu déroulant Bootstrap 5 + script de liaison

Famille

Surcouches & Retours

Langages

Delphi, C++ Builder, .NET

QuickStart

Ajoutez des entrées, limitez la cible, affichez-le

Appelez Items.Add pour chaque entrée et définissez son Caption/Icon/DataAction (ou Href), restreignez les clics droits avec TargetSelector, puis lisez 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

Référence

Propriétés & méthodes clés

Les membres que vous utilisez le plus souvent.

Items

Items contient les entrées, chacune un TsgcHTMLContextMenuItem avec Caption, Icon, Href, DataAction, Divider, Header et Disabled.

Items.Add

Items.Add ajoute une entrée à la collection et la renvoie pour que vous puissiez définir ses propriétés.

TargetSelector

Restreint la capture du clic droit aux éléments correspondant à ce sélecteur CSS ; laissé vide, chaque clic droit sur la page ouvre le menu.

DataAction

Cliquer sur une entrée avec un DataAction l'envoie via window.sgcHTMX.send (le même canal utilisé par les formulaires) et déclenche un événement DOM sgcContextMenu:action.

Séparateur & en-tête

Divider affiche une ligne de séparation ; Header affiche un titre de section non cliquable au lieu d'un lien.

MenuID

Définit explicitement l'id de l'élément du menu ; laissé vide, un id unique est généré et mis en cache automatiquement.

Ressources

Continuez l'exploration

	Aide en ligneRéférence API complète et guide d’utilisation pour ce composant.	Ouvrir
	Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 80 composants.	Ouvrir
	Télécharger la version d'essai gratuiteLa version d'essai de 30 jours fournit les projets de démonstration 60.HTML.	Ouvrir
	TarifsLicences Single, Team et Site avec code source complet.	Ouvrir