菜单

将菜单栏添加至页面。

菜单栏至少包含一个菜单,并且可能包含子菜单。对于菜单中的各个菜单项,如果它们包含相关联的子菜单,则当用户将鼠标指针悬停在这些菜单项上/或单击这些菜单项时,将显示对应的子菜单。如果菜单项没有相关联的子菜单,则当用户单击该菜单项时,将执行相应的操作。

顶级菜单可以水平或垂直显示。下级子菜单可以通过将鼠标指针悬停其上或单击来激活。子菜单也可以水平或垂直显示,并可以通过将鼠标指针悬停其上或单击来激活。例如,标准 Windows® 菜单栏将顶级菜单显示为“水平和单击”,而下级子菜单显示为“垂直和鼠标指针悬停其上”。其他样式设置选项支持将子菜单显示为“弹出菜单”(常规情况)或显示为“内联”以生成“树形”菜单。子菜单可以是“粘滞菜单”(一旦选中,则始终显示)或“弹出菜单”(作出选择后消失)。

菜单使用 JSFMenuItem 来填充,在填充菜单之前,菜单自身没有任何内容。不同的菜单项可以进行不同的样式设置,从而提供交替的菜单项样式、分隔符和独特的首菜单项等。各个菜单项都包含一个内联 HTML 标记,该标记可包含其他内联 HTML。例如,菜单项可以是简单文本,也可以是包含多个诸如图像或选取标记等对象的 <a> 标记。

JSFMenu 组件用于显示菜单树。菜单中的各个菜单项可以是可执行的操作,例如,一个可转至其他位置的链接,也可以引向另一菜单。可能可以设置既能执行操作,又能引向另一节点的菜单项,但这种情况不常见。

始终显示菜单树的顶级菜单。当您将鼠标指针悬停在顶级菜单中的菜单项上或单击该菜单项时,将显示相应的子菜单。当您将鼠标指针悬停在子菜单中的菜单项上或单击该菜单项时,将显示第三级菜单。子菜单的最大深度可以达到五个菜单。在最简单的情况下,菜单栏可以包含单个菜单项(例如,向下箭头按钮)与一个相关联的子菜单,从而变成一个下拉菜单。

<div> 标记放置在页面中的适当位置,菜单栏就是使用该标记所连接的 JSFMenu 组件来构建的。顶级菜单在 div 中绘制。

JSFMenu 组件只定义菜单栏的结构,而不定义菜单栏中的任何内容(菜单项)。通过将 JSFMenuItem 子组件添加至 JSFMenu 组件,可以定义结构(菜单项树)。

使用 hX_5.addSubcomponent 调用将 JSFMenuItem 组件添加至菜单栏。每个子组件添加至父组件,父组件可以是 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 菜单项的父菜单。

有若干种菜单项。菜单项可以是:
  1. 简单文本,可运行的内联 HTML,例如链接、HTML 按钮标记,或者是作为属性指定给 JSFMenuItem 构造函数的 HTML 表。
  2. 简单文本,可运行的内联 HTML,例如链接、HTML 按钮标记,或者是在页面上存在并通过 JSFMenuItem 构造函数指定给菜单栏(移入至菜单栏)的 HTML 表。
  3. 分隔符,可以是图形和/或文本。

一般来说,如果菜单项是父菜单,则应该无法单击该菜单项。相反,如果菜单项不是父菜单,则应该可以单击该菜单项。如果在构造菜单项时,您提供了操作/函数,或者如果您提供了一段现成的 HTML,并且该 HTML 自身是可单击的(一个链接),则该菜单项是可单击的。请参阅 JSFMenuItem 文档以了解详细信息,该文档包括有关如何使菜单项成为既是父菜单,又是可单击的菜单项的描述。

