Skip to main content

This is documentation for Caché & Ensemble. See the InterSystems IRIS version of this content.Opens in a new tab

For information on migrating to InterSystems IRISOpens in a new tab, see Why Migrate to InterSystems IRIS?

クライアント側メニュー・コンポーネント

この章では、クライアント側メニュー・システムを使用して Zen ページのより “ネイティブなアプリケーション” の外観と使用感を容易に描画できるようにするために設計された組み込み Zen コンポーネントについて説明します。これらのメニュー・コンポーネントはクライアント側での JavaScript の簡単な後処理メカニズムを提供するので、その概観およびレイアウトをクライアント側のユーザの処理に対応させることができます。

Note:

従来のメニュー・コンポーネントのスタイルの多くは、CSS と HTML で定義されていますが、JavaScript の後続の後処理のオプションはありません。それらのコンポーネントの詳細は、"Zen コンポーネントの使用法" の “ナビゲーション・コンポーネント” の章を参照してください。

クライアント側メニューの構築

元の <menu> コンポーネントは、ボックス内に単純な HTML ラベルを提供するだけで、その (限定された) 描画はすべて CSS の設定を若干使用してサーバで実行されます。メニューとしては完全にサービス可能ですが、外観の柔軟性はほとんどありません。

一方、<csMenuBar> は、クライアントによって実際にロードされ、ユーザのマシン (ブラウザ、オペレーティング・システム、使用可能なフォントなど) の詳細情報が利用可能になるまで描画を延期します。<csMenuBar> は、JavaScript を多用して CSS 単独で処理するのが難しい (場合によっては不可能) 内容を処理します。Microsoft Outlook や Word のように、アプリケーションでユーザが見つけやすいように表示および動作するメニューを描画できます。このメニューに含まれている機能は、アイコン、キーボード・ショートカット、スクロールバーを使用しない長いメニューのスクロールなどです。

通常、cs から始まるページ要素 (<csMenuBar> など) は、ツール・セットを形成します。一方、"Zen コンポーネントの使用法" の “ナビゲーション・コンポーネント” の章で説明されている従来のメニュー・ページ要素は別のツール・セットを形成します。この 2 つには互換性がありません。 例えば、<csMenuBar> は、<csMenuBarItem>、<contextMenu>、<csMenuItem>、および <csMenuSeparator> 要素で構成されます。<csMenuItem> 要素を <menuSeparator> 要素で区切るなど、両者を混在させて指定すると、メニュー・サブシステムが破損することになります。

名前付け規約に不整合があるので、注意してください。クライアント側のページ要素名のすべてが cs で始まるわけではありません。接頭辞 cs は、新しいクライアント側ページ要素名が古い既存のページ要素名と重複したときにのみ使用されます。そのため、接頭辞 cs は、クライアント側メニュー・サブシステムの最も重要な部分のページ要素である <contextMenu> にはありませんが、その他のあらゆる要素にはあるということになります。

次は、クライアント側メニュー要素の入れ子構造の概要です。

<csMenuBar>
    <csMenuBarItem>
        <contextMenu>
            <csMenuItem />
            <csMenuItem />
            <csMenuSeparator />
            <csMenuItem />
            <csMenuItem>
                <contextMenu>
                    <csMenuItem />
                    <csMenuItem />
                </contextMenu>
            </csMenuItem>
        </contextMenu>
    </csMenuBarItem>
</csMenuBar>

次の数セクションで、以下のものを提供するクライアント側メニュー・コンポーネントの使用法について説明します。

個別のコンポーネントの構文ガイドは、この章で後述するセクションを参照してください。

ドロップダウン・メニュー

次のサンプルの <csMenuBar> 要素では、[File] と [Edit] の 2 つの選択肢がある水平メニュー・バーを定義しています。これらのそれぞれの選択肢には、異なる <contextMenu> が表示されます。この例の <csMenuItem> コンポーネントでは、関連付けられたアイコン、代替キャプション、キーボード・ショートカットなどを設定するためのさまざまなオプションが示されています。以下の図は、このメニューの [File] の選択肢を示しています。

