メニュー項目

項目を JSFMenu に追加します。

JSFmenu の項目は、JSFMenuItem によって取り込まれます。JSFMenuItem を JSFMenu に追加すると、メニュー・バーの最上位レベルが形成されます。JSFMenuItem を他の JSFMenuItem に追加すると、サブメニューが形成されます。メニューは、同じ親を共有するすべての JSFMenuItem で構成されます。

JSFMenuItem には、以下のものを指定できます。
  • 収容フォーム内で定義される任意のスパンまたはスパン相当のもの (例えばリンク) またはテーブル。 項目はメニューに移動します。
  • コンストラクターに属性として指定するスパンまたはスパン相当またはテーブル (スパン/テーブルはコンストラクターにより作成され、メニューに移動します)。
  • セパレーター (グラフィック、テキスト、またはその両方であることが可能)。

JSF メニュー・バーは 1 つの JSFMenu コンポーネントおよび 1 つ以上の JSFMenuItem コンポーネントによって定義されます。メニュー・バーの各項目は、1 つの JSFMenu 項目によって定義されます。

メニュー項目はサブコンポーネント、つまり別のコンポーネントの子としてページに追加されます。 メニューは、同じ親を共有するすべてのメニュー項目で構成されます。 メニュー項目は、JSFMenu または JSFMenuItem コンポーネントのいずれかに追加されます。 JSFMenu に追加されたメニュー項目は、トップまたはメインメニューを形成します。その他の JSFMenuItem コンポーネントに追加された項目はサブメニューを形成します。

メニュー項目は、hX_5.addSubComponent 呼び出しを使用してページに追加されます。呼び出しには 2 つの形式があります。
hX_5.addSubComponent("parent-id", "this-id",  new hX_5.JSFMenuItem(attributes), position);
または、
hX_5.addSubComponent("parent-id", [new hX_5.JSFMenuItem(attributes), new hX_5.JSFMenuItem(attributes), ...]);

最初の形式では、親を指定し、このメニュー項目に割り当てられる ID を指定します。 2 番目の形式では、親を指定し、複数のメニュー項目を指定します。 メニュー項目の ID は、親 ID に -1、-2、-3 を付加することにより、生成されます。 いずれの形式の場合も、メニュー項目は指定した順番でメニューに追加されます。最初に追加した呼び出しが最初の項目をメニューに追加し、2 番目の呼び出しは 2 番目の項目を追加します。 項目が追加される場所の明示制御は、メニューに項目のゼロ・ベースの位置を指定する 4 番目の引数を追加することにより、最初の構文 (のみ) で可能です。 メニュー項目は、hX_5.removeSubComponent 呼び出しを使用してメニューから除去することができます (非推奨)。

メニュー項目の内容は、3 つの異なる方法で指定できます。
  1. テキスト・ストリングまたは HTML として指定。
  2. 項目として使用される、フォーム内の別の場所にあるタグの ID として指定。
  3. セパレーターとして使用するように指定された、テキスト・ストリングまたは HTML として指定。

2 番目の形式 (ID を使用) は、JSF タグが複数行の HTML を発行してメニュー・バーが JSF コンポーネントで構成された場合に、使用する必要があります。

いかなる場合も、指定される HTML は連続したインライン HTML (例えば、スパン、イメージ、およびリンク) またはテーブルのいずれかである必要があります。HTML は HTML ボタンを定義することもあります。他の形式の入力および選択を定義する HTML は、正しくレンダリングされることがありますが、一般にはマウスやキーボードのアクションに正しく反応しません。

各メニュー項目は、親、リーフ、またはセパレーターとして振る舞います。 セパレーターはマウスやキーボード・アクションに反応しません。 親およびリーフ項目はマウス・アクションやキーボード・アクションに反応します。親項目の上でクリックしたりマウスオーバーすると、対応するサブメニューが表示されます (つまり、親は他の項目が追加されている項目です)。リーフ上をクリックすると、アクションが起こります。 最も一般的なアクションは、指定したページに移動することです。

テキスト・ストリングまたは HTML を指定してメニュー項目を定義し、これがリーフの場合は、実行される JSF アクション (例えば GOTO) とそのアクションのターゲット (例えば、url('index.jsp')) を指定することによって、そのアクションを指定します。あるいは、呼び出す JavaScript™ 関数を指定することができます。 ページの別の場所でタグの ID を指定することによりメニュー項目を定義する場合、指定されたタグは、クリックに反応する方法を知る必要があります。 例えば、onclick イベント・ハンドラーを含む <a> タグまたは <span> タグなどです。

通常、親項目には割り当てられたアクションがありません。 通常、リーフ項目には割り当てられたアクションがあります。親項目に割り当てられたアクションがある場合は、まず親のように振る舞い (サブメニューを表示)、次に、アクションを実行します (クリックされた場合)。アクション・クリック・パラメーターを使用してこの振る舞いをオーバーライドし、強制的に親がアクションのみを実行するようにすることができます (アクションが別のページへの移動や実行依頼である場合に役に立ちます)。

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

