ContextMenu コンポーネント — sgcHTML | eSeGeCe

ContextMenu

TsgcHTMLComponent_ContextMenu — Delphi、C++ Builder、.NET で、アイコン、区切り線、見出し、サーバーへのアクション送信を備えた、CSS セレクターにスコープされた右クリック用 Bootstrap ドロップダウンメニューをレンダリングします。

概要

TsgcHTMLComponent_ContextMenu

Items にエントリを追加し、TargetSelector で右クリックの対象範囲を指定してから、HTML プロパティを読み取ります。右クリックするとメニューが位置決めされて開きます。

コンポーネントクラス

TsgcHTMLComponent_ContextMenu

レンダリング内容

Bootstrap 5 の dropdown-menu <ul> + バインディングスクリプト

ファミリー

オーバーレイ & フィードバック

言語

Delphi, C++ Builder, .NET

クイックスタート

エントリを追加し、対象範囲を指定し、レンダリングする

各エントリについて 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

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

Divider は区切り線をレンダリングし、Header はリンクの代わりにクリックできないセクションタイトルをレンダリングします。

MenuID

メニューの要素 id を明示的に設定します。空のままにすると、一意な id が自動的に生成されてキャッシュされます。

リソース

さらに詳しく

	オンラインヘルプこのコンポーネントの完全な API リファレンスと使用ガイドです。	開く
	すべての sgcHTML コンポーネント80 以上のコンポーネントの全機能マトリックスを閲覧できます。	開く
	無料体験版のダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。	開く
	価格完全なソースコード付きの Single、Team、Site ライセンス。	開く