アイコン付きの [ファイル] ドロップダウン・メニューおよびキーボード・ショートカット
generated description: csmenu file
<csMenuBar id="mainMenu" width="100%">
  <csMenuBarItem caption="File" contextKey="f" >
    <contextMenu id="fileMenu" >
      <csMenuItem icon="images/file.png" caption="New" key="Ctrl-N"
                  contextKey="n" onclick="alert('New requested');"  />
      <csMenuItem icon="/csp/broker/images/open.png" caption="Open..."
                  key="Ctrl-O" contextKey="o"
                  onclick="alert('Open requested');"  />
      <csMenuItem caption="Close" key="Ctrl-W"
                  contextKey="c" onclick="alert('Open requested');"  />
      <csMenuSeparator />
      <csMenuItem id="savePick" icon="/csp/broker/images/save.png"
                  iconDisabled="/csp/broker/user/images/save_g.png"
                  caption="Save" key="Ctrl-S" contextKey="s"
                  onclick="alert('Save requested');"  />
      <csMenuItem icon="/csp/broker/images/saveas.png" caption="Save as..."
                  contextKey="a" />
      <csMenuItem icon="/csp/broker/images/saveall.png" caption="Save All"
                  contextKey="l" />
      <csMenuSeparator />
      <csMenuItem icon="/csp/broker/images/print.png" caption="Print"
                  key="Ctrl-P" contextKey="p"
                  onclick="alert('Print requested');" />
      <csMenuItem caption="Print Preview..."  contextKey="v" />
      <csMenuItem caption="Print Setup..."  contextKey="r" />
      <csMenuSeparator />
      <csMenuItem caption="Recent Files"  contextKey="e" />
      <csMenuSeparator />
      <csMenuItem caption="Exit" contextKey="x" />
    </contextMenu>
  </csMenuBarItem>
  <csMenuBarItem caption="Edit" contextKey="e">
    <contextMenu id="editMenu" >
      <csMenuItem id="undoPick" icon="/csp/broker/images/undo.png"
                  caption="Undo" key="Ctrl-Z" altCaption="Can't undo"
                  contextKey="u" onclick="alert('undo');" />
      <csMenuItem id="redoPick" icon="/csp/broker/images/redo.png"
                  caption="Redo" key="Ctrl-Y" altCaption="Can't redo"
                  contextKey="r" onclick="alert('redo');" />
      <csMenuSeparator />
      <csMenuItem id="cutPick" icon="/csp/broker/images/cut.png"
                  caption="Cut" key="Ctrl-X" contextKey="t"
                  onclick="alert('cut');" />
      <csMenuItem id="copyPick" icon="/csp/broker/images/copy.png"
                  caption="Copy" key="Ctrl-C" contextKey="c"
                  onclick="alert('copy');"  />
      <csMenuItem id="pastePick" icon="/csp/broker/images/paste.png"
                  caption="Paste" key="Ctrl-V" contextKey="p"
                  onclick="alert('paste');"  />
      <csMenuSeparator />
      <csMenuItem caption="Fill" contextKey="i" onclick="alert('fill');" />
      <csMenuItem caption="Clear" contextKey="a" onclick="alert('clear');" />
      <csMenuItem caption="Delete..." key="delete"
                  contextKey="d" onclick="alert('delete');"  />
      <csMenuSeparator />
      <csMenuItem caption="Select all" key="Ctrl-A"
                  contextKey="l" onclick="alert('select all');" />
      <csMenuSeparator />
      <csMenuItem icon="/csp/broker/images/find.png" caption="Find..."
                  key="Ctrl-F" contextKey="f" onclick="alert('find');" />
      <csMenuItem caption="Find in Files" key="Ctrl-Shift-F"
                  onclick="alert('find next');" />
      <csMenuItem caption="Replace..." key="Ctrl-H" contextKey="e"
                  onclick="alert('replace');" />
      <csMenuItem icon="/csp/broker/images/goto.png" caption="Go to..."
                  key="ctrl-g" contextKey="g" onclick="alert('goto');" />
    </contextMenu>
  </csMenuBarItem>
</csMenuBar>

以下の図は、このメニューの [Edit] の選択肢を示しています。

アイコン付きの [編集] ドロップダウン・メニューおよびキーボード・ショートカット
generated description: csmenu edit

メニューの選択肢

Zen クライアント側メニューでは、次のタイプのメニュー選択肢をサポートします。

