Windows Internet Explorer 的主要用户界面功能之一是工具栏。 它不仅允许用户访问各种功能,还允许用户根据个人偏好自定义布局。
以下屏幕截图显示 Internet Explorer 工具栏,并突出显示一些关键功能。
此工具栏实质上由包含四个带区的 rebar 控件组成:三个工具栏和一个菜单栏。 由于它使用公共控件 API 实现,因此开发人员可以使用任何或全部功能创建工具栏。 本主题讨论 Internet Explorer 工具栏的基本功能以及如何在应用程序中实现这些功能。
Rebar 控件
Internet Explorer 工具栏的基础结构由 rebar 控件提供。 此控件为用户提供自定义工具集合排列的方式。 每个 rebar 包含一个或多个 带区,通常为又长又窄的矩形,包含子窗口(通常是工具栏控件)。
rebar 控件在矩形区域(通常位于窗口顶部)显示其带区。 此矩形细分为一个或多个带区高度的条带。 每个带区可以位于单独的条带上,也可以在同一条带上放置多个带区。
rebar 控件为用户提供两种方法来排列其工具:
- 每个带区的左边缘通常有一个手柄。 当一个条带上的两个或更多带区超过窗口宽度时,使用手柄。 通过将手柄拖动到左侧或右侧,用户可以控制分配给每个带区的空间量。
- 用户可以通过拖放来移动 rebar 的显示矩形内的带区。 然后,rebar 控件更改显示以适应新的带区排列。 如果从条带中删除所有带区,将减小 rebar 的高度,扩大查看区域。
应用程序可以根据需要添加或删除带区。 通常,应用程序允许用户选择要通过“视图”菜单或快捷菜单显示的带区。
如果条带上带区的组合宽度超过窗口宽度,则 rebar 控件将根据需要调整其宽度。 一些工具可能由相邻的带区覆盖。
公共控件版本 5.80 提供一种方法,使用户能够访问另一个带区覆盖的工具。 如果在带区的 REBARBANDINFO 结构的 fStyle 成员中设置 RBBS_USECHEVRON 标志,则会为覆盖的工具栏显示 V 形。 当用户单击 V 形时,将显示一个菜单,允许其使用隐藏的工具。 Microsoft Internet Explorer 6 的以下屏幕截图显示覆盖标准工具栏的一部分时显示的菜单。
由于每个带区都包含一个控件,因此可以通过控件的 API 提供额外的灵活性。 例如,你可以实现工具栏自定义,使用户能够在工具栏上添加、移动或删除按钮。
实现 Rebar 控件
Internet Explorer 工具栏的大多数功能实际上在各个带区中实现。 rebar 控件本身的实现非常简单,在下面列出。
使用 CreateWindowEx 创建 rebar 控件。 将 dwExStyle 设置为 WS_EX_TOOLWINDOW,将 lpClassName 设置为 REBARCLASSNAME。 Internet Explorer 使用以下窗口样式:
- RBS_BANDBORDERS
- RBS_DBLCLKTOGGLE
- RBS_REGISTERDROP
- RBS_VARHEIGHT
- CCS_NODIVIDER
- CCS_NOPARENTALIGN
- WS_BORDER
- WS_CHILD
- WS_CLIPCHILDREN
- WS_CLIPSIBLINGS
- WS_VISIBLE
根据应用程序需要设置其他参数。
使用 CreateWindowEx 或专用控件创建函数(如 CreateToolbarEx)创建控件。
通过填写 REBARBANDINFO 的成员来初始化控件的区带。 将 RBBS_USECHEVRON 样式包含在 fStyle 成员中以启用 V 形。
使用 RB_INSERTBAND 消息将带区添加到 rebar 控件。
对其余带区重复步骤 2-4。
实现 rebar 通知的处理程序。 具体而言,在单击 V 形时,需要处理 RBN_CHEVRONPUSHED 以显示下拉菜单。 有关详细信息,请参阅处理 V 形。
默认情况下,包含手柄。 若要省略带区的手柄,请在带区的 REBARBANDINFO 结构的 fStyle 成员中设置 RBBS_NOGRIPPER 标志。 有关实现 rebar 控件的详细信息,请参阅关于 Rebar 控件。
处理 V 形
当用户单击 V 形时,rebar 控件会向应用程序发送 RBN_CHEVRONPUSHED 通知。 使用通知传递的 NMREBARCHEVRON 结构包含带区的标识符和具有 V 形占用的矩形的 RECT 结构。 处理程序必须确定哪些按钮处于隐藏状态,并在弹出菜单上显示关联的命令。
以下过程概述了如何处理 RBN_CHEVRONPUSHED 通知:
- 通过向 rebar 控件发送 RB_GETRECT 消息,检索所选带区的当前边框。
- 通过向带区的工具栏控件发送 TB_BUTTONCOUNT 消息来检索按钮总数。
- 从最左侧的按钮开始,通过向工具栏控件发送 TB_GETITEMRECT 消息来检索按钮的边框。
- 将带区和按钮矩形传递给 IntersectRect 函数。 此函数将返回对应按钮可见部分的 RECT 结构。
- 将按钮矩形和按钮可见部分的矩形传递给 EqualRect 函数。
- 如果 EqualRect 返回 TRUE,则整个按钮可见。 对工具栏上的下一个按钮重复步骤 3-5。 如果 EqualRect 返回 FALSE,该按钮至少部分隐藏,并且所有剩余的按钮都将完全隐藏。 继续执行下一步。
- 创建一个弹出菜单,其中包含每个隐藏按钮的项。
- 使用 TrackPopupMenu 函数显示弹出菜单。 使用随 RBN_CHEVRONPUSHED 通知一起传递的 V 形矩形定位菜单。 菜单应紧邻 V 形下方,左边缘对齐。
- 处理菜单命令。
工具栏
Internet Explorer 工具栏的大部分复杂性在于构成 rebar 带区的控件的实现。 Internet Explorer 通常显示四个带区:
- 菜单栏
- 标准工具栏
- 链接工具栏
- 地址工具栏
所有这些带区(包括菜单栏)实际上都包含工具栏控件。 本部分讨论标准工具栏和链接工具栏的实现。 菜单栏稍微复杂一些,在如何创建 Internet Explorer 样式菜单栏中单独讨论。
关于工具栏控件中讨论了实现工具栏控件的基本过程。 本部分重点介绍 Internet Explorer 用于提高控件可用性的一些较新的工具栏功能。
下拉按钮
下拉按钮支持多个命令。 当用户单击下拉按钮时,该按钮将显示弹出菜单,而不是启动命令。 用户通过从菜单中选择命令来启动命令。 以下屏幕截图显示了 Internet Explorer 标准工具栏中的下拉按钮和菜单。
通过将样式标志添加到按钮的 TBBUTTON 结构的 fStyle 成员,可以将下拉功能添加到任何按钮样式。 Internet Explorer 使用三种下拉按钮样式:
普通下拉按钮具有 BTNS_DROPDOWN 样式。 它们看起来像普通按钮,但在单击时显示菜单,而不是启动命令。
简单的下拉箭头按钮具有 BTNS_WHOLEDROPDOWN 样式。 按钮图像或文本旁边显示一个箭头。 除了外观差异外,其余均与普通下拉按钮相同。 上图中用作示例的“邮件”按钮是一个下拉箭头按钮。
将 TBSTYLE_EX_DRAWDDARROWS 扩展样式添加到 BTNS_DROPDOWN 的下拉箭头按钮具有与文本或图像分开的箭头。 此按钮样式合并了下拉按钮和标准按钮的功能。 如果用户单击箭头,将显示一个菜单,用户可以从多个命令中进行选择。 如果用户单击相邻按钮,将启动默认命令。 以下屏幕截图显示了 Internet Explorer 后退按钮,该按钮使用单独的箭头。
当用户单击带有普通箭头或简单箭头样式的下拉按钮时,工具栏控件会向应用程序 TBN_DROPDOWN 通知。 当应用程序收到此消息时,它负责创建和显示菜单,以及处理所选命令。
当用户单击单独的箭头时,工具栏控件会向应用程序发送 TBN_DROPDOWN 通知。 应用程序处理它的方式应与处理其他两种类型的下拉按钮的方式相同。 如果用户单击主按钮,应用程序将收到带有按钮命令 ID 的 WM_COMMAND 消息,就像它是标准按钮一样。 应用程序通常通过在下拉菜单中启动顶部命令做出响应,但可以以任何合适的方式随意响应。
列表样式按钮
使用标准按钮时,如果添加文本,则会显示在位图下方。 以下屏幕截图显示具有标准按钮文本的 Internet Explorer 搜索和 收藏夹 按钮。
Microsoft Internet Explorer 5 及更高版本使用 TBSTYLE_LIST 样式。 文本位于位图右侧,减小按钮的高度并放大查看区域。 下图显示具有 TBSTYLE_LIST 样式的 Internet Explorer 6 搜索和收藏夹按钮。
V 形
当用户重新排列 rebar 控件中的带区时,工具栏的一部分可能会被覆盖。 如果带区使用 RBBS_USECHEVRON 样式创建,则 rebar 控件将在工具栏的右边缘显示 V 形。 用户单击 V 形以显示带有隐藏工具的菜单。
热跟踪
启用热跟踪后,光标位于上方时按钮变为热状态。 热按钮通常通过独特的图像与工具栏上的其他按钮区分开来。 默认情况下,工具栏的其余部分上方会显示一个热按钮。 当新按钮变为热按钮时,应用程序会收到 TBN_HOTITEMCHANGE 通知。 下图显示具有热搜索按钮的 Internet Explorer 5 搜索 和 收藏夹按钮。 除了出现凸起的外观外,按钮的灰色位图已替换为彩色位图。
若要启用热跟踪,请使用 TBSTYLE_FLAT 或 TBSTYLE_LIST 样式创建工具栏控件。 这些按钮称为平面工具栏,因为单个按钮通常不会以任何方式突出显示。 位图只是彼此相邻显示。 只有热按钮才具有类似按钮的外观。 这两种样式也是透明的,这意味着图标的背景将是基础客户端窗口的颜色。
若要在按钮为热按钮时显示其他位图,请创建第二个图像列表,其中包含工具栏上所有按钮的热图。 这些图像的大小和顺序应与默认图像列表中的大小和顺序相同。 向工具栏控件发送 TB_SETHOTIMAGELIST 消息以设置热图列表。