メニュー

ページにメニュー・バーを追加します。

メニュー・バーは少なくとも 1 つのメニューで構成され、サブメニューを含む場合もあります。 メニュー内の各項目で、その項目に関連した子メニューがある場合、ユーザーがその項目上にマウスを置いたりクリックしたりすると、対応するサブメニューが表示されます。 項目に関連した子メニューがない場合は、ユーザーがその項目上でクリックするとアクションが起こります。

最上位メニューは水平にも垂直にも表示することができます。 子のサブメニューはマウスオーバーまたはクリックによってアクティブ化できます。 サブメニューも同様に、水平または垂直に表示することができ、また、マウスオーバーまたはクリックによってアクティブ化できます。 例えば、標準的な Windows® のメニュー・バーでは、最上位メニューは「クリック時に水平」に表示されますが、子のサブメニューは「マウスオーバー時に垂直」に表示されます。 その他のスタイル・オプションでは、サブメニューの「ポップアップ」(通常の場合) での表示や「インライン」(「ツリー・スタイル」メニューの場合) での表示がサポートされています。サブメニューは「スティッキー」(一度選択されたら常に表示) または「ポップアップ」(選択した後は非表示) の場合があります。

メニュー項目は JSFMenuItem によって取り込みます (メニューそのものには、項目が取り込まれるまで何も含まれません)。メニュー項目は、代替の項目スタイル、セパレーター、first-item-is-different などによって、さまざまなスタイルを設定できます。各項目には、他のインライン HTML を含むことができるインライン HTML タグが含まれています。 例えば、項目は単純なテキストであることも、画像やチェック・マークなどの複数のものを含む <a> タグであることも可能です。

ツリー・メニューを表示するには、JSFMenu コンポーネントを使用します。 メニューの各項目は、実行されるアクション (例えば、それに続くリンク) であるか、または別のメニューに続きます。 アクションを実行し、かつ、別のノードにつながるメニュー項目にすることも可能ですが、これは稀な場合です。

ツリーの最上位メニューは常に表示されます。 最上位のメニュー項目をマウスオーバーまたはクリックすると、該当するサブメニューが表示されます。 サブメニューのメニュー項目をマウスオーバーまたはクリックすると、第 3 レベルのメニューが表示されます。 サブメニューの階層は、最大 5 層の深さにすることができます。 最も単純なケースでは、1 つの項目 (例えば、下矢印ボタン) を含むメニュー・バーにサブメニューを関連付けて、ドロップダウン・メニューを作成できます。

メニュー・バーは、ページに適切に配置された <div> タグに添付されている JSFMenu コンポーネントから構築されます。最上位メニューは div で描画されます。

JSFMenu コンポーネントはメニュー・バーの構造のみを定義し、メニュー・バーのいずれのコンテンツ (メニュー項目) も定義しません。構造 (メニュー項目のツリー) は、JSFMenuItem サブコンポーネントを JSFMenu コンポーネントに追加することにより定義されます。

JSFMenuItem コンポーネントは、hX_5.addSubcomponent 呼び出しを使用して、メニュー・バーに追加されます。 各サブコンポーネントは、JSFMenu または JSFMenuItem コンポーネントのいずれかである親コンポーネントに追加されます。メニューは、同じ親コンポーネントを共用するすべての JSFMenuItem コンポーネントで構成されます。 したがって、form1:menu1-1 がメニュー項目の ID である場合は、次のようになります。
hX_5.addSubComponent("form1:menu1-1", "form1:menu1-1-1", new hX_5.JSFMenuItem('item:form1:linkA'));
hX_5.addSubComponent("form1:menu1-1", "form1:menu1-2-2", new hX_5.JSFMenuItem('item:form1:linkB'));
hX_5.addSubComponent("form1:menu1-1", "form1:menu1-3-3", new hX_5.JSFMenuItem('item:form1:linkC'));

form1:menu1-1 という名前のメニューを親として、3 つの項目を含むメニューを作成します。

メニュー項目にはいくつかの種類があります。 メニュー項目には、以下のものを指定できます。
  1. JSFMenuItem コンストラクターに属性として指定される、単純なテキスト、連続したインライン HTML (リンク、HTML ボタン・タグなど)、または HTML テーブル。
  2. ページに存在し、JSFMenuItem コンストラクターによりメニュー・バーに割り当てられる (移動される)、単純なテキスト、連続したインライン HTML (リンク、HTML ボタン・タグなど)、または HTML テーブル。
  3. セパレーター (グラフィック、テキスト、またはその両方であることが可能)。

一般的な規則として、メニューの親であるメニュー項目はクリックできません。 反対に、メニューの親でないメニュー項目は、クリックできます。 メニュー項目は、作成時にアクション/関数が提供された場合、または HTML の既存の一部を提供し、その HTML が本質的にクリック可能 (リンク) である場合に、クリックできます。詳しくは、JSFMenuItem の資料を参照してください (メニュー項目をメニューの親にして、クリック可能にする方法を含む)。