菜单栏支持若干个样式设置选项,这些选项控制主菜单和子菜单的显示和管理方式。
  • 垂直/水平方向。主菜单可以是垂直的,也可以是水平的。子菜单可单独定义为垂直的或水平的。Windows 菜单栏是一个对主菜单使用水平方向,而对子菜单使用垂直方向的菜单栏示例。
  • 鼠标/单击操作。当您将鼠标指针悬停于或单击子菜单的父菜单项时,可以显示子菜单。主菜单和子菜单的操作可单独指定,因此,类似于 Windows 菜单栏,您可以让主菜单具有一个单击操作,而让子菜单具有鼠标操作。要执行操作,您必须单击该菜单项。
  • 粘滞性。主菜单始终为粘滞的,即,它始终显示。子菜单可以是粘滞的,也可以不是粘滞的。如果它们不是粘滞的,则其行为类似弹出菜单,并且在用户单击某个执行特定操作的菜单项后,或者如果用户在子菜单外面单击,则将从屏幕上除去子菜单。如果它们是粘滞的,则最后显示的菜单(及其父菜单)将始终留在屏幕上。只有在显示不同的菜单时,才会将其从屏幕上除去。
  • 内联。通常,子菜单作为层显示在底层页面上。作为替代方法,它们通过内联方式显示在菜单栏中,当显示该子菜单时,将在菜单栏中打开一个空间,然后该子菜单以内联方式显示在菜单栏中。例如,通常仅在使用垂直菜单时以内联方式显示站点的导航层次结构。注意,内联垂直菜单的行为与树形控件非常相似,只是内联垂直菜单每次在一个级别只能显示一个子菜单,即,只能显示树的一个分支,不能显示多个分支。

处理选择

可选择菜单栏。当选择菜单项时,将使用所选类来显示该菜单项,以便它在外观上区别于菜单中的其他菜单项。在单击菜单项时会将其选中,而且在单击后,该菜单项会保持可视。通常,只有当菜单项在粘滞菜单(顶级菜单始终为粘滞的)中时,才会发生这种情况。

在突出显示菜单栏中的当前页面方面,选择是一种非常有用的方法。例如,假定菜单栏包含 5 个菜单项(在一个级别),可让您在页面 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 页面左边的导航栏是垂直顶级菜单的一个示例。

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,则子菜单将在菜单栏中父菜单项后面打开,并且子菜单显示在那个位置(就地显示)。这允许菜单为树形。在菜单树的各个级别,只有一个子菜单就地显示。如果您选择显示其他子菜单,则将关闭(隐藏)任何其他就地显示的菜单,然后才显示新的子菜单。
注: 如果菜单是 open-in-place,则它也是粘滞的。另请注意,很少将此属性与水平菜单配合使用,如果菜单是水平的,则生成的显示可能不可用。

relative

如果指定了其中一个值,则根据鼠标指针的位置或根据使用 relative-to 属性指定的标记来定位顶级菜单。如果未指定,则在表示顶级菜单的 div 通常所在的位置放置该顶级菜单。
注: 当用户在容器标记中单击某个位置或在字段中执行键盘操作时,此属性常用于生成所显示的上下文菜单。如果设置了 relative,则菜单的位置将被视为绝对定位。因此,如果设置了 relative,则通常应该将 CSS 属性显示设置为 none 以便在初始时隐藏菜单。可以使用 showMenu 和 hideMenu 调用或通过 JWL 操作来显示/隐藏菜单。

relative-to

如果位置设置为 left-bottom、right-bottom、left-top 或 left-bottom,则使用标记的 ID 来确定位置。

initial-selection

菜单项的 ID 初始显示为“已选中”,它是 CSS 定义的另一可视状态。例如,您可能想要指明菜单栏中的哪个菜单项用于标识在该菜单栏下面显示的当前页面。在这种情况下,将 initial-selection 设置为表示当前页面的菜单项的 ID。
注: 如果菜单不是粘滞的,则与初始选择相关联的顶级菜单项将显示为“已选中”。如果菜单是粘滞的,则指定的菜单项显示为“已选中”,而且会显示父菜单。select-all 属性确定父菜单是否也突出显示为“已选中”。

select-all

如果对某个选项使用该属性,则指定是仅将顶级菜单项显示为“已选中”(false),还是将从包含的父菜单以下到顶级菜单项的所有菜单都显示为“已选中”。

tab-index

并非所有浏览器都允许您将 tab-index 指定给 <bdiv> 标记,它是菜单栏的基本标记。使用此属性来指定菜单栏的 tab-index 以便它在所有浏览器中都起作用。

