65.9K
CodeProject 正在变化。 阅读更多。
Home

Dropline 菜单标签库

Prasad Khandekar
starIconstarIconstarIconstarIconstarIcon

5.00/5 (10投票s)

2013年3月3日

LGPL3

5分钟阅读

viewsIcon

37966

downloadIcon

1581

适用于 JSP 的下拉菜单栏控件标签库。

引言

本文介绍了一个用于下拉式弹出菜单的 JSP 标签库。此菜单目前仅支持两级，但通过添加新的 CSS 规则，它可以支持多级。此控件的 HTML 标记深受在 Stu Nicholl's CSS Play 和 Dynamic Drive 网站上找到的示例的影响。我重写了 CSS 并添加了基于 jQuery 的鼠标悬停效果。如 Stu Nicholl 的网站所示，这甚至可以通过纯 CSS 实现，但该解决方案需要稳定操作，否则菜单一旦鼠标移出菜单项就会消失。这是使用 jQuery 的主要原因。

Using the Code

使用此标签库就像声明标签库并使用标签本身一样简单，如下面的代码片段所示。请记住，此标签的 jar 文件必须位于应用程序的 "WEB-INF/lib" 文件夹中。

<%@ taglib uri="http://bizsutra.blogspot.com/jsp/tags/ui" prefix="uitags" %>
<uitags:dlmenubar menuData="${sessionScope.MENUDATA}" id="sitemenu"  cssOnly="false"/>

标签属性

下表总结了下拉菜单标签库的各种属性。

Attribute 描述
onMenuClicked

当用户单击菜单项时调用的客户端 JavaScript 函数的名称。这是一个可选属性。如果未指定，则控件假定 HTML 页面或链接到该页面的 JavaScript 文件中存在一个名为 onMenuItemClicked 的全局函数。该函数接收以下参数

  • 目标 URL。
  • 菜单项 ID。
  • 菜单 ID。
onModuleClicked

当用户单击顶层菜单栏项时调用的客户端 JavaScript 函数的名称。这是一个可选属性。如果未指定，则控件假定 HTML 页面或链接到该页面的 JavaScript 文件中存在一个名为 onModuleClicked 的全局函数。该函数接收以下参数

  • Group ID
  • 菜单 ID
itemLabelPrefix 用作检索菜单项描述的本地化版本的键的前缀的文本。实际键通过将此文本与菜单项的序号（用点分隔）进行前缀来形成。默认值为 menuitem.label。
groupLabelPrefix 用作检索顶层菜单栏项描述的本地化版本的键的前缀的文本。实际键通过将此文本与菜单栏项的序号（用点分隔）进行前缀来形成。默认值为 menugrp.label。
menuData* 用于菜单渲染的实际数据。预期数据类型为 JSONObject。
cssOnly 一个布尔标志，当设置为 true 时，将渲染纯 CSS 驱动的下拉菜单。默认值为 true。
id* 此实例的唯一标识符。此属性可确保多个菜单控件不会相互干扰。

菜单数据结构

菜单使用 JSON 数据结构作为其输入。menudata 本身是一个 JSONObject，其中包含一个名为 menu 的属性，其值为 JSONArray 数据类型。菜单数据不包含顶层菜单栏项的条目。相反，顶层菜单栏是使用 group_id 属性的“distinct”值派生的。此方案通常适用于多模块业务应用程序，其中每个模块都有一组菜单和子菜单。

{
    "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 数据结构中的各种属性

Attribute 描述
description 此属性表示单击菜单项时要导航到的 URL。对于组，值为 Empty。
group_id 顾名思义，此属性代表组 ID 或模块 ID。此属性的不同值用于渲染顶层菜单栏。
isGroup 一个布尔属性，指示当前条目是否代表菜单组或单个菜单项。
名称 此菜单项的默认描述。如果菜单控件找不到本地化表示，则会使用此描述。
serial 标识此菜单条目的唯一序号。

ID 命名约定

顶层菜单栏项的 id 通过将 group_id 属性的值与文本 mbar_ 进行前缀来构造。菜单项的 ID 通过将 serial 属性的值与 group_id 属性连接起来，后跟下划线 _，以及所有父项的 serial 属性的值（用下划线“_”分隔）来构造。

主题支持

主题完全通过 CSS 完成。总共有四个 CSS 文件，总结如下。

  • cssdlm.css - CSSOnly 菜单实现的基础 CSS。
  • cssdlm-skin.css - CSSOnly 菜单主题的 CSS。
  • jsdlm.css - 基于 jQuery 的菜单实现的基础 CSS。
  • jsdlm-skin.css - 基于 jQuery 的菜单主题的 CSS。

本地化

标签库支持区域设置，可以以本地化语言渲染菜单。本地化是通过资源束实现的。资源束是一个 Java 属性文件，包含键值对，其中键通过将 itemLabelprefix 或 groupLabelPrefix 与点“.”结合来形成，然后是菜单序号。值代表要显示的本地化文本。

(itemLabelPrefix | groupLabelPrefix).serial

依赖项

此标签库使用了以下第三方库

库名称 版本 类型
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* 1.9.1 运行时 (客户端)
servlet-api-2.4.jar* 2.4 编译 (服务器)

限制

目前，该标签在非 Spring 项目中不起作用。这是由于使用了用于本地化的类。

历史

  1. 2013 年 2 月 28 日 - 版本 1.0 发布。
© . All rights reserved.