選択肢のタイプ ユーザ・アクション 結果
通常のメニュー クリック

Zen は、onclick 属性で指定されるコールバックを呼び出します。

caption および onclick コールバックのみを使用して通常のメニュー選択肢を定義できますが、icon を追加することも、keycontextKey を使用してキーボード・ショートカットを追加することもできます。次に例を示します。

メニュー選択肢で使用できるイメージは、“アイコン” のセクションを参照してください。

階層式メニュー ロールオーバー

Zen は、サブメニューを表示します。

<contextMenu> 要素を <csMenuItem> 要素の中に入れ子にすることで、メニューをカスケードできます。“クライアント側メニューの構築” および “ポップアップ・メニューまたはコンテキスト・メニュー” のセクションにある例を参照してください。

代替キャプション クリック

Zen は、onclick 属性で指定されるコールバックを呼び出します。toggleState プロパティは、ユーザがメニュー選択肢をクリックしたときに、その値を切り替えます (0 から 1 または 1 から 0)。キャプション・ラベルは自動的に切り替わります ([Show] と [Hide] など)。

次の例に示すように、代替キャプション選択肢では、caption と代替キャプション (altCaption) の両方を定義します。

オプションで、icon および altIcon も指定できます。これにより、キャプションの切り替えと共にアイコンも切り替わります。

toggleState が 0 の場合、caption および icon が表示されます。1 の場合、altCaption および altIcon が表示されます。toggleState は、ユーザ・アクションに対してのみ切り替わります。

ポップアップ・メニューまたはコンテキスト・メニュー

クライアント側メニュー・コンポーネントを使用して、領域のポップアップ・メニューまたはコンテキスト・メニューを定義できます。これを実行するには、<contextMenu> 定義を何らかのグループにラップします。ラッパ・コンポーネントは、ほぼすべての要素になり得ますが、ほとんどの場合は、ページの非常に重要な要素 (<vgroup>、<hgroup>、<form> など) になります。<contextMenu> を、ラッパ・コンポーネントの子として定義し、さらにラッパ内の他の要素の兄弟として定義します。オプションで、次の例の <group> のように、正確な境界を指定できますが、これは必須ではありません。

その後、ユーザがラッパ・コンポーネント内のどこかでマウスを右クリックすると、ブラウザの既定の右クリック・メニューでなく、<contextMenu> の子コンポーネントが表示され、有効になります。

<group width="400" height="800" enclosingStyle="background:#aaffaa;" >
  <contextMenu id="rightPopUp" >
    <csMenuItem caption="Fido Cascade" >
      <contextMenu >
        <csMenuItem caption="Sit" />
        <csMenuItem caption="Stay" />
        <csMenuItem caption="Play dead" />
      </contextMenu>
    </csMenuItem>
    <csMenuItem caption="Scout Cascade" >
      <contextMenu >
        <csMenuItem caption="Whoa" />
        <csMenuItem caption="Giddy Up" />
      </contextMenu>
    </csMenuItem>
    <csMenuItem caption="Kitty Cascade" >
      <contextMenu >
        <csMenuItem caption="Ignore me" />
        <csMenuItem caption="Do as you please" />
      </contextMenu>
    </csMenuItem>
  </contextMenu>
</group>

次の図は、前の例で定義したポップアップ・メニューを示しています。

サブメニュー付きのポップアップ・メニュー
generated description: csmenu rightclick

階層式メニュー

<contextMenu> 要素を <csMenuItem> 要素の中に入れ子にすることで、メニューをカスケードできます。このカスケード方法は通常のメニューの他に、ポップアップ・メニューやコンテキスト・メニューにも適用できます。この章の冒頭のセクションの “クライアント側メニューの構築、” および前のセクションの “ポップアップ・メニューまたはコンテキスト・メニュー” にある例を参照してください。

ボタン・バー

<buttonBar> コンポーネントは、クライアント側メニュー・コンポーネントと密接に関連しています。<buttonBar> は、あらゆるグループ・コンテナ内に配置可能で、1 つ以上の <buttonBarItem> コンポーネントを含めることができます。以下の <hgroup> 要素は、3 つのボタンのあるボタン・バー、ロールオーバー・ツール・ヒント、および選択操作 (アラート・コード) を定義します。