target

如果提供,则为页面中 input type='text' 字段的 ID。每次在菜单中选择一个菜单项时,该菜单项的文本都会设置为指定字段的值。此属性通常仅适用于生成一个仿真组合框的弹出菜单,即,您有一个输入字段,该字段带有一个顶级菜单为单按钮的邻近菜单,单击该按钮将显示菜单,从此菜单中选择一个菜单项将设置输入字段的值。

onchange

如果提供,则为每次单击叶菜单(执行某个操作)时所调用的函数。在单击菜单项后调用此函数,例如,如果菜单项是链接,则在单击该链接后将调用此函数。函数的特征符通常是 function(thisObj, thisEvt)。thisObj 将始终引用表示菜单栏的 div。所选择(最后单击)的菜单项的 ID 在事件对象中作为 thisEvt.objSelected 出现,或者如果隐藏选择字段在页面上,则也可以从此字段的值中检索到此 ID。

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。并非所有浏览器都支持这些效果,在这种情况下,不会绘制这些效果。
    要使菜单背景透明,即仅使背景透明,而不是使前景中的文本透明,请使用:
    -moz-opacity: .9;
    opacity: .9;

    必须提供这两个属性,一个用于 Mozilla,另一个用于 IE。不透明度的值必须介于 0 与 1 之间。注意 IE 中值的不同之处 - 它是百分比,例如 .9,而不是一般的 90。

    要使菜单显示影子,请使用:
    outline-color: #E4E4E5;
    outline-width: 1px;
    -moz-outlineColor: #E4E4E5;
    -moz-outline-width: 1px;

    另外,必须提供这两个属性集,一个用于 Mozilla,另一个用于 IE。该颜色指定影子中颜色最深的部分的颜色。width 指定阴影的宽度,最小值为 1。阴影将绘制在菜单右边和底部。

    只有在 IE 中才能将过渡效果应用于菜单,例如,它可以滑动到位。过渡效果是通过 IE 滤镜效果指定的。例如:filter:progid:DXImageTransform.Microsoft.Inset(duration=.4);

    如果检测到滤镜,则它将挂起(不播放)直到菜单显示为止。应用滤镜后,菜单的样式才更改为可视并向后播放。

  • 菜单项类适用于菜单中的菜单项。这些类会追加到任何已应用于菜单项的类。在菜单项的状态改变时,类也会随之改变。例如,假定菜单项为:<a class="foo"></a>

    当应用常规类时,标记将读取:<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 属性时或菜单为粘滞时,所选项才会正常显示。如果希望菜单不显示所选项,请将 selection 类设置为具有与常规类一样的属性。

API 调用

表 3. 菜单 API 调用

API 调用

描述

redraw()

重新绘制组件时将对基本标记的特性/属性所作的任何更改考虑在内。

uirelease()

释放与组件相关联的任何活动 UI。

setValue(string)

设置组件的值并确保提供的值有效。

object = getValue(boolean)

检索组件的值。如果该 boolean 为 false,则此函数等价于获取基本标记的值。如果该 boolean 为 true,则此值将作为 JavaScript™ 日期/时间对象返回,而不是作为字符串返回。

object = setAttribute(attribute)

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

string = getAttribute(attribute-name)

检索属性的当前值。

string = getMenuItemById

如果菜单项的 ID 已添加至菜单栏,则返回该菜单项的 ID。

setFocus

将菜单栏中的指定菜单项设置为焦点,必须提供菜单项而不是菜单项 ID。如果设置了 boolean,则鼠标焦点和键盘焦点都将设置到此菜单项。如果未设置 boolean,则仅设置键盘焦点。通常,仅将将顶级菜单中的菜单项或粘滞菜单中的菜单项设置为焦点。

showMenu

显示菜单树。通常仅适用于用作弹出菜单的菜单,在发生某个用户操作(例如 keypress)之前,这些菜单中的菜单栏是隐藏的。事件是与导致菜单被显示的事件(例如 click 或 keydown)相关联的事件对象。如果在菜单显示后应将焦点移到该菜单中的第一个菜单项,则应将 boolean 设置为 true。
注: 如果在行为中使用 JWL SHOW 操作,并对其指定作为目标的菜单,则将使用 showMenu 调用来显示该菜单。