基本 HTML

  • none
  • <a id="id">
  • <input type="submit" id="id">
  • <input type="reset" id="id">
  • <input type="button" id="id">
  • <img src="src" id="id">
  • 上記および/またはテキストを含む、<div id="id"><span id="id"> または <table id="id"> のような、任意のコンテナー・タグ

基本タグに設定されるすべての属性がサポートされます。

原則として、タグと関連付けられたイベント・ハンドラーはサポートされません。 ただし、onclick イベントに振る舞いを付加することはできます。

JavaScript コンストラクター

hX_5.addSubComponent("parent-id", "this-id", new hX_5.JSFMenuItem(attributes), position); or hX_5.addSubComponent("parent-id", [new hX_5.JSFMenuItem(attributes), new hX_5.JSFMenuItem(attributes), ...]); 各部の意味は次のとおりです。

parent-id

このサブコンポーネントの親である JSF コンポーネントの ID。

this-id

この ID に指定する ID。 ページ内で固有でなければなりません。

属性

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

position

同じ親を持つ他のサブコンポーネントに相対する、 このサブコンポーネントの位置。 省略した場合、サブコンポーネントが追加されます。

1 回の呼び出しで複数項目を追加する 2 番目の構文を使用する場合は、追加された項目に対して、親 ID に「-1」(-2、-3、-4、...) を付加して作成された ID が割り当てられます。

属性

表 1. メニュー項目属性

属性名

説明

label

オブジェクト用に表示するテキスト。

separator

このメニュー項目が、 クリック不可能なセパレーターであることを示します。 値が指定されていない場合、 空の表のセルがレンダリングされます (線またはボックスになるように、 スタイルが設定されます)。 単純なテキストまたはインライン HTML を、 表のセルにレンダリングさせることもできます。 ラベル、セパレーター、または項目のいずれかを提供する必要があります。

item

メニューを含むフォーム内にある、インライン HTML タグまたは表タグの ID。 タグ (およびその子) は、メニュー項目内に移動されます。 (複数の HTML タグが発行される場合がある) JSF コンポーネントで メニュー項目を指定する場合は、この方法をお勧めします。 ラベル、セパレーター、または項目のいずれかを提供する必要があります。
注: ページ上のフリッカーを削減するには、 メニュー項目内に移す項目を、 display:none のスタイルに設定して、 絶対位置が指定された div に組み込んでください。

disabled

オブジェクトを使用可能にするかどうかを指定します。

alt-class

このメニュー項目のスタイルを設定するために、 代替クラスを使用するよう指定します。 これによって、メニュー内の項目に さまざまなスタイルを持たせることが可能になります。

onchange

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

action

クリック可能なエンティティーを クリックしたときに実行されるアクション (またはアクションのセット)。 通常は、アクションのターゲット (またはターゲットのセット) が 必要になります。

target

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

action-click

メニュー項目は、親またはリーフのいずれかです。 親メニュー項目とは、 関連するサブメニュー (そのメニュー項目を マウスオーバー/クリックしたときに表示されるメニュー) を 持つメニュー項目のことです。 リーフ・メニュー項目は、 関連するサブメニューは持ちませんが、 代わりにクリック・イベント (例えば、リンクのクリック) に 対応しています。 メニュー項目の作成に使用される項目をリーフにする場合、 その項目はクリック (例えば、リンクやボタンのクリック) に 対応するものである必要があります。 メニュー項目の作成時に使用したラベルに onchange または action が 指定されている場合、 そのメニュー項目はリンクとして 処理されます (このラベルは、 自動的に <a> タグ内に組み込まれ、 この項目をクリックしたときに、提供された関数/アクションが実行されます)。 親であり、リーフでもあるメニュー項目を定義することができます。 例えば、メニュー項目がラベルで、 関連したアクションを持っていて、 専用に定義されたサブメニューも持っている場合、 この項目は親であり、リーフでもあります。 また、メニュー項目がリンクになっている項目で、 専用に定義されたサブメニューを持っている場合も、 親であり、リーフでもあるといえます。 親であり、リーフでもある項目をユーザーがクリックした場合、 サブメニューが表示されてから、アクションが実行されます。 親であり、リーフでもある項目に action-click が 指定されている場合は、 サブメニューは表示されず、アクションのみが実行されます。 リーフのアクションを実行する際に、 その直前にサブメニューが開いてしまう場合は、 必ずこの属性を設定して、 アクションが正しく実行されるようにしてください。

CSS クラス

なし。 CSS は JSFMenu コンポーネントで指定されます。

API 呼び出し

表 2. メニュー項目 API 呼び出し

API 呼び出し

説明

object = setAttribute(attribute)

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

string = getAttribute(attribute-name)

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

制限


フィードバック