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

高度兼容的 DHTML 菜单 ASP.NET 用户控件

scubaduba
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.55/5 (39投票s)

2005年2月21日

8分钟阅读

viewsIcon

406972

downloadIcon

14150

一个用于 DHTML 下拉菜单的 ASP.NET 用户控件，具有高度兼容性和自定义功能。

Sample Image of very compatible DHTML menu

Sample Image of very compatible DHTML menu

引言

DHTML 菜单是如今许多 Web 开发人员使用的工具，因为它们为用户提供了友好且分层的界面。在我正在进行的一个项目中，我需要一个这样的菜单，并在网上搜索 ASP.NET 控件。有一些不错的菜单控件示例，但没有一个能提供我真正想要的（跨浏览器、VB.NET、代码可用、免费且有漂亮的样式选项）。然后我发现了 Sylvain Machefert 的作品（法语）。他是一位在 CSS、JavaScript 和跨浏览器问题方面知识渊博的 Web 开发人员，他制作了一个高度兼容的 DHTML 菜单并公开发布。该菜单甚至可以在基于文本的浏览器上运行，考虑了视障人士的阅读技术，并且在打印页面时菜单是不可见的。此外，它还可以进行多种自定义，并支持图标图像。兼容的浏览器列表

  • Internet Explorer 5/5.5/6 Windows 98/2000/XP;
  • JAWS 语音合成在 IE6 Windows XP;
  • MyIE2;
  • Netscape 7 Windows;
  • Netscape 6.2;
  • Mozilla 1.4+ Windows 2000/XP;
  • FireFox 0.9+;
  • Opera 7 Windows 和 Linux;
  • Lynx (文本浏览器)
  • Encompass 0.5 和 Dillo 0.8 (非 CSS 浏览器) Linux (Debian);
  • Epiphany 1.2 Linux (Debian);
  • Galéon 1.2;
  • Konqueror Linux (Knoppix);
  • Mozilla Linux (Knoppix);
  • Internet Explorer 5 Mac;
  • Safari 1.0 MacOS X 10.2.8;
  • Safari 1.1 MacOS X 10.3;
  • Camino MacOS X;
  • Firebird MacOS X;
  • OmniWeb MacOS X;
  • Mozilla 1.6 Mac;
  • NeoPlanet 5.1;

由于 Sylvain 在 .NET 编程方面知识不足（至少在撰写本文时是这样），他无法发布 ASP.NET 自定义控件。此前有一个关于 Sylvain 菜单的用户控件示例，由 Sokhar（一家 Web 开发公司）的开发者制作。然而，那个示例存在一些问题，与我的项目不太兼容。

  • 他们使用了 Sylvain 旧版本的代码，兼容性较差。
  • 他们的代码是 C# 编写的，我的项目是 VB.NET，因为我需要一些修改，所以不兼容。
  • 我认为除了多浏览器兼容性问题之外，还可以进行一些改进，例如为主菜单标题添加链接，稍微改进 HTML 输出，以及通过控件的属性来更改项目中每个页面的菜单外观。
  • Access 数据库的想法很棒，但我需要将其实现到我的 SQL 项目中。

对某些人来说，唯一的缺点可能是菜单只支持单级分支。对我来说这不成问题，因为我认为超过两级就已经会弄乱页面的外观（我也读过关于这方面的一篇文章）。

我首先感谢 Sylvain 的出色工作，然后感谢 Sokhar 的贡献；他们对我的代码产生了重要影响。

背景

这是 DHTML 菜单用户控件的第一次更新。在此版本中，我实现了一些在初次发布后就计划进行的改进。

那么，我制作的用户控件能做什么呢？它从 aspx 页面上的菜单控件的标签定义中定义的控件属性“CSSFile”以及其他调整菜单外观的属性来读取要使用的 CSS 文件。它从 Access 文件加载菜单数据，并生成一个漂亮的 HTML 输出，该输出将被放置在 aspx 页面的输出中。我使用 Access 存储过程来检索一些数据。我在处理 SQL 时使用存储过程，据我所知，存储过程是处理数据比使用字符串作为命令参数更好的方法。对于不了解存储过程的人来说，我的代码可以是一个很好的工作示例。对我来说，这也是一项有教育意义的任务，因为 Access（Microsoft Jet Engine，Access 使用的 SQL 实现）的存储过程定义与 SQL Server 的略有不同。我在这次工作中了解到了这一点。我的示例项目已准备好用于垂直菜单，垂直居中并带有渐变填充的菜单背景。菜单文件夹中还包含第一个版本中的 CSS 文件，所以如果你愿意，通过更改属性（尤其是CSSFile属性），你可以为示例项目获得不同的外观。我翻译了 JavaScript 文件的注释，以便你在改进我的代码或更改菜单属性时能够更轻松。代码注释丰富，我相信你不会错过太多东西。如果你不明白什么，请随时提问。

使用代码

