菜单项

对 JSFMenu 添加菜单项。

JSFmenu 包含 JSFMenuItem。通过对 JSFMenu 添加 JSFMenuItem,可以构造菜单栏的顶级菜单。通过对其他 JSFMenuItem 添加 JSFMenuItem,可以构造子菜单。菜单是所有共享同一个父代的 JSFMenuItem。

JSFMenuItem 可以是:
  • 外围表单中定义的任何 span、诸如链接之类等同于 span 的内容以及 table。此项将移入菜单。
  • 作为构造函数属性指定的 span、等同于 span 的内容或 table,span/table 由构造函数创建并移入菜单。
  • 分隔符。分隔符可以是图形和/或文本。

JSF 菜单栏由一个 JSFMenu 组件以及一个或多个 JSFMenuItem 组件定义。菜单栏中的每个项由一个 JSFMenu 项定义。

菜单项将作为子组件(即作为另一个组件的子代)添加到页面中。菜单是所有共享同一个父代的菜单项。可以对 JSFMenu 或 JSFMenuItem 组件添加菜单项。对 JSFMenu 添加的菜单项构成顶级菜单或主菜单。对其他 JSFMenuItem 组件添加的菜单项构成子菜单。

菜单项通过 hX_5.addSubComponent 调用添加到页面。此调用有两种格式:
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 调用,可以从菜单中除去菜单项。

可以通过三种不同方法来提供菜单项内容:
  1. 作为文本字符串或 HTML 字符串。
  2. 作为表单其他位置中要用作菜单项的标记的 ID。
  3. 指定用作分隔符的文本字符串或 HTML 字符串。

注意,由于 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 参数来覆盖此行为并强制父代只执行操作。如果该操作是转至另一个页面或执行提交,则此功能非常有用。

发送组件的 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);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。

属性

表 1. 菜单项属性

属性名称

描述

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,则当菜单项既是父代菜单项又是叶菜单项时,将不显示子菜单,而仅运行操作。只要叶菜单项的操作会导致提交,就应该设置此属性,以防止子菜单刚好在提交发生前打开。

CSS 类

无。对 JSFMenu 组件指定 CSS。

API 调用

表 2. 菜单项 API 调用

API 调用

描述

object = setAttribute(attribute)

设置属性,或如果以前已设置属性,则更改其值。

string = getAttribute(attribute-name)

检索属性的当前值。

局限性


反馈