メニュー・バーには複数のスタイル・オプションがあります。これらのオプションは、メインメニューおよびサブメニューの表示方法および管理方法を制御します。
  • 垂直/水平方向。メインメニューは垂直方向または水平方向にすることが可能です。 サブメニューは垂直または水平に、単独で定義できます。 Windows のメニュー・バーは、メインメニューに水平方向を使用し、サブメニューに垂直方向を使用したメニュー・バーの例です。
  • マウス/クリック・アクション。サブメニューは親メニュー項目にマウスオーバーしたとき、または親メニュー項目をクリックしたときに表示することができます。 メインメニューおよびサブメニューのアクションは独立して指定されます。したがって、Windows のメニュー・バーのように、メインメニューにクリック・アクションを使い、サブメニューにマウス・アクションを使うことができます。 アクションを実行するには、メニュー項目をクリックする必要があります。
  • スティッキー性。メインメニューは常にスティッキーです。すなわち、常に表示されています。 サブメニューでは、スティッキーを有効または無効にすることができます。スティッキーでない場合は、サブメニューはポップアップ・メニューに似た振る舞いをし、何かを実行するメニュー項目をユーザーがクリックした後に (またはユーザーがそれらの外でクリックした場合に)、表示から除去されます。スティッキーである場合は、最後に表示されたメニュー (およびその親メニュー) が常に表示されたままとなります。このメニューは、別のメニューが表示された場合のみ、表示から除去されます。
  • インライン。通常、サブメニューは基本のページの一番上に複数の層として表示されます。 この代わりに、メニュー・バーそのものにインラインで表示することもできます。サブメニューが表示される場合は、メニュー・バーにスペースが開き、メニュー・バーにインラインでサブメニューが表示されます。 これは通常、垂直メニューでサイトのナビゲーション階層を示す場合にのみ使用されます。インラインの垂直メニューはツリー制御とほとんど同じような振る舞いをしますが、1 つのレベルに 1 つのサブメニューしか表示されない (ツリーの複数のブランチではなく、1 つのブランチしか表示できない) 点が異なります。

選択処理

メニュー・バーは選択をサポートします。 メニュー項目が選択されると、メニューの他の項目から視覚的に区別できるように、selected クラスを使用して表示されます。 項目は、クリックすると選択され、クリック後はそのまま表示しておくことができます。 通常、これは項目がスティッキー・メニューにある場合にのみ起こります (最上位メニューは常にスティッキーです)。

選択は、メニュー・バーに現行ページを強調表示する方法として最も便利です。 例えば、メニューが 5 つのメニュー項目 (1 つのレベルで) で構成されており、ページ 1、2、3、4、および 5 の間を移動できると仮定します。このメニュー・バーは、5 つのページの一番上に表示されます。 選択を使用すると、ページ 1 が表示されているときに、ページ 1 のメニュー項目を強調表示することができます。 ページ 2 が表示されている場合は、ページ 2 のメニュー項目を強調表示できます。

選択は、クリックしたときのみ表示されるため、通常はユーザーがクリックしてから次のページが表示されるまでの非常に短い時間 (仮にあったとしても) しか表示されません。 あるページから別のページに選択を移すには、以下のいずれかの方法をとります。
  • メニュー・バーの initial-selection 属性を使用して、新たに表示されるメニュー・バーで選択を設定します。
  • ページ上に隠しフィールドを置きます。

ページ上に隠しフィールドを追加すると、メニュー・バーが表示された場合に、隠しフィールドの値が使用されて初期選択が設定されます。 隠しフィールドは、選択されるメニュー項目の ID を含む必要があります。 別のメニュー項目への選択を設定するアクションをユーザーが実行する場合は常に、隠しフィールドが自動的に更新され、そのメニュー項目の ID を含むようになります。 ページが実行されると、隠しフィールドは最新の選択をサーバーに送信します。 この値は、次に表示されるページの同じような隠しフィールドにコピーされ、そのページの初期選択を設定します。

コンポーネントを発行する JSF タグ

<hx:panelMenu>

基本 HTML

<div class="classname" id="id"> (オプションの追加タグ) <input type="hidden" id="id_selection">

メニュー・バーの (選択の) 値は、入力フィールドがある場合はその入力フィールドの値として渡されます。 この値は、選択されているメニュー項目の ID です。

div に関連付けられているすべての属性がサポートされます。

div に関連付けられているイベント・ハンドラーはサポートされません。

JavaScript コンストラクター

hX_5.addComponent("id", new hX_5.JSFMenu(attributes)); 各部の意味は次のとおりです。

id

コンポーネントが付加される HTML タグの ID。

属性

コンマで区切られた属性のリスト。 各属性は、属性名と値から成る引用符付きストリングになっており、 コロンで区切られています (例: "label:MyLabel")。

属性

表 1. メニュー属性

属性名

説明

vertical

最上位メニューを、 水平方向 (false) または垂直方向 (true) のどちらで 表示させるかを指定します。 最上位メニューが 水平方向に表示される例としては、Windows の メニュー・バーがあります。 最上位メニューが 垂直方向に表示される例としては、Web ページの左側に表示される ナビゲーション・バーがあります。 これは、多くの Web ページで見ることができます。

vertical-body

サブメニュー (トップ・メニュー 以外のすべてのメニュー) を、 水平方向 (false) または垂直方向 (true) のどちらで 表示させるかを指定します。 Windows の メニュー・バーの場合、サブメニューは垂直方向に表示されます。

fly-open

最上位メニューにおいて、 サブメニューを表示するタイミングを、 メニュー項目にマウスオーバーしたときにするか (true)、 メニュー項目をクリックしたときにするか (false) を指定します。 Windows の メニュー・バーの場合は、 最上位メニューの項目をクリックする必要があります。 大抵の Web ページでは、 親メニュー項目にマウスオーバーしたときに、 サブメニューが表示されます。
注: 関連するサブメニューがメニュー項目内にない 場合、fly-open の指定内容にかかわらず、 ユーザーはそのメニュー項目をクリックして、 選択する (何かを実行する) 必要があります。