因为我也发送了 .vb 代码页，所以你可以改进这个控件。实现起来其实很简单。首先，在你的项目中创建一个“databases”文件夹（在 Visual Studio 解决方案资源管理器窗口中右键单击项目名称，而不是解决方案名称，解决方案名称是顶部的那个；添加 >> 新建文件夹，将其重命名为“databases”），然后右键单击 Visual Studio 解决方案资源管理器窗口中的“databases”文件夹，添加 >> 添加现有项。在文件选择窗口中选择你的 Access 数据库文件“cssmenudb.mdb”（或编辑我发送的那个并选择它）。请注意选择窗口中的“文件类型”，它必须是“所有文件”，否则你将看不到数据库文件。现在在你的项目文件夹中创建一个名为“menu”的文件夹（同样通过在解决方案资源管理器中右键单击项目名称）。使用右键单击添加 >> 添加现有项方法到“menu”文件夹添加我的项目中的 menu.ascx 和 menu.ascx.vb 文件（你可以在该窗口中选择多个文件）。你还需要在该文件夹中添加 JavaScript CSS 和图标图像。然后，菜单用户控件必须在你想要实现它的页面中注册，通过在 aspx 页面的 HTML 视图中，紧跟在 Page 指令的后面添加以下行：

<%@ Register TagPrefix="userCtrl" TagName="CSSMenu" Src="menu/menu.ascx" %>

现在，你可以在 HTML 视图中添加你的菜单的标签，如下所示：

<userCtrl:CSSMenu id="Menu1" runat="server" HRImage="lookxphr.gif" 
      FollowScroll="false" CenterMenu="true" DefaultHeight="25" DefaultWidth="95" 
      Vertical="true" DiffWidth="true" CSSFile="vertical.css">
</userCtrl:CSSMenu>

我建议你将其放在 Visual Studio 在每个 aspx 页面中自动创建的 form 标签的上方。就是这样。你就可以开始使用了。

让我们检查一下菜单控件的属性

  • HRImage

    如果子菜单项的图像文件名与此属性的值相同，则该菜单项被视为水平标尺（分隔符）。图像被加载为分隔符并水平平铺。该菜单项不再打印任何内容。接受文件名作为水平标尺图像的字符串。

  • FollowScroll

    这个布尔值“True”或“False”描述了当页面滚动（如果页面比标准窗口区域大）时，菜单是保持在原地不动，还是跟随滚动始终可见。

  • CenterMenu

    布尔值，其名称说明了一切。如果菜单处于垂直模式（由Vertical属性定义）并且此属性值为“True”，则菜单垂直居中；如果菜单处于水平模式，则水平居中。

  • 垂直

    另一个布尔值。“True”表示垂直菜单，“False”表示水平菜单。

  • DefaultHeight

    主菜单项默认高度（以像素为单位）的整数。

  • DefaultWidth

    主菜单项默认宽度（以像素为单位）的整数。

  • DiffWidth

    这个名称不应让你混淆。这个布尔值属性定义了主菜单项的宽度是否根据其标题中的字母数量而不同（如果它们是水平模式），或者主菜单项的高度是否不同（如果它们是垂直模式）。

  • CSSFile

    这个字符串值属性保存 CSS 文件的名称。

关注点

这是 Access 数据库中使用的两个存储过程之一。正如你所见（如果你熟悉这个概念），语法与 SQL 的略有不同。

PROCEDURE sp_mainMenuURL
PARAMETERS mainMenuTitleArg Text ( 255 );
SELECT  tblMainMenu.mainURL
FROM tblMainMenu
WHERE  tblMainMenu.mainMenuTitle = mainMenuTitleArg;

mainMenuTitleArg 是此过程接受的参数，用于查找我们要从数据库中获取哪个主菜单项的 URL。一旦在 Access 数据库（在“查询”部分）中创建了该过程，它会自动删除带有 PROCEDURE 语句的第一行。

对于不熟悉 SQL 过程的各位，上面这个存储过程的 TSQL（Microsoft SQL Server 2000 的 SQL 实现）版本如下：

PROCEDURE sp_mainMenuURL
CREATE PROCEDURE sp_mainMenuURL
@mainMenuTitleArg NvarChar (255)
AS
SELECT mainURL
FROM tblMainMenu
WHERE mainMenuTitle=@mainMenuTitleArg;
GO

下一步该做什么？

我在这次版本更新中进行了许多改进，这是我在 1.0 版本发布后一直想做的。现在我认为是时候让用户能够在他们的项目中拥有多个菜单了。考虑这样一种情况：某些用户（例如客户）应该获得不同的主菜单和子菜单项，而其他用户（例如员工）则获得其他项。当然，在这种情况下，安全性以及更多数据库表就会被考虑在内。

历史

  • 版本 1.4
    • Bug 修复：页面刷新不再使 JavaScript 和样式表失效，这在以前的某些情况下会发生。
    • 所有需要用 HTML 编写的内容都保存在一个 ASP 字符串中。
    • 添加了一个构造函数，其中包含属性的默认值，以防用户忘记在标签中定义它们。
    • 添加了七个新属性，以便更轻松地自定义菜单。无需修改 JavaScript 文件。
  • 版本 1.0
    • 首次发布。
© . All rights reserved.