ContextMenu 컴포넌트 — sgcHTML | eSeGeCe

ContextMenu

TsgcHTMLComponent_ContextMenu — Delphi, C++ Builder 및 .NET에서 아이콘, 구분선, 헤더 및 서버 라우팅 액션을 갖춘, CSS 선택자 범위로 지정된 우클릭 Bootstrap 드롭다운 메뉴를 렌더링합니다.

한눈에 보기

TsgcHTMLComponent_ContextMenu

Items에 항목을 추가하고, TargetSelector로 우클릭 범위를 지정한 다음, HTML 속성을 읽습니다. 우클릭하면 메뉴가 위치를 잡고 열립니다.

컴포넌트 클래스

TsgcHTMLComponent_ContextMenu

렌더링

Bootstrap 5 드롭다운 메뉴 <ul> + 바인딩 스크립트

패밀리

오버레이 및 피드백

언어

Delphi, C++ Builder, .NET

QuickStart

항목을 추가하고, 대상 범위를 지정하고, 렌더링하기

각 항목에 대해 Items.Add를 호출하여 Caption/Icon/DataAction(또는 Href)을 설정하고, TargetSelector로 우클릭을 제한한 다음, 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

레퍼런스

주요 속성 및 메서드

가장 자주 사용하게 되는 멤버.

항목

Items는 항목을 담으며, 각 항목은 Caption, Icon, Href, DataAction, Divider, Header 및 Disabled를 가진 TsgcHTMLContextMenuItem입니다.

Items.Add

Items.Add는 컬렉션에 항목을 추가하고 이를 반환하여 속성을 설정할 수 있게 합니다.

TargetSelector

이 CSS 선택자와 일치하는 요소로 우클릭 캡처를 제한합니다. 비워 두면 페이지의 모든 우클릭이 메뉴를 엽니다.

DataAction

DataAction이 있는 항목을 클릭하면 window.sgcHTMX.send(폼이 사용하는 것과 동일한 채널)를 통해 전송되고 sgcContextMenu:action DOM 이벤트가 발생합니다.

구분선 및 헤더

Divider는 구분선을 렌더링합니다. Header는 링크 대신 클릭할 수 없는 섹션 제목을 렌더링합니다.

MenuID

메뉴의 요소 id를 명시적으로 설정합니다. 비워 두면 고유 id가 자동으로 생성되어 캐시됩니다.

리소스

계속 살펴보기

	온라인 도움말이 찱포넌트의 전체 API 참조 및 사용 가이드입니다.	열기
	모든 sgcHTML 컴포넌트80개 이상의 컴포넌트 전체 기능 매트릭스를 둘러보십시오.	열기
	무료 체험판 다운로드30일 체험판에는 60.HTML 데모 프로젝트가 포함됩니다.	열기
	가격전체 소스 코드가 포함된 Single, Team 및 Site 라이선스.	열기