JSFmenu 包含 JSFMenuItem。通过对 JSFMenu 添加 JSFMenuItem,可以构造菜单栏的顶级菜单。通过对其他 JSFMenuItem 添加 JSFMenuItem,可以构造子菜单。菜单是所有共享同一个父代的 JSFMenuItem。
JSF 菜单栏由一个 JSFMenu 组件以及一个或多个 JSFMenuItem 组件定义。菜单栏中的每个项由一个 JSFMenu 项定义。
菜单项将作为子组件(即作为另一个组件的子代)添加到页面中。菜单是所有共享同一个父代的菜单项。可以对 JSFMenu 或 JSFMenuItem 组件添加菜单项。对 JSFMenu 添加的菜单项构成顶级菜单或主菜单。对其他 JSFMenuItem 组件添加的菜单项构成子菜单。
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), ...]);
在第一种格式中,需要指定父代以及要对此菜单项指定的 ID。在第二种格式中,需要指定父代以及多个菜单项。菜单项的 ID 是通过对父代标识追加 -1、-2 和 -3 等编号生成的。无论使用哪种格式,都将按指定的顺序将菜单项添加到菜单中,第一个添加调用将第一个菜单项添加到菜单中,第二个调用将添加第二个菜单项。使用第一种语法时,通过添加第四个参数来指定菜单项在菜单中基于零的位置,可以明确地控制菜单项的添加位置。通过使用不推荐使用的 hX_5.removeSubComponent 调用,可以从菜单中除去菜单项。
注意,由于 JSF 标记可能会发出多行 HTML 代码,因此,如果菜单栏由 JSF 组件组成,则应该使用第二种格式,即使用 ID。
在任何一种情况下,提供的 HTML 代码都应该是一系列诸如 span、image 和 link 之类的直接插入 HTML 代码,也可以是 table。HTML 代码还可以定义 HTML 按钮。定义了其他格式的 input 和 select 的 HTML 代码可能能够正确呈示,但通常无法正确响应鼠标/键盘操作。
每个菜单项都将成为父项、叶子项或分隔符。分隔符不会对鼠标/键盘操作进行响应。父项和叶子项都会对鼠标/键盘操作进行响应。当您单击父项或者将鼠标指针悬停在父项上时,将显示相应的子菜单。即,父代是包含其他项的项。当您单击叶子项时,将执行操作。最常见的操作是转到指定的页面。
如果通过指定文本字符串或 HTML 字符串来定义菜单项,并且该菜单项是叶子项,则通过指定要执行的 JSF 操作(例如 GOTO)和操作目标(例如 url('index.jsp'))来提供要执行的操作。此外,还可以指定要调用的 JavaScript™ 函数。如果通过指定页面其他位置中标记的 ID 来定义菜单项,则指定的标记应该知道如何响应单击。例如,该标记可以是带有 onclick 事件处理程序的 <a> 标记或 <span>。
通常,未对父项指定操作,但对叶子项指定了操作。如果对父项指定了操作,则该父项将首先执行父代的行为,即显示子菜单。接着,如果用户单击该父项,则该父项将执行操作的行为。可以使用 action-click 参数来覆盖此行为并强制父代只执行操作。如果该操作是转至另一个页面或执行提交,则此功能非常有用。
支持对基本标记设置的所有属性。
通常,不支持与该标记相关联的事件处理程序。但是,可以将行为连接到 onclick 事件。
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), ...]); 其中
parent-id |
作为此子组件父代的 JSF 组件的 ID。 |
this-id |
指定给此 ID 的 ID。在页面中必须唯一。 |
属性 |
逗号分隔的属性列表,其中每个属性都是一个加引号的字符串,此字符串包含使用冒号分隔的属性名称和值,例如,"label:MyLabel"。 |
position |
此子组件相对于其他具有相同父代的子组件的位置。如果省略,则将追加该子组件。 |
使用第二种语法通过一个调用添加多个菜单项时,将对添加的菜单项指定通过对父代标识追加“-1”(-2、-3、-4,...)生成的 ID。
属性名称 |
描述 |
---|---|
label |
要为对象显示的文本。 |
separator |
指示此菜单项是不可单击的分隔符。如果未提供值,则将呈示一个空的表单元格,其样式可设置为类似线或框。此外,还可以提供简单文本或内联 HTML 以便在表单元格中呈示。必须提供标签、分隔符或菜单项。 |
item |
在包含此菜单项的表单中的内联 HTML 标记或表标记的 ID。此标记(及其子标记)会被移到该菜单项中。对于可能发送多个 HTML 标记的 JSF 组件,建议使用此方法来指定菜单项。必须提供标签、分隔符或菜单项。
注: 为减少页面上的闪烁,要移动到菜单项中的各项应位于样式设置为 display:none 的绝对定位 div 内。
|
disabled |
指定对象是否可用。 |
alt-class |
指定应使用备用类来设置此菜单项的样式。这允许菜单中的各项具有不同的样式。 |
onchange |
如果提供,则为每次单击叶菜单(执行某个操作)时所调用的函数。在单击菜单项后调用此函数,例如,如果菜单项是链接,则在单击该链接后将调用此函数。函数的特征符通常是 function(thisObj, thisEvt)。thisObj 将始终引用表示菜单栏的 div。所选择(最后单击)的菜单项的 ID 在事件对象中作为 thisEvt.objSelected 出现,或者如果隐藏选择字段在页面上,则也可以从此字段的值中检索到此 ID。 |
action |
单击一个可单击实体时所要执行的一个或一组操作。通常需要该操作的一个或一组目标。 |
target |
如果提供,则为页面中 input type='text' 字段的 ID。每次在菜单中选择一个菜单项时,该菜单项的文本都会设置为指定字段的值。此属性通常仅适用于生成一个仿真组合框的弹出菜单,即,您有一个输入字段,该字段带有一个顶级菜单为单按钮的邻近菜单,单击该按钮将显示菜单,从此菜单中选择一个菜单项将设置输入字段的值。 |
action-click |
菜单项可以是父代菜单项,也可以是叶菜单项。父菜单项是具有关联子菜单的菜单项,当您将鼠标指针悬停在父菜单项上/单击父菜单项时,将显示该子菜单。叶菜单项没有关联的子菜单,相反,它应该是可响应 click 事件的对象,例如,链接。当使用某个项创建菜单项时,如果菜单项是叶菜单项,则它应该是可响应 click 事件的对象,例如,链接或按钮。如果使用标签创建了菜单项并提供了 onchange 函数或某个操作,则该菜单项将被作为链接来处理。在单击该项后,标签将被自动包含在 <a> 标记中,并运行提供的函数/操作。可能可以定义既是父代菜单项又是叶菜单项的菜单项。例如,如果菜单项是标签,具有关联的操作,并且还定义了子菜单,则它既是父代菜单项又是叶菜单项。同样,如果菜单项是某个项,该项是一个链接,并且菜单项还定义了一个子菜单,则它既是父代菜单项又是叶菜单项。如果菜单项既是父代菜单项又是叶菜单项,则当用户单击该菜单项时,将显示子菜单,且随后将运行操作。如果指定了 action-click,则当菜单项既是父代菜单项又是叶菜单项时,将不显示子菜单,而仅运行操作。只要叶菜单项的操作会导致提交,就应该设置此属性,以防止子菜单刚好在提交发生前打开。 |
无。对 JSFMenu 组件指定 CSS。
API 调用 |
描述 |
---|---|
object = setAttribute(attribute) |
设置属性,或如果以前已设置属性,则更改其值。 |
string = getAttribute(attribute-name) |
检索属性的当前值。 |