メニュー・バーは少なくとも 1 つのメニューで構成され、サブメニューを含む場合もあります。 メニュー内の各項目で、その項目に関連した子メニューがある場合、ユーザーがその項目上にマウスを置いたりクリックしたりすると、対応するサブメニューが表示されます。 項目に関連した子メニューがない場合は、ユーザーがその項目上でクリックするとアクションが起こります。
最上位メニューは水平にも垂直にも表示することができます。 子のサブメニューはマウスオーバーまたはクリックによってアクティブ化できます。 サブメニューも同様に、水平または垂直に表示することができ、また、マウスオーバーまたはクリックによってアクティブ化できます。 例えば、標準的な Windows® のメニュー・バーでは、最上位メニューは「クリック時に水平」に表示されますが、子のサブメニューは「マウスオーバー時に垂直」に表示されます。 その他のスタイル・オプションでは、サブメニューの「ポップアップ」(通常の場合) での表示や「インライン」(「ツリー・スタイル」メニューの場合) での表示がサポートされています。サブメニューは「スティッキー」(一度選択されたら常に表示) または「ポップアップ」(選択した後は非表示) の場合があります。
メニュー項目は JSFMenuItem によって取り込みます (メニューそのものには、項目が取り込まれるまで何も含まれません)。メニュー項目は、代替の項目スタイル、セパレーター、first-item-is-different などによって、さまざまなスタイルを設定できます。各項目には、他のインライン HTML を含むことができるインライン HTML タグが含まれています。 例えば、項目は単純なテキストであることも、画像やチェック・マークなどの複数のものを含む <a> タグであることも可能です。
ツリー・メニューを表示するには、JSFMenu コンポーネントを使用します。 メニューの各項目は、実行されるアクション (例えば、それに続くリンク) であるか、または別のメニューに続きます。 アクションを実行し、かつ、別のノードにつながるメニュー項目にすることも可能ですが、これは稀な場合です。
ツリーの最上位メニューは常に表示されます。 最上位のメニュー項目をマウスオーバーまたはクリックすると、該当するサブメニューが表示されます。 サブメニューのメニュー項目をマウスオーバーまたはクリックすると、第 3 レベルのメニューが表示されます。 サブメニューの階層は、最大 5 層の深さにすることができます。 最も単純なケースでは、1 つの項目 (例えば、下矢印ボタン) を含むメニュー・バーにサブメニューを関連付けて、ドロップダウン・メニューを作成できます。
メニュー・バーは、ページに適切に配置された <div> タグに添付されている JSFMenu コンポーネントから構築されます。最上位メニューは div で描画されます。
JSFMenu コンポーネントはメニュー・バーの構造のみを定義し、メニュー・バーのいずれのコンテンツ (メニュー項目) も定義しません。構造 (メニュー項目のツリー) は、JSFMenuItem サブコンポーネントを JSFMenu コンポーネントに追加することにより定義されます。
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 つの項目を含むメニューを作成します。
一般的な規則として、メニューの親であるメニュー項目はクリックできません。 反対に、メニューの親でないメニュー項目は、クリックできます。 メニュー項目は、作成時にアクション/関数が提供された場合、または HTML の既存の一部を提供し、その HTML が本質的にクリック可能 (リンク) である場合に、クリックできます。詳しくは、JSFMenuItem の資料を参照してください (メニュー項目をメニューの親にして、クリック可能にする方法を含む)。
メニュー・バーは選択をサポートします。 メニュー項目が選択されると、メニューの他の項目から視覚的に区別できるように、selected クラスを使用して表示されます。 項目は、クリックすると選択され、クリック後はそのまま表示しておくことができます。 通常、これは項目がスティッキー・メニューにある場合にのみ起こります (最上位メニューは常にスティッキーです)。
選択は、メニュー・バーに現行ページを強調表示する方法として最も便利です。 例えば、メニューが 5 つのメニュー項目 (1 つのレベルで) で構成されており、ページ 1、2、3、4、および 5 の間を移動できると仮定します。このメニュー・バーは、5 つのページの一番上に表示されます。 選択を使用すると、ページ 1 が表示されているときに、ページ 1 のメニュー項目を強調表示することができます。 ページ 2 が表示されている場合は、ページ 2 のメニュー項目を強調表示できます。
ページ上に隠しフィールドを追加すると、メニュー・バーが表示された場合に、隠しフィールドの値が使用されて初期選択が設定されます。 隠しフィールドは、選択されるメニュー項目の ID を含む必要があります。 別のメニュー項目への選択を設定するアクションをユーザーが実行する場合は常に、隠しフィールドが自動的に更新され、そのメニュー項目の ID を含むようになります。 ページが実行されると、隠しフィールドは最新の選択をサーバーに送信します。 この値は、次に表示されるページの同じような隠しフィールドにコピーされ、そのページの初期選択を設定します。
<hx:panelMenu>
<div class="classname" id="id"> (オプションの追加タグ) <input type="hidden" id="id_selection">
メニュー・バーの (選択の) 値は、入力フィールドがある場合はその入力フィールドの値として渡されます。 この値は、選択されているメニュー項目の ID です。
div に関連付けられているすべての属性がサポートされます。
div に関連付けられているイベント・ハンドラーはサポートされません。
hX_5.addComponent("id", new hX_5.JSFMenu(attributes)); 各部の意味は次のとおりです。
id |
コンポーネントが付加される HTML タグの ID。 |
属性 |
コンマで区切られた属性のリスト。 各属性は、属性名と値から成る引用符付きストリングになっており、 コロンで区切られています (例: "label:MyLabel")。 |
属性名 |
説明 |
---|---|
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 クラスは、メニュー・バーの各レベルに対して提供できます。 レベル 1 はメインメニューです。レベル 2 は、メインメニューの項目に対するクリック/マウス操作の結果として表示されるすべてのサブメニューを定義します。レベル 3 は、それらのサブメニューから開くすべてのサブメニューを定義し、以下の下位レベルも同様です。最高 5 つのレベルの CSS クラスを指定できます。あるレベルのクラスを指定しない場合、そのレベルについては以前のクラスが使用されます (例えば、レベル 5 クラスを指定しない場合は、レベル 4 クラスが使用されます)。
各レベルは、基底クラス名に "_n" を付けて指定します。例えば、クラスが "foo" であるなら foo_2_div は第 2 レベルのサブメニューで使用されるすべての div のスタイルを指定します。
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 以外) において、 メニュー項目で子サブメニューを開くと、 その項目を含むセルの右端に矢印が表示されます。 ここで指定するスタイルが、その矢印に適用されます。 このスタイルで背景イメージが指定されていない場合は、 テキストによる矢印の表示スタイルがデフォルトで設定されます。 このスタイルに背景イメージが含まれている場合、 テキストによる矢印は表示されず、 背景イメージが矢印として使用されます。 ここでは、使用不可のときの状態を指定します。 |
-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);
フィルターが検出された場合、フィルターはメニューが表示されるまで保留され (再生されず)、 メニューのスタイルが可視に変更される前に適用され、 その後で「再生」されます。
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 プロパティーを使用します。
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 の子である場合に、 そのメニュー項目を除去します。 |
メニュー・バーは完全にキーボードによるアクセスが可能です。 最上位メニューの項目は、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 関数は、テーブル内のチェック・マークのオン/オフを切り替えます。