Komponent ContextMenu — sgcHTML | eSeGeCe

ContextMenu

TsgcHTMLComponent_ContextMenu — renderuje menu rozwijane Bootstrap wywoływane prawym przyciskiem myszy, ograniczone do selektora CSS, z ikonami, separatorami, nagłówkami i akcjami kierowanymi po stronie serwera, w Delphi, C++ Builder i .NET.

W skrócie

TsgcHTMLComponent_ContextMenu

Dodaj pozycje do Items, ogranicz kliknięcia prawym przyciskiem za pomocą TargetSelector, a następnie odczytaj właściwość HTML; kliknięcie prawym przyciskiem pozycjonuje i otwiera menu.

Klasa komponentu

TsgcHTMLComponent_ContextMenu

Renderuje

Element <ul> dropdown-menu Bootstrap 5 + skrypt wiążący

Rodzina

Nakładki i komunikaty

Języki

Delphi, C++ Builder, .NET

Szybki start

Dodaj pozycje, ogranicz cel, wyrenderuj

Wywołaj Items.Add dla każdej pozycji i ustaw jej Caption/Icon/DataAction (lub Href), ogranicz kliknięcia prawym przyciskiem za pomocą TargetSelector, a następnie odczytaj 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

Dokumentacja

Kluczowe właściwości i metody

Składniki, po które sięgasz najczęściej.

Elementy

Items przechowuje pozycje, każda jako TsgcHTMLContextMenuItem z Caption, Icon, Href, DataAction, Divider, Header i Disabled.

Dodawanie pozycji

Items.Add dodaje pozycję do kolekcji i zwraca ją, dzięki czemu można ustawić jej właściwości.

Selektor celu

Ogranicza przechwytywanie kliknięć prawym przyciskiem do elementów pasujących do tego selektora CSS; pozostawiony pusty, każde kliknięcie prawym przyciskiem na stronie otwiera menu.

Wysyłanie akcji

Kliknięcie pozycji z ustawionym DataAction wysyła je przez window.sgcHTMX.send (tym samym kanałem, którego używają formularze) i wyzwala zdarzenie DOM sgcContextMenu:action.

Separator i nagłówek

Divider renderuje linię separatora; Header renderuje nieklikalny tytuł sekcji zamiast linku.

Ustawia identyfikator elementu menu jawnie; pozostawiony pusty, unikalny identyfikator jest generowany i buforowany automatycznie.

Zasoby

Poznawaj dalej

	Pomoc onlinePełna dokumentacja API i przewodnik użytkowania tego komponentu.	Otwórz
	Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 80+ komponentów.	Otwórz
	Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML.	Otwórz
	CennikLicencje Single, Team i Site z pełnym kodem źródłowym.	Otwórz