fly-open-body

サブメニュー (最上位より下のメニュー) において、 その下のサブメニューを表示するタイミングを、 メニュー項目にマウスオーバーしたときにするか (true)、 メニュー項目をクリックしたときにするか (false) を決定します。
注: 関連するサブメニューがメニュー項目内にない 場合、fly-open の指定内容にかかわらず、 ユーザーはそのメニュー項目をクリックして、 選択する (何かを実行する) 必要があります。

open-sticky

デフォルトでは、 サブメニューがアクティブになったとき (親の メニュー項目がマウスオーバーまたはクリックされたとき) のみ、 そのサブメニューがポップアップとして表示されます。 open-sticky を true に設定した場合、 メインメニューより下の各レベルにおいて、 そのレベルでマウスオーバーまたはクリックされた 最後のサブメニューが、表示され続けます。
注: メインメニューは、常にスティッキー・メニューです。 このプロパティーは、サブメニューにのみ適用されます。

open-in-place

デフォルトでは、サブメニューは別々のウィンドウに表示されます。 open-in-place を true に設定した場合、 親メニュー項目の後に、サブメニューがメニュー・バー内に開き、 サブメニューがそのスペースに (その場所で) 表示されます。 こうすることで、メニューをツリー・スタイルにすることができます。 メニュー・ツリーの各レベルにおいて、 その場で表示されるサブメニューは 1 つだけです。 別のサブメニューを表示させようとすると、 そこに表示されているメニューが 閉じて (非表示になって) から、 新しいサブメニューが表示されます。
注: その場で開くメニューは、同時にスティッキーでもあります。 水平方向に表示されるメニューでは、 この属性を使うことはほとんどありません (メニューが水平方向に表示されている場合、 この属性を使用しても使い勝手が悪くなるだけです)。

relative

この値のいずれかを指定すると、 マウスの位置または relative-to 属性で指定された タグのいずれかに相対して、 最上位メニューが配置されます。 指定しなかった場合、最上位メニューは、 メニューを表す div が通常配置される場所の いずれかに配置されます。
注: 通常は、この属性を使用して、 ユーザーがコンテナー・タグ内のいずれかの場所をクリックしたときか、 フィールド内でキーボード・アクションを行ったときに表示される、 コンテキスト・メニューを作成します。 relative が設定されたメニューは、 絶対位置を指定されているものとして処理されます。 この結果、relative が設定されているメニューは、CSS のプロパティー表示が 通常は「なし (none)」に設定されているため、 最初は非表示になっているはずです。 このメニューは、showMenu と hideMenu の呼び出しを 使用して、非表示または表示に することができます (または JWL アクションによって、 表示/非表示を選択)。

relative-to

位置決定に使用する タグの ID (position が左下、右下、左上、右上の いずれかに設定されている場合)。

initial-selection

選択済みとして最初に表示される メニュー項目の ID (選択済みとは、CSS によって定義された、 通常とは異なる表示状態のことです)。 例えば、メニュー・バー内のどのメニュー項目が、 バーの下に表示されている現行ページを表しているのかを、 一目で分かるようにしたいとします。 このような場合は、initial-selection を、 現行ページを表すメニュー項目の ID に設定します。
注: メニューがスティッキーでない場合は、initial-selection で設定した項目に関連する最上位メニューの項目が、 選択済みとして表示されます。 メニューがスティッキーである場合は、 指定された項目が選択済みとして表示され、 親メニューが表示されます。 親メニューも選択済みとして強調表示するかどうかは、select-all 属性によって決定します。

select-all

選択が指定されている場合、 上位項目を選択済みとして表示する (false) か、 その項目を含む親メニューから上位項目までの すべての項目を、選択済みとして表示するかを指定します。

tab-index

一部のブラウザー では、タブ・インデックスを <bdiv> タグ (メニュー・ バーの基本タグ) に割り当てることができません。 この属性を使用すると、すべてのブラウザーで機能するように、 メニュー・バーのタブ・インデックスを指定することができます。

target

ページ内の「input type='text'」フィールド の ID (このフィールドが提供されている場合)。 メニューで何かが選択されている場合は、 指定されたフィールドの値として、 メニュー項目のテキストが必ず設定されます。 通常、コンボ・ボックスをエミュレートする ポップアップ・メニューを作成する場合にのみ、 この属性が使用されます。 例えば、入力フィールドに隣接するメニューがあり、 メニューの最上位が単一のボタンになっているとします。 このボタンをクリックしてメニューを表示し、 そのメニューから項目を選択して、 入力フィールドの値を設定するような場合には、 この属性を使用してください。

onchange

リーフがクリックされる (アクションが行われる) たびに、 関数が呼び出されます (関数が提供されている場合)。 関数が呼び出されるのは、メニュー項目がクリックされた後です。 例えば、メニュー項目がリンクである場合、 そのリンクをクリックすると、関数が呼び出されます。 この関数には、function(thisObj、thisEvt) のように、 通常のシグニチャーを付けます。 thisObj は、メニュー・バーを表す div を常に参照します。 選択した (最後にクリックした) 項目のメニュー項目 ID は、 イベント・オブジェクト内の thisEvt.objSelected で 探すことができます。 選択した隠しフィールドがページ上にある場合は、 同様にこのフィールドの値から検索できます。

CSS クラス

