带有动态工具提示的扩展 CollapsiblePanel

分享于 

7分钟阅读

Web开发

  繁體

Screenshot - ExtendedCollapsiblePanel1.jpg

Screenshot - ExtendedCollapsiblePanel2.jpg

介绍

本文基于的文章about他/她的CollapsiblePanel控件。 我第一次看到它时,我只需要在我的一个项目中。 因此,控制本身的所有信用都指向 moditha。 但是我想有更多的。 当我在标题栏上移动鼠标时,我希望有一个浮动工具提示,就像你在图片 上面 中看到的。 同样,只要我在标题栏中,这个工具提示应该是可见的;它应该跟随我的鼠标。 为此,我在网上搜索了JavaScript代码,我在这里找到了需要的代码。 在这个法国网站上,你可以找到一个解释。 所以现在我只需要把这两个。

控件中更改的说明

要了解如何构建控件,可以查看文章 CollapsiblePanel控件。 我的项目需要的是:

  • 它不仅可以在工具提示中显示默认的标题文本,还可以在变量文本中显示。 这与上面例子中所示的标题栏不同。
  • 对于使用工具提示,有一个 tooltip.js 文件,它包含创建它所需的所有功能。 我不想在设计时将这里脚本包含在脚本标记中;需要在运行时生成所需的代码。
  • 它应该是不可能使用它的。

现在开始吧,这些是我创建的新属性:

  • Title
    你可以在这里放置自己的文本,以便在工具提示中显示。 仅在 UsePanelTitleForTooltipfalse 时显示此文本。 也许不正确使用属性 NAME Title,但是JavaScript代码使用这个属性来检索在工具提示中显示的文本。
  • OnMouseOutClientCode
    inside 这个属性,当用户将鼠标移出标题栏区域时,应填写要调用的JavaScript函数。 应该用 tooltip.hide(this) 填充。 这里属性将 OnMouseOut 属性添加到控件中,这是执行 tooltip.hide 所必需的。 因为这是自定义控件,所以你需要自己添加这些属性。 你现在还可以决定是否要添加这样的属性。 在我的情况下我使用了它。 这里属性将仅在 UseDynamicToolTip 设置为 true 时添加。
  • OnMouseOverClientCode
    inside 这里属性,当用户将鼠标移动到标题栏区域时,应填写要调用的JavaScript函数。 应该用 tooltip.show(this) 填充。 这里属性将 OnMouseOver 属性添加到控件中,这是执行 tooltip.show 所必需的。 这里属性将仅在 UseDynamicToolTip 设置为 true 时添加。
  • UsePanelTitleForTooltip
    确定是使用默认标题栏文本还是使用自己的默认标题栏文本时,使用这里属性。 如果这里属性设置为 true,则它将使用 Text 属性的内容显示在工具提示中。 如果它是 false,它将使用 Title 属性的内容。
  • 如果这里属性设置为,它将生成一个 JavaScript,以执行工具提示功能。 它还将创建显示工具提示所需的属性。

便笺

tooltip.show(this)tooltip.hide(this) 这样的JavaScript函数是原始 ToolTip.js 文件的一部分。 应该调用它们来创建工具提示行为。 这都是解释的原因。 你还需要一个样式表( 非强制) 来创建工具提示的样式。 当前,工具提示的样式如下所示:

Screenshot - ExtendedCollapsiblePanel3.png

最后,你需要在页面中添加一个 DIV 标签。 这将用于显示工具提示。

Screenshot - ExtendedCollapsiblePanel4.png

有关使用属性的示例

Screenshot - ExtendedCollapsiblePanel5.gif

你还可以在设计中设置这些属性:

Screenshot - ExtendedCollapsiblePanel6.png

控件中的更改

在该控件中,我添加了这些新属性。 没有什么特殊的,谁可以做。 但是,我还需要做一些其他的更改: 为了生成工具提示 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 stylesif (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 javascriptif (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;
 }
 elsereturn header; 
 //if title is not clickable just pass title in a label element}

目标点

有一些事情可以改变:

  • OnMouseOverOnMouseOut 属性的功能
    现在只用于显示或者隐藏工具提示,只有在属性 UseDynamicToolTip 设置为 true 时才会创建。 但是,如果你需要一些其他功能,鼠标移到标题栏上? 然后你可以在 if (this.UsePanelTitleForTooltip) 构造函数之外替换创建这些属性的代码。
  • 为工具提示 样式表
    这个项目现在已经包含在项目中,但是你还可以在运行时创建样式,或者在控件中创建CSS属性以样式化工具提示。

历史记录

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

tool  ext  COL  动态  Extend  Tooltip  
相关文章