<hgroup id="bbArea" >
  <buttonBar id="editStuff" >
    <buttonBarItem icon="images/cut.png" caption="Cut"
                   onclick="alert('Cut requested');"  />
    <buttonBarItem icon="images/copy.png" caption="Copy"
                   onclick="alert('Copy requested');"  />
    <buttonBarItem icon="images/paste.png" caption="Paste"
                   onclick="alert('Paste requested');"  />
  </buttonBar>
</hgroup>

このバーのスタイルは、XData Style セクションで次のように定義されます。

#bbArea {
  background:#bbbbbb;
  background-image: url(images/grad-halfgray-10x30.png);
  background-repeat:repeat-x;
}

次の図は、この例で定義したボタン・バーを示しています。

アイコンを含むボタン・バー
generated description: csbuttonbar

ボタン・バーのアイコンとして使用できるイメージ・ファイルについては、“アイコン” のセクションを参照してください。

アイコン

以下のテーブルでは、Caché インストール・ディレクトリのサブディレクトリである csp/broker/images ディレクトリにあるアイコンをリストしています。テーブルにあるアイコンの背景色のグレーは、1 つの例にすぎません。アイコンには、設計者がこれを含むコンポーネントに対して選択した背景色が表示されます。

アイコン・イメージを参照するには、<buttonBarItem> や <csMenuItem> などの Zen コンポーネント内の iconaltIcon、または disabledIcon 属性を使用します。これらのイメージを参照する際は、csp/broker という接頭辞が自動的に暗黙指定されます。これらのイメージは、次の構文に従って参照します。

images/filename

次に例を示します。

altIcon="images/cut.png"

Zen アイコン・ライブラリ
アイコン ファイル名 意味
generated description: icon buildall buildall.png すべてビルドまたはすべてのファイルのコンパイル
generated description: icon compile compile.png 現在のファイルのコンパイル
generated description: icon copy copy.png コピー
generated description: icon cut cut.png 切り取り
generated description: icon downarrow DownArrow.png 下矢印、大きなサイズ、明るい背景色用
generated description: icon downarrowinv DownArrowInv.png 下矢印、大きなサイズ、暗い背景色用
generated description: icon smdownarrow SmDownArrow.png 下矢印、小さなサイズ、明るい背景色用
generated description: icon smdownarrowinv SmDownArrowInv.png 下矢印、小さなサイズ、暗い背景色用
generated description: icon file file.png ファイルまたはドキュメント
generated description: icon find find.png 検索
generated description: icon goto goto.png 移動
generated description: icon inspect inspect.png 検査
generated description: icon smleftarrow SmLeftArrow.png 左矢印、小さなサイズ、明るい背景色用
generated description: icon smleftarrowinv SmLeftArrowInv.png 左矢印、小さなサイズ、暗い背景色用
generated description: icon open open.png ファイル、フォルダ、またはドキュメントを開く
generated description: icon output output.png 出力
generated description: icon paste paste.png 貼り付け
generated description: icon print print.png 印刷
generated description: icon redo redo.png 前の操作のやり直し
generated description: icon redo g redo_g.png 前の操作のやり直し、グレー表示
generated description: icon reload reload.png 再ロード
generated description: icon rtarrow RtArrow.png 右矢印、大きなサイズ、明るい背景色用
generated description: icon rtarrowinv RtArrowInv.png 右矢印、大きなサイズ、暗い背景色用
generated description: icon smrightarrow SmRightArrow.png 右矢印、小さなサイズ、明るい背景色用
generated description: icon smrightarrowinv SmRightArrowInv.png 右矢印、小さなサイズ、暗い背景色用
generated description: icon save save.png ファイル、フォルダ、またはドキュメントの保存
generated description: icon save g save_g.png ファイル、フォルダ、またはドキュメントの保存、グレー表示
generated description: icon saveall saveall.png すべてのファイルまたはドキュメントの保存
generated description: icon saveas saveas.png 現在のファイルまたはドキュメントを新しいファイルに保存
generated description: icon undo undo.png 前の操作を元に戻す
generated description: icon undo g undo_g.png 前の操作を元に戻す、グレー表示
generated description: icon uparrow UpArrow.png 上矢印、大きなサイズ、明るい背景色用
generated description: icon uparrowinv UpArrowInv.png 上矢印、大きなサイズ、暗い背景色用
generated description: icon smuparrow SmUpArrow.png 上矢印、小さなサイズ、明るい背景色用
generated description: icon smuparrowinv SmUpArrowInv.png 上矢印、小さなサイズ、暗い背景色用
generated description: icon viewother viewother.png その他 (クラスのコンパイル済みルーチンなど) の表示
generated description: icon watch watch.png ウォッチ
generated description: icon workspace workspace.png ワークスペース
generated description: icon world world.png 世界 (World Wide Web )

