带动态工具提示的扩展可折叠面板

• 下载演示项目 - 26.6 KB
• 下载源文件 - 10.0 KB

引言

本文基于 moditha 关于其 CollapsiblePanel 控件 的文章[^]。我第一次看到它时，就觉得它正是我一个项目所需要的。所以，控件本身的所有功劳都归功于 moditha。但是，我想要更多。我想要在鼠标悬停在标题栏上时出现一个浮动的工具提示，就像您在上面的图片中看到的。而且，只要我的鼠标在标题栏上，这个工具提示就应该可见；它应该跟随我的鼠标。为了实现这种行为，我在网上搜索了 JavaScript 代码，并找到了我需要的代码 在这里。在这个法国网站上，您可以找到相关的解释。所以，现在我只需要将这两者结合起来。

控件变更描述

要了解控件是如何构建的，您可以回顾文章 CollapsiblePanel 控件。我为我的项目想要的功能是：

• 不仅应该能够显示工具提示中的默认标题文本，还应该能够显示可变文本。这与上面示例中显示的标题栏不同。
• 为了使用工具提示，有一个包含创建工具提示所需的所有功能的 tooltip.js 文件。我不想在设计时将此脚本包含在 script 标签中；所需代码应该在运行时生成。
• 应该可以选择不使用它。

那么，让我们开始吧。这些是我创建的新属性：

• 标题
  您可以在此处输入您自己的文本以显示在工具提示中。仅当 UsePanelTitleForTooltip 为 false 时，此文本才会显示。也许属性名 Title 被误用了，但 JavaScript 代码使用它来检索该属性的文本以在工具提示中显示，而我不想更改 JavaScript 代码。
• OnMouseOutClientCode
  在此属性中，您应该填写当用户将鼠标移出标题栏区域时要调用的 JavaScript 函数。它应该填写 tooltip.hide(this)。此属性向控件添加 OnMouseOut 属性，这对于执行 tooltip.hide 是必需的。因为这是一个自定义控件，所以您需要自己添加这些类型的属性。您现在还可以决定是否要添加这样的属性。在我的例子中，我使用了它。仅当 UseDynamicToolTip 设置为 true 时，才会添加此属性。
• OnMouseOverClientCode
  在此属性中，您应该填写当用户将鼠标移到标题栏区域时要调用的 JavaScript 函数。它应该填写 tooltip.show(this)。此属性向控件添加 OnMouseOver 属性，这对于执行 tooltip.show 是必需的。仅当 UseDynamicToolTip 设置为 true 时，才会添加此属性。
• UsePanelTitleForTooltip
  当决定是使用默认标题栏文本还是自定义文本时，会使用此属性。如果此属性设置为 true，它将使用 Text 属性的内容显示在工具提示中。如果为 false，它将使用 Title 属性的内容。
• UseDynamicToolTip如果此属性设置为 true，它将生成 JavaScript 来执行工具提示功能。它还将创建显示工具提示所需的属性。

注意

像 tooltip.show(this) 和 tooltip.hide(this) 这样的 JavaScript 函数是原始 ToolTip.js 文件的一部分。它们应该被调用以创建工具提示行为。所有这些都在 这里 进行了解释。您还需要一个样式表（可选）来为工具提示创建样式。目前，工具提示的样式如下：

最后但同样重要的是，您需要将一个 DIV 标签添加到您的页面。这将用于显示工具提示。

属性使用示例

您也可以在设计视图中设置这些属性

控件的变更

在控件中，我添加了这些新属性。没什么特别的，任何人都可以做到。但是，我必须做一些其他更改：为了生成工具提示 JavaScript，我添加了一个新的 Const。您可以查看此脚本的代码。在 OnPreRender 重写方法中，我添加了以下内容：

if (!Page.IsClientScriptBlockRegistered("ToolTipBlock") && 
    (this.UseDynamicToolTip))
{
    Page.RegisterClientScriptBlock("ToolTipBlock", 
        C_TOOL_TIP_SCRIPT + C_TOOL_TIP_SCRIPT_PART_2);
} 

CreateTitle 方法现在看起来是这样的：

private Control CreateTitle()
{
    Label header = new Label();

    header.Text= this.Text;
    header.Width = Unit.Percentage(100);

    //If there is a CSS defined, it will be used

    //instead of the inline styles

    if (this.TitleCSS != string.Empty)
        header.CssClass = this.TitleCSS;
    else
    {
        header.ForeColor=this.TitleForeColor;
        header.BackColor = this.TitleBackColor;                
    }


    //if title is clickable, wrap it around a href with

    //an onClick even to call the javascript

    if (this.TitleClickable)
    {
        HtmlAnchor ha = new HtmlAnchor();
        ha.HRef=C_EMPTY_LINK;
        ha.Controls.Add(header);

        //Only allow expanding/collapsing if control is enabled

        ha.Attributes.Add("onClick",GetOnClickScript());
        
        if (this.UseDynamicToolTip)
        {
            if (this.UsePanelTitleForTooltip)
            {
                if (this.Text != null)
                {
                    ha.Attributes.Add("title",this.Text);
                }
            }
            else
            {
                if (this.Title != null)
                {
                    ha.Attributes.Add("title",this.Title);
                }
            }

            if (this.OnMouseOverClientCode != null)
            {
                ha.Attributes.Add("onMouseOver",GetOnMouseOverClientCode());
            }
            if (this.OnMouseOutClientCode != null)
            {
                ha.Attributes.Add("onMouseOut",GetOnMouseOutClientCode());
            }
        }
        return ha;
    }
    else
        return header; 
        //if title is not clickable just pass title in a label element

}

看点

有些地方可以改进

• OnMouseOver 和 OnMouseOut 属性的函数
  现在它们仅用于显示或隐藏工具提示，而工具提示仅在属性 UseDynamicToolTip 设置为 true 时创建。但是，如果您需要在鼠标移到标题栏时执行其他功能怎么办？那么您可以在 if (this.UsePanelTitleForTooltip) 构造函数之外替换创建这些属性的代码。
• 工具提示的样式表
  现在它已包含在项目中的某个位置，但您也可以在运行时创建样式，或者在控件中创建一个 CSS 属性来设置工具提示的样式。

历史

• 2007年10月26日 -- 发布原始版本