メニュー・バーの CSS は複雑です。CSS クラスは、メニュー・バーの各レベルに対して提供できます。 レベル 1 はメインメニューです。レベル 2 は、メインメニューの項目に対するクリック/マウス操作の結果として表示されるすべてのサブメニューを定義します。レベル 3 は、それらのサブメニューから開くすべてのサブメニューを定義し、以下の下位レベルも同様です。最高 5 つのレベルの CSS クラスを指定できます。あるレベルのクラスを指定しない場合、そのレベルについては以前のクラスが使用されます (例えば、レベル 5 クラスを指定しない場合は、レベル 4 クラスが使用されます)。

各レベルは、基底クラス名に "_n" を付けて指定します。例えば、クラスが "foo" であるなら foo_2_div は第 2 レベルのサブメニューで使用されるすべての div のスタイルを指定します。

表 2. メニューの CSS クラス

CSS クラス名

説明

user-supplied

<input> タグ または <img> タグのクラスとして提供されます。 通常 (稼働) モードでの、 イメージ/ボタンのスタイルの プロパティーを設定します (例えば、高さ、幅、背景色の設定)。
注: イメージ/ボタンの種類やボタンの状態にかかわらず、 背景イメージのスタイル・プロパティーを使用して、 ボタンとして使用されるイメージを指定することができます。 これを指定する場合、 高さと幅のプロパティーも指定する (背景 イメージのサイズに合わせる) 必要があります。

<base_n>_div

各メニューが、div 内に組み込まれます。 この div のスタイルを指定します。

<base_n>_table

各メニューが、表を使用して div 内の行/列に編成されます。 このスタイルは、このレベルで表全体に適用されます。

<base_n>_separator

このレベルのメニューで、 メニュー項目の表示にセパレーターを使用する場合、 このクラスによってセパレーターのスタイルを設定します。 表のセルが、セパレーターになります (つまり、TD タグのスタイルを 設定することになります)。

<base_n>_separator_first

このレベルのメニューで、 メニュー項目の表示にセパレーターを使用する場合、 最初のセパレーターを別個に処理することができます。 例えば、この設定を使用すると、 メニュー上部に黒の太線や先行文字を追加できます。

<base_n>_separator_last

このレベルのメニューで、 メニュー項目の表示にセパレーターを使用する場合、 最後のセパレーターを別個に処理することができます。

<base_n>_cell_normal

各メニュー項目が、表のセルに組み込まれます。 以下のいずれかが適用されない限り、 このレベルのメニューにおけるすべてのセルに、 このスタイルが適用されます。

<base_n>_cell_moused

上記の属性と同じ機能を持ちますが、 セルをマウスオーバーした場合に使用されます。 他に指定がない場合は、選択したクラスが使用されます。 クラスが指定されていない場合は、標準クラスが使用されます。

<base_n>_cell_selected

上記の属性と同じ機能を持ちますが、 メニュー項目が選択された場合にのみ使用されます (以下を参照)。 他に指定がない場合は、マウスオーバーされたクラスが使用されます。 クラスが指定されていない場合は、標準クラスが使用されます。

<base_n>_cell_selected_moused

上記の属性と同じ機能を持ちますが、 メニュー項目が選択されていて、 マウスオーバーされている場合に使用されます。 他に指定がない場合は、マウスオーバーされたクラスが使用されます。 クラスが指定されていない場合は、選択したクラスが使用されます。

<base_n>_cell_disabled

上記の属性と同じ機能を持ちますが、 メニュー項目が使用不可の場合に使用されます。 他に指定がない場合は、標準クラスが使用されます。 クラスが指定されていない場合は、標準クラスが使用されます。

<base_n>_cell_first_normal

メニュー内の最初のセルを、 別個に処理することができます。 _cell クラスに代わって、ここで提供されたクラスが、最初のセルに適用されます。

<base_n>_cell_first_moused

メニュー内の最初のセルを、 別個に処理することができます。 _cell クラスに代わって、ここで提供されたクラスが、最初のセルに適用されます。 ここでは、マウスオーバーされたときの状態を指定します。

<base_n>_cell_first_selected

メニュー内の最初のセルを、 別個に処理することができます。 _cell クラスに代わって、ここで提供されたクラスが、最初のセルに適用されます。 ここでは、選択されたときの状態を指定します。

<base_n>_cell_first_selected_moused

メニュー内の最初のセルを、 別個に処理することができます。 _cell クラスに代わって、ここで提供されたクラスが、最初のセルに適用されます。 ここでは、選択されて、マウスオーバーされたときの状態を指定します。

<base_n>_cell_first_disabled

メニュー内の最初のセルを、 別個に処理することができます。 _cell クラスに代わって、ここで提供されたクラスが、最初のセルに適用されます。 ここでは、使用不可のときの状態を指定します。

<base_n>_cell_last_normal

メニュー内の最後のセルを、 別個に処理することができます。 _cell クラスに代わって、ここで提供されたクラスが、最後のセルに適用されます。

<base_n>_cell_last_moused

メニュー内の最後のセルを、 別個に処理することができます。 _cell クラスに代わって、ここで提供されたクラスが、最後のセルに適用されます。 ここでは、マウスオーバーされたときの状態を指定します。

<base_n>_cell_last_selected

メニュー内の最後のセルを、 別個に処理することができます。 _cell クラスに代わって、ここで提供されたクラスが、最後のセルに適用されます。 ここでは、選択されたときの状態を指定します。

<base_n>_cell_last_selected_moused

メニュー内の最後のセルを、 別個に処理することができます。 _cell クラスに代わって、ここで提供されたクラスが、最後のセルに適用されます。 ここでは、マウスオーバーされて、選択されたときの状態を指定します。