暗い背景色をバックにしてアイコンがレンダリングされていることが検出された場合は、nameInv.png イメージが、その対応する name.png の代わりに自動的に使用されます。name.png アイコンは、明るい背景色をバックにして使用することを目的としています。この動作は、Zen のシステム既定の配色において、以下のように確認できます。

  1. 明るい背景色の暗い矢印

    generated description: csmenu rightclick before

  2. 背景色が暗くなると、自動的に明るい矢印に変わります。

    generated description: csmenu rightclick inv

  3. 背景色が明るくなると、暗い矢印に戻ります。

    generated description: csmenu rightclick

CSS を使用して <csMenuItem> および <csActiveMenuItem> の前景色および背景色を定義していれば、明るいアイコンと暗いアイコンの使用は自動的に切り替わります。これにより、Zen はどちらのアイコンが現在の色との最適なコントラストを生み出すかを計算します。前の例にある濃い青の選択項目のように、勾配効果を生成するイメージを使用して前景色または背景色が作成されている場合でも、これは重要になります。

<csMenuBar>

<csMenuBar> コンポーネントは、あらゆるグループ・コンテナの中で記述できます。<csMenuBar> 要素は、水平メニュー・バーを定義し、その直接の子である各 <csMenuBarItem> に対して 1 つの選択肢を含みます。<csMenuBar> には、メニュー・バーの選択肢を定義するために必要な数の兄弟の <csMenuBarItem> コンポーネントを記述できます。<csMenuBar> の例は、“クライアント側メニューの構築” を参照してください。

<csMenuBar> には以下の属性があります。

属性 説明
Zen グループの属性 <csMenuBar> は、その他の Zen グループと同じスタイル属性およびレイアウト属性を持ちます。詳細は、"Zen の使用法" の “Zen のレイアウト” の章にある “グループのレイアウトとスタイルの属性” を参照してください。

<csMenuBarItem>

<csMenuBarItem> コンポーネントは、<csMenuBar> コンテナ内でのみ記述できます。各 <csMenuBarItem> では、メニュー・バーの 1 つの選択肢を定義します。その例は、“クライアント側メニューの構築” を参照してください。

<csMenuBarItem> には以下の属性があります。

属性 説明
Zen グループの属性 <csMenuBarItem> は、その他の Zen グループと同じスタイル属性およびレイアウト属性を持ちます。詳細は、"Zen の使用法" の “Zen のレイアウト” の章にある “グループのレイアウトとスタイルの属性” を参照してください。
caption

このメニュー選択肢と関連付けるテキスト・ラベル

この属性に普通のテキストを入力できる場合でも、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab が与えられます。これにより、言語の DOMAIN パラメータが Zen ページ・クラスで定義されている限り、他の言語にテキストをローカライズしやすくなります。%ZEN.Datatype.captionOpens in a new tab データ型を使用すると、$$$Text マクロによってクライアント側またはサーバ側のコードから invalidMessage プロパティに値を代入できるようになります。

contextKey 定義されている場合、contextKeycaption テキスト内の 1 文字を表し、この文字のキーを押すとメニュー選択肢の機能を実行できます。contextKey では、大文字と小文字は区別されません。caption のテキストが表示されているときは、contextKey の文字は下線付きになります。

<contextMenu>

<contextMenu> コンポーネントは、<csMenuItem>、<vgroup>、<hgroup>、<form> などを含む、あらゆるグループ・コンテナのタイプの中で記述できます。

グループには、<contextMenu> の他に別の要素を含めることができますが、他の要素を <contextMenu> と共にグループ内で記述するには、それを含むグループの layout 属性を "none" に設定する必要があります。以下の例では、<contextMenu> の他に <button> があるので、<form> の layout は "none" に設定します。

