在Web开发中，下拉菜单是一种常见的用户界面元素，它允许用户通过点击一个按钮或链接来展开一个菜单列表。本文将介绍如何使用JSP标签库来实现一个支持多级菜单的下拉菜单。
这个下拉菜单目前只支持两级，但通过添加新的CSS规则，它可以支持更多的级别。HTML标记受到Stu Nicholl的CSS Play和Dynamic Drive网站上的示例的影响。作者重写了CSS，并添加了基于jQuery的鼠标悬停效果。
使用这个标签库非常简单，只需声明标签库并使用标签本身，如下所示的代码片段。请记住，这个标签的jar文件必须存在于应用程序的"WEB-INF/lib"文件夹中。
<%@ taglib uri="http://bizsutra.blogspot.com/jsp/tags/ui" prefix="uitags" %>
<uitags:dlmenubar menuData="${sessionScope.MENUDATA}" id="sitemenu" cssOnly="false" />
下表总结了Drop Line Menu标签库的各种属性。
| 属性 | 描述 |
|---|---|
| onMenuClicked | 用户点击菜单项时调用的客户端JavaScript函数的名称。这是一个可选属性。如果没有指定，则控件假定HTML页面或链接到页面的JavaScript文件中存在一个名为onMenuItemClicked的全局函数。该函数接收以下参数：目标URL、菜单项ID和菜单ID。 |
| onModuleClicked | 用户点击顶级菜单栏项时调用的客户端JavaScript函数的名称。这是一个可选属性。如果没有指定，则控件假定HTML页面或链接到页面的JavaScript文件中存在一个名为onModuleClicked的全局函数。该函数接收以下参数：组ID和菜单ID。 |
| itemLabelPrefix | 用于检索菜单项描述的本地化版本的键的前缀文本。实际的键是通过将此文本前缀到菜单项的序列号上，用点分隔形成的。默认值为"menuitem.label"。 |
| groupLabelPrefix | 用于检索顶级菜单栏项描述的本地化版本的键的前缀文本。实际的键是通过将此文本前缀到菜单栏项的序列号上，用点分隔形成的。默认值为"menugrp.label"。 |
| menuData* | 用于菜单渲染的实际数据。预期的数据类型是JSONObject。 |
| cssOnly | 一个布尔标志，当设置为true时，渲染一个纯CSS驱动的下拉菜单。默认值为true。 |
| id* | 这个实例的唯一标识符。这个属性确保多个菜单控件不会相互干扰。 |
菜单使用JSON数据结构作为输入。menuData本身是一个JSONObject，它有一个名为menu的属性，其值是JSONArray数据类型。菜单数据不包含顶级菜单栏项的条目。相反，顶级菜单栏是通过使用group_id属性的不同值派生的。这种方案通常适用于多模块业务应用程序，每个模块都有一组菜单和子菜单。
{
"menu" : [
{
"description" : "viewall.frm",
"group_id" : "Mobile",
"isGroup" : false,
"name" : "View All",
"serial" : 1,
},
{
"description" : "",
"group_id" : "Mobile",
"isGroup" : true,
"name" : "Mobile Phones",
"serial" : 2,
"submenus" : [
{
"description" : "loanCenter.form",
"group_id" : "Mobile",
"isGroup" : false,
"name" : "Android Phones",
"serial" : 3,
},
...
]
},
...
]
}
下表总结了JSON数据结构中的各种属性。
| 属性 | 描述 |
|---|---|
| description | 当点击菜单项时，此属性表示要导航到的URL。对于组，值为Empty。 |
| group_id | 顾名思义，此属性表示组ID或模块ID。此属性的不同值用于渲染顶级菜单栏。 |
| isGroup | 一个布尔属性，表示当前条目是否代表一组菜单或单个菜单项。 |
| name | 此菜单项的默认描述。如果找不到本地化的表示，菜单控件将使用此描述。 |
| serial | 标识此菜单条目的唯一序列号。 |
顶级菜单栏项的ID是通过将group_id属性的值与文本"mbar_"前缀来构建的。菜单项的ID是通过将group_id属性的值与所有父级的serial属性值用下划线"_"分隔，然后前缀为"_"来构建的。
主题完全使用CSS完成。总共有四个CSS文件，如下所述。
标签库是本地化感知的，并且可以以本地化的语言渲染菜单。本地化是通过资源包实现的。资源包是一个Java属性文件，包含键值对，其中键是通过将itemLabelPrefix或groupLabelPrefix前缀，后跟一个点"."和菜单序列号形成的。值表示要显示的本地化文本。
这个标签库使用了以下第三方库：
| 库名称 | 版本 | 类型 |
|---|---|---|
| json-lib-2.2.3-jdk15.jar | 2.2.3 | 运行时（服务器） |
| slf4j-api-1.6.4.jar | 1.6.4 | 运行时（服务器） |
| spring-context-2.5.6.jar | 2.5.6 | 运行时（服务器） |
| spring-core-2.5.6.jar | 2.5.6 | 运行时（服务器） |
| spring-web-2.5.6.jar | 2.5.6 | 运行时（服务器） |
| jquery-1.7.1.min.js | * | 运行时（客户端） |
| servlet-api-2.4.jar | * | 编译（服务器） |