<base_n>_cell_last_disabled

メニュー内の最後のセルを、 別個に処理することができます。 _cell クラスに代わって、ここで提供されたクラスが、最後のセルに適用されます。 ここでは、使用不可のときの状態を指定します。

<base_n>_cell_alt_normal

代替セルのフラグを、メニュー項目に立てることができます。 メニュー項目が代替項目である場合、_cell クラスに代わって、 ここで提供されたクラスが収容セルに適用されます。

<base_n>_cell_alt_moused

代替セルのフラグを、メニュー項目に立てることができます。 メニュー項目が代替項目である場合、_cell クラスに代わって、 ここで提供されたクラスが収容セルに適用されます。 ここでは、マウスオーバーされたときの状態を指定します。

<base_n>_cell_alt_selected

代替セルのフラグを、メニュー項目に立てることができます。 メニュー項目が代替項目である場合、_cell クラスに代わって、 ここで提供されたクラスが収容セルに適用されます。 ここでは、選択されたときの状態を指定します。

<base_n>_cell_alt_selected

代替セルのフラグを、メニュー項目に立てることができます。 メニュー項目が代替項目である場合、_cell クラスに代わって、 ここで提供されたクラスが収容セルに適用されます。 ここでは、選択されたときの状態を指定します。

<base_n>_cell_alt_selected_moused

代替セルのフラグを、メニュー項目に立てることができます。 メニュー項目が代替項目である場合、_cell クラスに代わって、 ここで提供されたクラスが収容セルに適用されます。 ここでは、選択されて、マウスオーバーされたときの状態を指定します。

<base_n>_cell_alt_disabled

代替セルのフラグを、メニュー項目に立てることができます。 メニュー項目が代替項目である場合、_cell クラスに代わって、 ここで提供されたクラスが収容セルに適用されます。 ここでは、使用不可のときの状態を指定します。

<base_n>_item_normal

このクラスは、このレベルのすべてのメニュー項目に適用されます。 単一または複数のクラスが、 すでに項目に割り当てられている場合、 このクラスはリストの末尾に追加されます。

<base_n>_item_moused

このクラスは、このレベルのすべてのメニュー項目に適用されます。 単一または複数のクラスが、 すでに項目に割り当てられている場合、 このクラスはリストの末尾に追加されます。 ここでは、マウスオーバーされたときの状態を指定します。

<base_n>_item_selected

このクラスは、このレベルのすべてのメニュー項目に適用されます。 単一または複数のクラスが、 すでに項目に割り当てられている場合、 このクラスはリストの末尾に追加されます。 ここでは、選択されたときの状態を指定します。

<base_n>_item_selected_moused

このクラスは、このレベルのすべてのメニュー項目に適用されます。 単一または複数のクラスが、 すでに項目に割り当てられている場合、 このクラスはリストの末尾に追加されます。 ここでは、選択されて、マウスオーバーされたときの状態を指定します。

<base_n>_item_disabled

このクラスは、このレベルのすべてのメニュー項目に適用されます。 単一または複数のクラスが、 すでに項目に割り当てられている場合、 このクラスはリストの末尾に追加されます。 ここでは、使用不可のときの状態を指定します。

<base_n>_item_alt_normal

代替セルのフラグを、メニュー項目に立てることができます。 メニュー項目が代替項目である場合、_item クラスに代わって、 ここで提供されたクラスがその項目に適用されます。

<base_n>_item_alt_moused

代替セルのフラグを、メニュー項目に立てることができます。 メニュー項目が代替項目である場合、_item クラスに代わって、 ここで提供されたクラスがその項目に適用されます。 ここでは、マウスオーバーされたときの状態を指定します。

<base_n>_item_alt_selected

代替セルのフラグを、メニュー項目に立てることができます。 メニュー項目が代替項目である場合、_item クラスに代わって、 ここで提供されたクラスがその項目に適用されます。 ここでは、選択されたときの状態を指定します。

<base_n>_item_alt_selected_moused

代替セルのフラグを、メニュー項目に立てることができます。 メニュー項目が代替項目である場合、_item クラスに代わって、 ここで提供されたクラスがその項目に適用されます。 ここでは、選択されて、マウスオーバーされたときの状態を指定します。

<base_n>_item_alt_disabled

代替セルのフラグを、メニュー項目に立てることができます。 メニュー項目が代替項目である場合、_item クラスに代わって、 ここで提供されたクラスがその項目に適用されます。 ここでは、使用不可のときの状態を指定します。

<base_n>_arrow_normal

サブメニュー (レベル 1 以外) において、 メニュー項目で子サブメニューを開くと、 その項目を含むセルの右端に矢印が表示されます。 ここで指定するスタイルが、その矢印に適用されます。 このスタイルで背景イメージが指定されていない場合は、 テキストによる矢印の表示スタイルがデフォルトで設定されます。 このスタイルに背景イメージが含まれている場合、 テキストによる矢印は表示されず、 背景イメージが矢印として使用されます。

<base_n>_arrow_moused

サブメニュー (レベル 1 以外) において、 メニュー項目で子サブメニューを開くと、 その項目を含むセルの右端に矢印が表示されます。 ここで指定するスタイルが、その矢印に適用されます。 このスタイルで背景イメージが指定されていない場合は、 テキストによる矢印の表示スタイルがデフォルトで設定されます。 このスタイルに背景イメージが含まれている場合、 テキストによる矢印は表示されず、 背景イメージが矢印として使用されます。 ここでは、マウスオーバーされたときの状態を指定します。