<form height="600" width="400" layout="none" > 
  <button caption="MyButton"/>
  <contextMenu id="cm1">
    <csMenuItem caption="context"/>
    <csMenuItem caption="menu"/>
    <csMenuItem caption="1"/>
  </contextMenu>
</form>

<contextMenu> を使用してさまざまなメニューのタイプを指定する方法について理解を深めるには、“クライアント側メニューの構築” および “ポップアップ・メニューまたはコンテキスト・メニュー” の例を参照してください。

<contextMenu> コンポーネントには、メニューの個々の選択肢の定義および編成に必要なだけ兄弟の <csMenuItem> および <csMenuSeparator> コンポーネントを記述できます。

<contextMenu> には以下の属性があります。

属性 説明
Zen グループの属性 <contextMenu> は、その他の Zen グループと同じスタイル属性およびレイアウト属性を持ちます。詳細は、"Zen の使用法" の “Zen のレイアウト” の章にある “グループのレイアウトとスタイルの属性” を参照してください。

<csMenuItem>

<csMenuItem> コンポーネントは、<contextMenu> コンテナ内でのみ記述できます。<contextMenu> には、メニューの選択肢を定義および整理するために必要な数の兄弟の <csMenuItem> および <csMenuSeparator> コンポーネントを記述できます。

<csMenuItem> には以下の属性があります。

属性 説明
Zen グループの属性 <csMenuItem> には、メニュー項目としての機能に加えて、その他の Zen グループと同じスタイルとレイアウトの属性があります。詳細は、"Zen の使用法" の “Zen のレイアウト” の章にある “グループのレイアウトとスタイルの属性” を参照してください。
altCaption ユーザがメニュー項目を切り替える場合など、代替条件の下でメニュー項目に表示されるテキスト。通常の altCaption の代替は、caption になります。
altIcon

ユーザがメニュー項目を切り替える場合など、代替条件の下で caption テキストの横に表示されるイメージの URI。これがローカル・サーバ上のパス名の場合、次のように、Caché インストール・ディレクトリを基準とした URI となります。

altIcon="images/cut.png"

通常の altIcon の代替は、icon になります。使用可能なアイコンの詳細は、“アイコン” のセクションを参照してください。

altKey 定義されている場合、altKey は、ユーザがメニュー項目を切り替えるときなどの代替状況下でメニュー項目の機能を実行できるキーボード・ショートカットです。altKey の通常の代替は key です。
caption

通常の条件でメニュー項目に表示されるテキスト。

この属性に普通のテキストを入力できる場合でも、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab が与えられます。これにより、言語の DOMAIN パラメータが Zen ページ・クラスで定義されている限り、他の言語にテキストをローカライズしやすくなります。%ZEN.Datatype.captionOpens in a new tab データ型を使用すると、$$$Text マクロによってクライアント側またはサーバ側のコードから invalidMessage プロパティに値を代入できるようになります。

contextKey

定義されている場合、contextKeycaption テキスト内の 1 文字を表し、この文字のキーを押すとアクティブ状態のメニュー項目の機能を実行できます。contextKey では、大文字と小文字は区別されません。

caption のテキストが表示されているときは、contextKey の文字は下線付きになります。詳細な例は、“ドロップダウン・メニュー” を参照してください。

icon

通常の条件で caption テキストの横に表示されるイメージの URI。これがローカル・サーバ上のパス名の場合、次のように、Caché インストール・ディレクトリを基準とした URI となります。

icon="images/cut.png"

使用可能なアイコンの詳細は、“アイコン” のセクションを参照してください。

iconDisabled

メニュー項目が無効でもなおかつ表示 (“グレー表示”) される場合に、caption テキストの横に表示されるイメージの URI。これがローカル・サーバ上のパス名の場合、次のように、Caché インストール・ディレクトリを基準とした URI となります。

iconDisabled="images/cut.png"

使用可能なアイコンの詳細は、“アイコン” のセクションを参照してください。

key

定義されている場合、key は、マウス・クリックなしでアクティブ状態のメニュー項目の機能を実行できるキーボード・ショートカットです。

詳細な例は、“ドロップダウン・メニュー” を参照してください。

onclick