hideMenu ()

隐藏菜单树。通常仅适用于用作“弹出菜单”的菜单,在发生某个用户操作之前,这些菜单中的菜单栏是隐藏的。此调用等价于将顶级菜单的 div 的显示属性设置为“none”。

*addSubComponent

将菜单项对象(通常是新构造的)添加至由 menu_id 标识的菜单。菜单项的 ID 由 menu_id 指定。如果指定了位置,则菜单项将添加到从 0 算起的指定位置,并且所有其他菜单项将下滑一个位置,否则就追加到菜单中。

*removeSubComponent

如果 ID(注意,此 ID 是添加菜单项时指定的菜单项 ID)所标识的菜单项是指定 menu-id 的子代,则将其除去。

注: 使用星号(*)来表示 hx_5 对象上用于对 JSFMenu 对象添加或除去菜单项的 API 调用。注意,通过 hX_5.addComponent 来添加根对象。使用调用来添加/除去根的所有子代,不管是附加的 JSFMenu 对象,还是 JSFMenuItem。

辅助功能

菜单栏可完全通过键盘进行访问。将顶级菜单项添加至页面的 tab-order 中 div 标记所在的位置或使用 tab-order 属性指定的位置。在顶级菜单中,左/右箭头键(垂直菜单为上/下箭头键)的行为类似 Tab 键,不同之处在于,如果您在上一个菜单项上,则它们将回绕到菜单栏的开头/末尾。要打开子菜单,请使用空格键(单击)、下箭头键(水平菜单)或右箭头键(垂直菜单)。在子菜单中,可以使用上/下箭头键(如果是水平菜单,则为左/右箭头键)在菜单项之间移动。在 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 标记菜单栏的显示位置。第二个 div 包含将移入至菜单的标记,此处是 JSF 链接。该菜单由 hX.JSFMenu 调用构造,并作为组件添加至页面。将顶级菜单(菜单栏)定义为 not-fly-open,它是一个单击式菜单,而将所有子菜单定义为 fly-open 样式,当您将鼠标指针悬停在父菜单项上时,这些子菜单会立即打开。对于每个菜单项,将构造一个 hX.JSFMenuItem 组件,并使用 hX.addSubComponent 调用将该组件添加至相应位置,此处指顶级菜单。

诸如 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 调用构造,并作为组件添加至页面。菜单在所有级别都定义为 not-fly-open(作为单击式菜单)并在所有级别都定义为水平。子菜单保持为打开。通过隐藏字段将所选项传递到页面,或从页面传递所选项。当菜单显示时,将在所有级别显示所选项。对于每个菜单项,将构造一个 hX.JSFMenuItem 组件并将其添加至相应位置。此处,将对顶级菜单(主菜单)添加一个分隔符和一个为标签的菜单项。

树形菜单:

<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 调用构造,并作为组件添加至页面。菜单在所有级别都定义为 not-fly-open(作为单击式菜单)并在所有级别都定义为垂直。子菜单是就地打开的,即,它们会在菜单中打开,而不是作为弹出菜单,从而构成树。通过隐藏字段将所选项传递到页面,或从页面传递所选项。当菜单显示时,将仅在顶级显示所选项。对于每个菜单项,将构造一个 hX.JSFMenuItem 组件并将其添加至相应位置。此处是一个使用包含 sub-span 的文本 span(允许对 sub-span 的样式进行单独设置)创建的可单击菜单项,且提供了 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 调用构造,并作为组件添加至页面。菜单在所有级别都定义为 not-fly-open(作为单击式菜单)并在所有级别都定义为垂直。对菜单设置了 onchange 函数,以便当用户单击元素时将调用该函数。所选项作为隐藏字段的值返回。对于每个菜单项,将构造一个 hX.JSFMenuItem 组件并将其添加至相应位置。此处只提供了一个顶级菜单项,其样式设置为按钮。子菜单项指定为表,这些表包含标签旁边的选取标记。当用户单击一个菜单项时,onchange 函数将切换表中选取标记的打开/关闭状态。


反馈