メニューボタン
メニューはいくつかの方法でボタンに取り付けることができます。button 要素と toolbarbutton 要素はともにメニューボタンの作成に使用される 2 つの特殊な型をサポートしています。
- button または toolbarbutton の
type属性を 'menu' に設定すると、押された時にメニューを開くボタンが作成できます。ボタンのラベルや画像の隣に、メニューが存在する事をユーザーに示す矢印が表示されます。 - button または toolbarbutton の
type属性を 'menu-button' に設定すると、普通に押すことができるボタンが作成されます。しかし、ボタンの一部に矢印が表示され、それを押すとメニューが開きます。
どちらの場合でも、menupopup 要素をボタンの直接の子として設置してください。
'menu' ボタン
'menu' 型のボタンは、ボタンを押してもメニューが表示されるだけで、直接コマンドを実行しません。これは menu タグと同じように動作し、実行するコマンドの一覧を提示するのに使用します。この型のボタンは、ボタンの type 属性を 'menu' にすることで作成できます。
たとえば次の例では、「View」ボタンを押すと、ユーザーがラジオ型のメニューアイテムの中から選択できるようにメニューが開きます。おそらく、どれかを選択すると、アプリケーションの見た目がそれにしたがって変更されるのでしょう。キーボードを使う場合は、ボタンにフォーカスがあるときに下キー押すとメニューが開きます。
<button type="menu" label="View">
<menupopup>
<menuitem label="Icons" type="radio" name="view"/>
<menuitem label="List" type="radio" name="view"/>
<menuitem label="Details" type="radio" name="view"/>
</menupopup>
</button>
メニューが閉じても、ボタンにはどの見た目が選択されているかが表示されないことに注意してください。表示させたければ、menulist を使うのがいいでしょう。
toolbarbutton に対してもボタンと同じ方法を使えます。下の例では画像を持つ toolbarbutton にメニューが関連付けられています。
<toolbarbutton type="menu" image="cookies.png">
<menupopup>
<menuitem label="Block Cookies" type="checkbox"/>
<menuitem label="Clear Cookies"/>
</menupopup>
</toolbarbutton>
'menu-button' ボタン
'menu-button' 型のボタンは、ボタンにメニューを取り付けると同時に、それ自体にボタンが押された時に実行されるデフォルトの動作を設定したい場合に使用します。これはボタンをデフォルトのコマンドを実行するためのラベルや画像の部分と、メニューを表示するための部分の 2 つに分けることで実現されます。この型のボタンは、ボタンの type 属性を 'menu-button' にすることで作成できます。
<toolbarbutton type="menu-button" label="Save" oncommand="alert('Save');">
<menupopup>
<menuitem label="Save This Document"/>
<menuitem label="Save All" oncommand="alert('Save All'); event.stopPropagation();"/>
</menupopup>
</toolbarbutton>
ここで 'Save' ボタンは type に 'menu-button' が設定されているので、押された時にメニューが開く小さな矢印が表示されます。ボタンのラベル部分を押すと、ボタンで command イベントが呼び出され、'Save' という警告が表示されます。しかしながら、サブメニューのアイテムには違うコマンドを関連付けることが可能です。
command イベントが発生すると、そのイベントは要素のチェーンをたどってドキュメントの最上位まで浮上 (bubble up)します。メニューの 1 つめのアイテム 'Save This Document' が選択されると、command イベントがボタンまで浮上するので、同様に 'Save' という警告が表示されます。この場合、このメニューアイテムはボタンの通常の部分を押すのと同じ操作を実行します。2 つめのアイテム 'Save All' は 'Save All' というテキストの警告を表示する独自の command イベントを持っています。stopPropagation メソッドを使って浮上を止めているので、ボタンでは command イベントは同じように呼ばれません。
この結果、ある 1 つのコマンドを実行し、他のコマンドを実行するためのメニューを持つボタンが完成します。この例のように、普通 'menu-button' 型のボタンはメニューがその操作に関するより限定されたオプションを提供する時に使用されます。この例を拡張して、Save ボタンメニューにまだ保存されていないドキュメントの一覧を挿入してそれぞれを個別に保存できるようにすることも可能でしょう。
上の例の 1 つめのアイテムをデフォルトのアイテムに設定して、ユーザーにこのコマンドがメインのボタンを押した時に実行されるものだということを示したいこともあるでしょう。これはそのアイテムの default 属性を true に設定すれば可能になります。
<menuitem label="Save This Document" default="true"/>
default 属性の詳細はデフォルトアイテムを示すを参照して下さい。
'menu' 型と同様に、'menu-button' 型は button と toolbarbutton 要素のどちらにも適用できます。