このメニュー項目をユーザがマウスでクリックするたびに実行されるクライアント側 JavaScript 式。通常、この式は、ページ・クラスで定義されたクライアント側 JavaScript メソッドを呼び出します。

この属性に値を指定する場合、値を囲むには二重引用符を使用し、JavaScript 式内では一重引用符を使用します (必要な場合)。次に例を示します。

<csMenuItem onclick="alert('HEY');"/>

JavaScript 式には、Zen #()# 実行時式を記述できます。

toggleMode

定義されており、かつ True の場合は、チェックマークがメニュー選択肢の切り替え状態を示します。チェックマークが表示されるのは、toggleMode が True の場合です。toggleMode の既定値は False です。

toggleMode で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。属性値は、XData Contents では "True" または "False"、サーバ側コードでは 1 または 0、クライアント側コードでは True または False です。

<csMenuSeparator>

<csMenuSeparator> コンポーネントは、<contextMenu> コンテナ内でのみ記述できます。<contextMenu> には、メニューの選択肢を定義および整理するために必要な数の兄弟の <csMenuItem> および <csMenuSeparator> コンポーネントを記述できます。<csMenuSeparator> は、メニューの選択肢をグループ分けするための水平線を提供します。

<csMenuSeparator> コンポーネントには属性がありません。次に例を示します。

<csMenuSeparator />

詳細な例は、“ドロップダウン・メニュー” を参照してください。

<buttonBar>

<buttonBar> コンポーネントは、どのタイプのグループ・コンテナ内にも記述できます。<buttonBar> には、ボタン・バーの選択肢を定義するために必要な数の兄弟の <buttonBarItem> コンポーネントを記述できます。その例は、“ボタン・バー” を参照してください。

<buttonBar> には以下の属性があります。

属性 説明
Zen グループの属性 <buttonBar> は、その他の Zen グループと同じスタイル属性およびレイアウト属性を持ちます。詳細は、"Zen の使用法" の “Zen のレイアウト” の章にある “グループのレイアウトとスタイルの属性” を参照してください。

<buttonBarItem>

<buttonBarItem> コンポーネントは、<buttonBar> コンテナ内でのみ記述できます。各 <buttonBarItem> では、ボタン・バーの 1 つの選択肢を定義します。その例は、“ボタン・バー” を参照してください。

<buttonBarItem> には以下の属性があります。

属性 説明
Zen コンポーネントの属性

<buttonBarItem> は、あらゆる Zen コンポーネントと同じ汎用属性を持ちます。詳細は、以下のセクションを参照してください。

caption

これが定義されていると、ボタンが有効な場合に表示されるロールオーバーのツールのヒントになります。

この属性に普通のテキストを入力できる場合でも、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab が与えられます。これにより、言語の DOMAIN パラメータが Zen ページ・クラスで定義されている限り、他の言語にテキストをローカライズしやすくなります。%ZEN.Datatype.captionOpens in a new tab データ型を使用すると、$$$Text マクロによってクライアント側またはサーバ側のコードから invalidMessage プロパティに値を代入できるようになります。

icon

ボタンが有効な場合に表示されるイメージの URI。これがローカル・サーバ上のパス名の場合、次のように、Caché インストール・ディレクトリを基準とした URI となります。

icon="images/cut.png"

使用可能なアイコンの詳細は、“アイコン” のセクションを参照してください。

iconDisabled

ボタンが無効でもなおかつ表示 (“グレー表示”) される場合に表示されるイメージの URI。これがローカル・サーバ上のパス名の場合、次のように、Caché インストール・ディレクトリを基準とした URI となります。

iconDisabled="images/cut.png"

使用可能なアイコンの詳細は、“アイコン” のセクションを参照してください。

onclick

このボタンをユーザがマウスでクリックするたびに実行されるクライアント側 JavaScript 式。通常、この式は、ページ・クラスで定義されたクライアント側 JavaScript メソッドを呼び出します。

この属性に値を指定する場合、値を囲むには二重引用符を使用し、JavaScript 式内では一重引用符を使用します (必要な場合)。次に例を示します。

<csMenuItem onclick="alert('HEY');"/>

JavaScript 式には、Zen #()# 実行時式を記述できます。

FeedbackOpens in a new tab