より高度なメニュー機能

このセクションでは、サブメニューとチェック付きメニューの作り方を見て行きます。

サブメニューの作成

ここまでに説明した要素を使って、他のメニューを入れ子にした、サブメニューを作ることが可能です。 menupopup の中には、任意の要素を配置可能であることを思い出してください。 menupopup の中に、menuitem と menuseparator を配置する場合については、前のセクションで説明していますが、 サブメニューを作る場合は、menupopup 要素の中に 、単に menu 要素を配置するだけで可能です。 この記述は、menu 要素が、menubar の中に直接配置されていない場合も有効なことからも問題なく動作することが分かると思います。

以下に、File メニューの中に簡単なサブメニューを作成する例を示します。

var el = env.locale; 例 1 : ソース 表示

<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>

チェックマークをメニューに追加

多くのアプリケーションでは、メニュー項目にチェックをつけることが可能です。 例えば、操作項目のテキストの横に、チェックがついてる場合は有効になり、チェックがついてない場合は無効になるような機能があげられます。 このメニューは、利用者がメニューを選択したときに、チェックの状態が切り替わります。 同じように、メニュー項目にラジオボタンを作りたいと思うことがあるかもしれません。

メニューのチェックは checkbox 要素や radio 要素と同じように作成します。 まず 2 つの属性、type と、name が必要となります。 type は、チェックのタイプを指示し、name は、コマンドをまとめてグループ化するために使用します。 以下の例は、チェックつきの項目を持つメニューを作成します。

var el = env.locale; 例 2 : ソース 表示

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

type 属性を、メニュー項目 (menuitem) をチェック可能にするために追加しています。 この属性の値を checkbox に設定すると、メニュー項目は選択するごとにチェックのオンとオフが切り替わります。

ラジオボタン型のメニュー

基本的なチェックに加えて、type の値に radio と設定することで、ラジオボタン型のチェックを作ることができます。 ラジオボタン型のチェックは、メニュー項目のグループのうち、1 つの項目だけがチェックされるようにするために使用します。 例としては、複数のフォントから利用したい 1 つのフォントを選択するような、フォントメニューを挙げることができます。 ラジオボタン型では、違うメニュー項目を選択したとき、前に選択されていた項目のチェックは自動的に外されます。

メニュー項目を、まとめてグループ化するためには、name 属性をグループ化する menuitem 要素に置く必要があります。 name 属性の値には同じ文字列を指定します。 以下に、ラジオボタン型のメニューの実例を示します。

var el = env.locale; 例 3 : ソース 表示

<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" checked="true"/>
        <menuitem id="uranus" label="Uranus" type="radio" name="ringed"/>
        <menuseparator/>
        <menuitem id="earth" label="Earth" type="radio" name="inhabited" checked="true"/>
        <menuitem id="moon" label="Moon" type="radio" name="inhabited"/>
      </menupopup>
    </menu>
  </menubar>
</toolbox>

この例を試してみることによって、最初の 3 つのメニュー項目のうち、1 つだけがチェックできることが確認できるはずです。 これらは、全て同じ name 属性を持っているため、まとめてグループ化されています。 その後のメニュー項目である「Earth」もラジオボタン型ですが、name 属性に違う値が設定されているため、グループに含まれていません。

当然ですが、グループ化する項目は、すべて同じメニューに置く必要があります。 なお (できなくても問題になる状況はあまりないとは思いますが) グループ化するそれぞれのメニュー項目が、互いに隣接している必要はありません。

次のセクションでは、ポップアップメニューの作り方を見て行きます。