<base_n>_arrow_selected

サブメニュー (レベル 1 以外) において、 メニュー項目で子サブメニューを開くと、 その項目を含むセルの右端に矢印が表示されます。 ここで指定するスタイルが、その矢印に適用されます。 このスタイルで背景イメージが指定されていない場合は、 テキストによる矢印の表示スタイルがデフォルトで設定されます。 このスタイルに背景イメージが含まれている場合、 テキストによる矢印は表示されず、 背景イメージが矢印として使用されます。 ここでは、選択されたときの状態を指定します。

<base_n>_arrow_selected_moused

サブメニュー (レベル 1 以外) において、 メニュー項目で子サブメニューを開くと、 その項目を含むセルの右端に矢印が表示されます。 ここで指定するスタイルが、その矢印に適用されます。 このスタイルで背景イメージが指定されていない場合は、 テキストによる矢印の表示スタイルがデフォルトで設定されます。 このスタイルに背景イメージが含まれている場合、 テキストによる矢印は表示されず、 背景イメージが矢印として使用されます。 ここでは、選択されて、マウスオーバーされたときの状態を指定します。

<base_n>_arrow_disabled

サブメニュー (レベル 1 以外) において、 メニュー項目で子サブメニューを開くと、 その項目を含むセルの右端に矢印が表示されます。 ここで指定するスタイルが、その矢印に適用されます。 このスタイルで背景イメージが指定されていない場合は、 テキストによる矢印の表示スタイルがデフォルトで設定されます。 このスタイルに背景イメージが含まれている場合、 テキストによる矢印は表示されず、 背景イメージが矢印として使用されます。 ここでは、使用不可のときの状態を指定します。

注:
  • _div クラスを使用して、正確にサブメニューの位置を、そのサブメニューの親項目と相対的に指定します。 margin-top および margin-left を使用して、メニューが親項目の下/左のどのくらい遠くに位置するかを指定します。 負の値を使用することができます。
  • _div クラスは、「一部の」ブラウザーでメニューを含む div に適用される、3 種類の効果をサポートしています。これらの効果はすべてのブラウザーでサポートされているわけではありません (サポートされていない場合は、それらの効果が単に描画されなくなります)。
    メニューの背景を透明にする (背景のみ、前景のテキストは透明にしない) には、次のようにします。
    -moz-opacity: .9;
    opacity: .9;

    両方のプロパティーを指定する必要があります (Mozilla 用と IE 用)。不透明度の値は、0 と 1 の間である必要があります。IE 用の値の違いに気を付けてください。通常の 90 ではなく、.9 のようなパーセント単位で指定します。

    メニューに影をつける場合は、以下を使用します。
    outline-color: #E4E4E5;
    outline-width: 1px;
    -moz-outlineColor: #E4E4E5;
    -moz-outline-width: 1px;

    この場合も、両方のプロパティーを指定する必要があります (Mozilla 用と IE 用)。色は、影の最も暗い部分の色を指定します。 幅は、立体の影付けの幅を指定します (最小 1)。影は、メニューの右側と下部に描画されます。

    IE (のみ) で、トランジション効果をメニューに適用できます (例えば、所定の位置にスライドできます)。これは、IE フィルター効果を使用して指定します。 例えば、以下のようになります。filter:progid:DXImageTransform.Microsoft.Inset(duration=.4);

    フィルターが検出された場合、フィルターはメニューが表示されるまで保留され (再生されず)、 メニューのスタイルが可視に変更される前に適用され、 その後で「再生」されます。

  • 項目クラスは、メニューのメニュー項目に適用されます。クラスは、すでに項目に適用されている任意のクラスに追加することができます。 項目の状態が変わると、クラスが変更されます。 例えば、メニュー項目が <a class="foo"></a> であるとします。

    normal クラスが適用されると、タグは <a class="foo menu_1_item_normal"></a> となります。

    マウスオーバーすると、<a class="foo menu_1_item_normal"></a> となります。

    CSS 選択規則を使用すると、複数のクラスを結合して、メニュー項目の個々のパーツにマウスオーバー効果 (または選択済み効果) を適用することができます。 例えば、次のようにします。<a class="foo"><img class="moo></a>

    マウスをメニュー項目の上に移動したときにクラスのイメージを変更するには、以下を使用します。
    <style>
    .menu_1_item_moused .moo { background-image: url('img/mouse-over-img.gif'); }
    </style>
  • 矢印クラスには、いくつかの特別な振る舞いがあります。これらのクラスはスライド右矢印に適用されます。この矢印はメニューの右端に沿って表示され、このメニュー項目に子項目があることを示します。

    矢印を抑制するには、高さを 0px に設定します。

    デフォルトで、この矢印はテキスト矢印 (通常状態では >、マウスオーバー状態では >>) です。テキスト矢印の代わりにグラフィックを使用するには、background-image プロパティーを使用してグラフィックを指定します。

    メニューの右端に相対的に矢印を配置するには、right プロパティーを使用します。 これは基本的に、矢印の右端とメニューの右端の間のマージン幅を設定します。 矢印を垂直に配置するには、margin-top プロパティーを使用します。

  • メニューに選択 (通常は initial-selection 属性の使用時かスティッキー・メニューの場合のみ表示) を表示しないようにする場合は、選択クラスが normal クラスと同じプロパティーになるように設定します。

API 呼び出し

表 3. メニューの API 呼び出し

API 呼び出し

説明

redraw()

基本タグの属性/プロパティーに加えられた 変更内容が反映されるように、コンポーネントを書き直します。

