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

动态工具提示

drgbg
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.31/5 (3投票s)

2007年9月10日

CPOL

5分钟阅读

viewsIcon

50544

从客户端动态切换工具提示消息。

如何从客户端动态控制工具提示的显示？

您是否曾经想过一次性控制网页上所有控件的工具提示是否显示，而无需往返服务器？我遇到了实现这一目标的需求，并且惊讶于将我认为是一个简单任务的操作，变成一个符合预期的功能是多么困难。我不想在代码隐藏文件中编写一些笨拙的例程来处理这个问题，因为那样我必须在代码隐藏层“硬编码”对表示层项的引用。更不用说仅仅为了处理每次工具提示显示状态更改的例程而需要重新发布整个页面了。我甚至不想考虑将来添加/删除或重命名页面上的控件时会发生什么（不要说这不会发生在您身上，因为这正是最有可能发生的时候！）。

由于没有“全局”标志可以设置来打开或关闭工具提示，我需要一种从客户端（浏览器）快速优雅地处理此问题的方法。我搜索了 Google 和各种 ASP.NET 网站，但没有找到任何可以解决我当时遇到的特定问题的方法。以下是我经过大量实验和研究的最终结果。我整理了本文档，希望能帮助下一位遇到相同问题的开发者，希望为他们节省大量麻烦和压力。此外，我肯定也受益于其他开发者乐于分享代码帮助我的善意。现在，轮到我回报他人了。

因此，我们需要做的第一件事是使用一个 CheckBox 控件来允许我们控制是否显示工具提示。

<asp:CheckBox ID="cbToolTipMode" runat="server" 
    AutoPostBack="false" Text=" Show Help ToolTips " Checked="false" />

您将在页面上希望显示它的任何位置添加此控件。请注意 ID 标签值（cbToolTipMode），因为我们稍后会引用它。接下来，我们需要一个客户端方法来根据我们 CheckBox 的状态处理设置工具提示值。这将通过放在页面标题部分的一个 JavaScript 函数来实现。

<head runat="server">
    <script language="javascript">
        function SetToolTip(Ctrl, TipText)
        {
            if (document.getElementById("cbToolTipMode").checked == true) 
            //Change the control name in this line to match your 

            //CheckBox control name
            {
                if (Ctrl.title == '')
                    Ctrl.title=TipText;
            }
            else
            {
                if (Ctrl.title != '')
                    Ctrl.title='';
            }
        }
    </script>
</head>

请注意，在我们的 JavaScript 函数的开头，我们正在检查 CheckBox 控件的选中状态，以控制我们是添加还是删除工具提示文本。现在我们有了根据 CheckBox 选中状态设置工具提示文本的 JavaScript 方法，我们需要一种方法来告诉页面为页面上的每个控件执行 JavaScript。我们希望在鼠标进入控件边界的任何时候都调用此方法。因此，我们将为我们想要动态控制工具提示显示状态的每个控件添加一个属性，通过在鼠标进入控件边界时调用此方法。

<asp:CheckBox ID="cbToolTipMode" runat="server" 
    OnMouseEnter="JavaScript:SetToolTip(this, 'ToolTip Message goes here')"
    AutoPostBack="false" Text=" Show Help ToolTips " Checked="false" />

请注意，我们在 CheckBox 控件的属性中添加了一个“OnMouseEnter”事件处理程序。JavaScript 知道这个事件处理程序，但您使用的 HTML 编辑器可能不认识它

OnMouseEnter="JavaScript:SetToolTip(this, 'ToolTip Message goes here')"

这就是告诉页面在鼠标进入 CheckBox 所在区域时调用我们的 JavaScript 方法。这个练习部分相对容易实现；当我在 DataGrid 上的控件上使用此相同技术时，情况变得更加棘手。当您想从服务器端数据源获取工具提示文本时，相同的技术在 DataGrid 上是有效的。这就是问题所在，我尝试的任何方法都会生成“格式错误的标签”错误或在运行时崩溃。我尝试了各种场景来构建包含服务器端标签的事件处理程序字符串，但都无效。最终，这是有效的

OnMouseEnter='<%# String.Format("JavaScript:SetToolTip(this,{0}{1}{2});", 
    ControlChars.Quote, Container.DataItem("Value"), ControlChars.Quote) %>'

您所看到的关键在于 Microsoft.VisualBasic 命名空间中的 'ControlChars.Quote'，它与 String.Format 方法结合使用。这种方法允许我使用绑定 DataItem 列中包含的值作为 JavaScript 函数的输入。我不知道 C#，但我会假设有一个类似 String.Format 的方法。在我以前写 C 代码的时候，那会是 sprintf 函数。无论 C# 中是什么，只需将 String.Format 方法替换为其 C# 等效项，您应该就能很好地工作了！我希望本文能让您更容易从页面级别动态控制工具提示显示模式。

尽情享用！

背景：代码背后的故事

在设计一个通用办公软件工具时，出现了切换工具提示的显示/隐藏的需求。一些用户觉得工具提示信息很烦人（尤其是因为应用程序的 GUI 非常直观）。不幸的是，也有一些用户连插入电源都会遇到困难，工具提示信息就是为了帮助他们而添加的。该工具的常规使用向我个人证明了，迫切需要一种方法，通过简单的 CheckBox 控件来关闭工具提示信息。当我查看实现此功能的各种方法时，它们充其量也显得很笨拙，所以我开始寻找一种优雅的方法来实现它。您现在正在阅读我提出的解决方案，该方案解决了这个概念简单但实现极其困难的功能。

Using the Code

要使用此代码在您的网页上实现动态客户端工具提示消息，只需按照以下步骤操作：

  1. 将您的 CheckBox 控件添加到页面。
  2. 将 OnMouseEnter 事件处理程序添加到您希望控制的所有页面控件（不要忘记为每个控件设置工具提示消息！）。
  3. 在 JavaScript 的“SetToolTip”方法中，更改 CheckBox 控件的名称以匹配您为控件指定的名称。

关注点

在 ASP.NET 中解决问题的方式多种多样，这仍然让我印象深刻。我尝试了几种不同的方法来实现这个想法，但其中一种是“万能药”。就在我以为我尝试了所有方法的时候，这个想法在我处理另一个问题时冒了出来。难道不是一直都这样吗？

© . All rights reserved.