XUL チュートリアル - メニューの機能についてもっと

このセクションでは、サブメニューとチェック付きメニューの作り方を見ることにしましょう。

サブメニューを作る

既にある要素を使って、他のメニューの内部にサブメニュー (ネストしたメニュー) を作ることができます。menupopup の中にはどんな要素でも置けることを思い出して下さい。メニューポップアップ内にメニュー項目とメニューセパレーターを置くのは既に見ました。しかし、サブメニューは、menupopup 要素の内部に menu 要素を置くだけで作ることができます。menu 要素は、メニューバー内に直接置かない場合でも、妥当なので、これは動作します。

下の例は、File メニューの内部に簡単なサブメニューを作ります。

<toolbox flex="1">
  <menubar id="sample-menubar">
    <menu id="file-menu" label="File">
      <menupopup id="file-popup">
        <menu id="new-menu" label="New">
          <menupopup id="new-popup">
            <menuitem label="Window"/>
            <menuitem label="Message"/>
          </menupopup>
        </menu>
        <menuitem label="Open"/>
        <menuitem label="Save"/>
        <menuseparator/>
        <menuitem label="Exit"/>
      </menupopup>
    </menu>
  </menubar>
</toolbox>

ファイル検索メニューを追加する

<toolbox>

 <menubar id="findfiles-menubar">
  <menu id="file-menu" label="File" accesskey="f">
    <menupopup id="file-popup">
      <menuitem label="Open Search..." accesskey="o"/>
      <menuitem label="Save Search..." accesskey="s"/>  
      <menuseparator/>
      <menuitem label="Close" accesskey="c"/>
    </menupopup>
  </menu>
  <menu id="edit-menu" label="Edit" accesskey="e">
    <menupopup id="edit-popup">
      <menuitem label="Cut" accesskey="t"/>
      <menuitem label="Copy" accesskey="c"/>
      <menuitem label="Paste" accesskey="p" disabled="true"/>
    </menupopup>
  </menu>
 </menubar>

<toolbar id="findfiles-toolbar>

メニューにチェックマーク (Checkmark) を追加する

多くのアプリケーションでは、メニュー項目にチェックができるものがあります。例えば、使うことのできる機能は、コマンドの横がチェックされ、使えないコマンドはチェックがはずされています。ユーザーがメニューを選択すると、チェックの状態が切り替わります。メニュー項目でも、ラジオボタンのスタイルのチェックを作りたいかもしれません。

チェックは、HTML のチェックボックスとラジオ入力要素と同様の方法で作られます。これには 2 つの属性を使います。チェックの型を指示するための type とコマンドをグループ化するための name です。下の例は、チェック付きの項目をもつメニューを作ります。

<toolbox>
  <menubar id="options-menubar">
    <menu id="options_menu" label="Options">
      <menupopup>
        <menuitem id="backups" label="Make Backups" type="checkbox"/>
      </menupopup>
    </menu>
  </menubar>
</toolbox>

type 属性を追加しました。これは、メニュー項目をチェックできるようにするために使われます。その値を checkbox に設定することによって、メニュー項目は、メニュー項目を選択することによって、チェックしたりチェックをはずしたりできます。

標準的なチェック以外に、type を radio という値にすることによって、ラジオ風のスタイルのチェックを作る子とができます。ラジオチェックは、メニュー項目をグループ化したい場合に使われます。そこでは、一度に一項目しかチェックできません。その例は、フォントメニューでしょう。一度に一つのフォントしか選択できないからです。別の項目が選択されると、前に選択していた項目は、チェックされていない状態になります。

メニュー項目のセットをグループ化するには、個々の項目に、name 属性を置く必要があります。値を同じ文字列にします。以下の例は、これを示しています。

<toolbox>
  <menubar id="planets-menubar">
    <menu id="planet-menu" label="Planet">
      <menupopup>
        <menuitem id="jupiter" label="Jupiter" type="radio" name="ringed"/>
        <menuitem id="saturn" label="Saturn" type="radio" name="ringed"/>
        <menuitem id="uranus" label="Uranus" type="radio" name="ringed"/>
        <menuitem id="earth" label="Earth" type="radio" name="inhabited"/>
      </menupopup>
    </menu>
  </menubar>
</toolbox>

この例を試してみると、最初の 3 つのメニュー項目のうち、一つしかチェックできないことが分かるでしょう。それらはグループ化されています。同じ名前をもっているからです。最後のメニュー項目の Earth は、グループの一員ではありません。名前が違うからです。しかし、それがラジオボタンであることに変わりはありません。

(進む) 次は、ポップアップメニューの作り方を見ることにしましょう。

例: 5.2.1 5.2.2 5.2.3