uirelease()

コンポーネントに関連付けられたアクティブ UI をリリースします。

setValue(string)

コンポーネントの値を設定し、提供された値が有効であることを確認します。

object = getValue(boolean)

コンポーネントの値を取得します。 ブール値が false である場合は、基本タグの値を取得することに相当します。 ブール値が true である場合は、 ストリングではなく、JavaScript™ の 日付/時刻オブジェクトとして、値が戻されます。

object = setAttribute(attribute)

属性を設定します。 属性がすでに設定されたものである場合は、 その値を変更します。

string = getAttribute(attribute-name)

属性の現行値を取得します。

string = getMenuItemById

項目の ID がメニュー・バーに追加された場合に、 その項目を含むメニュー項目の ID を戻します。

setFocus

メニュー・バーのフォーカスを、 指定したメニュー項目に設定します (項目 ID ではなく、 項目自体を指定する必要があります)。 ブール値が設定されている場合、 マウス・フォーカスとキーボード・フォーカスの両方が、 項目に対して設定されます。 ブール値が設定されていない場合は、 キーボード・フォーカスのみが設定されます。 通常、フォーカスの設定は、最上位メニュー内の項目 またはスティッキー・メニュー内の項目にのみ行います。

showMenu

メニュー・ツリーを表示します。 通常は、ポップアップとして表示されるメニューにのみ使用します。 この場合、ユーザー・アクション (例えば、キー入力) が 発生するまで、メニュー・バーは表示されません。 event は、メニューを表示させる イベント (クリック、キー入力など) に関連した イベント・オブジェクトです。 メニューが表示された後に、 フォーカスをメニュー内の最初の項目に移す場合は、 ブール値を true に設定する必要があります。
注: 振る舞いに JWL SHOW アクションを使用して、 それをメニューのターゲットに指定すると、 メニューの表示に showMenu 呼び出しが使用されます。

hideMenu ()

メニュー・ツリーを非表示にします。 通常は、「ポップアップ」として表示される メニューにのみ使用します。 この場合、ユーザー・アクションが発生しても、 メニュー・バーは表示されません。 この呼び出し以外にも、最上位メニューの div の 表示プロパティーを「なし」に設定することで、 同じ効果が得られます。

*addSubComponent

メニュー項目オブジェクト (通常は 新規に構成します) を、menu_id で識別されたメニューに追加します。 メニュー項目には、ID で指定される ID が与えられます。 位置が指定されている場合、 項目は指定された (ゼロ・ベースの) 位置に 追加されます (それ以外の項目は、 すべて位置が 1 つ下がります)。 指定がない場合は、メニューに追加されます。

*removeSubComponent

ID で識別されたメニュー項目 (メニュー項目を 追加する際に、ID が割り当てられています) が、 指定されたメニュー ID の子である場合に、 そのメニュー項目を除去します。

注: JSFMenu オブジェクトにメニュー項目を追加したり、除去するために使用される、hx_5 オブジェクト上の API 呼び出しは、アスタリスク (*) で表現されます。ルート・オブジェクトは hX_5.addComponent によって追加されることに気を付けてください。ルートのすべての子 (追加される JSFMenu オブジェクトまたは JSFMenuItem) は、呼び出しによって追加または除去されます。

アクセシビリティ

メニュー・バーは完全にキーボードによるアクセスが可能です。 最上位メニューの項目は、div タグの位置または tab-order 属性を使用して指定した位置で、ページのタブ移動順序に追加されます。 最上位メニュー内では、左/右矢印キー (垂直メニューの場合は上/下矢印キー) がタブ・キーと同じような振る舞いをします。ただし、最後の項目の場合はメニュー・バーの最初/最後に折り返します。サブメニューを開くには、スペース・バー (クリック) か、または下矢印キー (水平メニュー) あるいは右矢印キー (垂直メニュー) を使用します。サブメニュー内で、上/下矢印キー (水平メニューの場合は左/右キー) を使用すると、メニュー項目間を移動できます。fly-open モードでは、キーボードを使用して項目を移動するとサブメニューが自動的に開きます。下/右矢印キーを使用すると、サブメニューに移動します。 すべてのアクションに対して、クリック (スペース・バー、改行) すると、アクションが実行されます。

メニュー・バーの可視化は CSS により完全に定義されます。 視力障害のあるユーザーのためのメニュー・バーの使用可能度は、メニューのスタイルを決定する際に使用する CSS で、開発者がこれを考慮するかどうかにより異なります。

メニュー・バーでは現在、XML 役割/状態が報告されません (ただし、これは XHTML 準拠です)。これは早急に追加されます。

制限

サンプル・コード

Windows スタイルのメニュー (例えば、JWL-TEST-Menu-3-notes.jsp)

<div id="form1:menu1" class="MenuBar"></div>
<div style="display:hidden;position:absolute">
   <h:commandLink styleClass="commandLink" id="linkA" action="#{pc_JWLTESTMenu3notes1.doLink1Action}" >
        <h:outputText id="textA" styleClass="MB_Link_Medium_Hinky" value="Samples"></h:outputText>
    </h:commandLink>
...
</div>
<script>
hX.addComponent("form1:menu1", new hX.JSFMenu("fly-open:false", "fly-open-body:true"));
hX.addSubComponent("form1:menu1", "form1:menu1-1", new hX.JSFMenuItem('item:form1:linkA'));
...
hX.onPageLoad();
</script>

最初の div は、メニュー・バーが表示される場所を指定します。 2 番目の div には、メニューに移動するタグが含まれています (ここでは JSF リンク)。メニューは、hX.JSFMenu 呼び出しにより生成され、コンポーネントとしてページに追加されます。 メニューは、最上位メニュー (メニュー・バー) については 非 fly-open スタイルとして定義され (クリック・スタイルのメニュー )、すべてのサブメニューについては fly-open スタイル (親項目をマウスオーバーしたときに fly-open する) として定義されます。 各メニュー項目について、1 つの hX.JSFMenuItem コンポーネントが生成され、hX.addSubComponent 呼び出しによって適切な場所 (ここでは最上位メニュー) に追加されます。

1 つのサブメニューを持つ、タブ・スタイルのメニュー (例えば、JWL-TEST-Menu-2-apple.jsp)

<div id="map2" style="padding:0px;padding-top:4px" class="AppleBar"></DIV>
<script>
hX.addComponent("map2", new hX.JSFMenu("fly-open:false", "fly-open-body:false", "select-all:true", "vertical-body:false", "open-sticky:true"));
hX.addSubComponent("map2", "map2-0s", new hX.JSFMenuItem("separator"));
hX.addSubComponent("map2", "map2-1", new hX.JSFMenuItem("label:More Samples"));
...
hX.onPageLoad();
</script>

div は、メニュー・バーが表示される場所を指定します。 メニューは、hX.JSFMenu 呼び出しにより生成され、コンポーネントとしてページに追加されます。 メニューはすべてのレベルにおいて非 fly-open (クリック・スタイル・メニュー) として定義され、また、すべてのレベルにおいて水平と定義されます。 サブメニューは開いたままになります。選択は、隠しフィールドによってページに渡され、またはページから渡されます。 メニューが表示されている場合、選択はすべてのレベルで表示されます。 各メニュー項目について、1 つの hX.JSFMenuItem コンポーネントが生成され、適切な場所に追加されます。 ここでは、1 つのセパレーターが、1 つのメニュー項目 (ラベル) とともに最上位 (メイン) メニューに追加されます。

ツリー・スタイル・メニュー

<div id="menu1" class="menubar"></div> <input id="menu1_selection" type="hidden" value="">
<script>
hX.addComponent("menu1", new hX.JSFMenu("vertical:true","vertical-body:true", "fly-open:false", "fly-open-body:false", "open-in-place:true"));
hX.addSubComponent("menu1", "menu1-1", new hX.JSFMenuItem("lab:Home <span class='MBA'> »</span>", "action-click:true","action:goto", "target:url('/JWL2_Menu/home.jsp')"));
...
hX.onPageLoad();
</script>

div は、メニュー・バーが表示される場所を指定します。 メニューは、hX.JSFMenu 呼び出しにより生成され、コンポーネントとしてページに追加されます。 メニューはすべてのレベルにおいて非 fly-open (クリック・スタイル・メニュー) として定義され、また、すべてのレベルにおいて垂直と定義されます。 サブメニューは open-in-place です。つまり、メニュー内 (ポップアップではなく) で開き、ツリーを形成します。選択は、隠しフィールドによってページに渡され、またはページから渡されます。 メニューが表示されている場合、選択は最上位レベルでのみ表示されます。 各メニュー項目について、1 つの hX.JSFMenuItem コンポーネントが生成され、適切な場所に追加されます。 ここでは、サブスパン (サブスパンの独立したスタイル設定が可能) を含むテキストのスパンを使用して、クリック可能な項目が作成されます (URL が指定されます)。

ボタンに付けられたドロップダウン・メニュー

<h:inputText tabindex="10" style="width:140px" styleClass="inputTextB" value='Letter (8.5 x 11in)' id="text1" readonly="true"></h:inputText>
<div id="form1:menu2" class="menubar2"></div>
<input id="form1:menu2_selection" type="hidden" value=""">

<script>
hX.addComponent("form1:menu2", new hX.J_M("tab-index:12", "fly-open:false", "onchange:return action5();"));
hX.addSubComponent("form1:menu2","form1:menu2-1", new hX.JSFMenuItem('label:<IMG
border="0" src="img/1x1.gif" width="11" height="10">'));
hX.addSubComponent("form1:menu2-1", "form1:menu2-1-1", new hX.JSFMenuItem('lab:<table name="inner" class="MI2_T" border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle"><IMG class="MI2_C1 MI2_C1S" border="0" src="img/iconC.gif" width="11" height="15" ><td class="MI2_C2">Letter (8.5 x 11in)</td></tr></table>'));
...
hX.onPageLoad();
</script>

div は、メニュー・バーが表示される場所を指定します。 メニューは、hX.JSFMenu 呼び出しにより生成され、コンポーネントとしてページに追加されます。 メニューはすべてのレベルにおいて非 fly-open (クリック・スタイル・メニュー) として定義され、また、すべてのレベルにおいて垂直と定義されます。 ユーザーが要素をクリックしたときに onchange 関数が呼び出されるように、関数をメニューに設定します。 選択された項目は、隠しフィールドの値として戻されます。 各メニュー項目について、1 つの hX.JSFMenuItem コンポーネントが生成され、適切な場所に追加されます。 ここでは、最上位レベルの項目が提供されています (これはボタンとしてスタイル設定されています)。サブ項目はテーブルとして指定されます。このテーブルではラベルの隣にチェック・マークが表示されます。 ユーザーが項目をクリックすると、onchange 関数は、テーブル内のチェック・マークのオン/オフを切り替えます。


フィードバック