带有工具提示控件实现的文本框

分享于 

6分钟阅读

Web开发

  繁體

介绍

几乎任何网络应用都应该引导用户并帮助他/她达到主要目标。 它应该提供建议,下一步可能的步骤等等。 换句话说,它应该提供需求帮助。 例如用户不知道"重要"字段意味着什么。 你可以通过显示工具提示帮助用户。 本文介绍了如何创建与文本框集成的工具提示控件。

这是想法。我们有一个有几个字段的表单:

我们想在用户输入内容时显示一个工具提示。

这意味着工具提示在 onfocus 事件中应该是可见的。 这里外,我们希望对当前字段进行 Highlight。 这只是一个小的用户界面改进,帮助用户感觉到当前状态并从中断中恢复更快。

我们来考虑如何实现这种控制。 我们需要的是一个附加层,它在 onfocus 中可见并隐藏在 onblur 中。 这不是问题;我们可以轻松地用JavaScript显示/隐藏一个层。 问题在位置上。 如何在输入字段之后显示工具提示层? 一种可能的方法是定义输入字段的x 坐标,并将这些坐标设置为工具提示层。

function findPosX(obj)
{
 var curleft = 0;
 if (obj.offsetParent)
 {
 while (obj.offsetParent)
 {
 curleft += obj.offsetLeft
 obj = obj.offsetParent;
 }
 }
 elseif (obj.x)
 curleft += obj.x;
 return curleft;
}

因此,要实现所需的功能,需要执行以下步骤:

  • TextBox 控件继承
  • 添加将存储工具提示文本的ToolTipText 字段
  • 在默认情况下创建工具提示层并在默认情况下隐藏它( 在 Render 方法中)
  • onfocus 中定义x,y 坐标和显示工具提示层

从控制用户的角度来看,我们需要最简单的解决方案: 只需将控件放在页面上并指定工具提示文本。 完成。

<tp:TpTextBoxMaxLength="255"ToolTipText="Put any text you want here..."ID="TpTextBox2"CssClass="input"Width="300"runat="server"Text=''></tp:TpTextBox>

这是一个循序渐进的解决方案。

实现

在TextBox控件,中,添加 ToolTipText ToolTipText,添加将存储工具提示文本的ToolTipText ToolTipText

publicclass TpTextBox : TextBox
{
 privatestring toolTipText = null;
 publicstring ToolTipText
 {
 get { return toolTipText; }
 set { toolTipText = value; }
 }

步骤 3。创建工具提示层并在默认情况下隐藏它( 在渲染方法中)

最有趣的事情是 TpTextBox 类的Render 方法。 查看代码中的注释:

protectedoverridevoid Render(HtmlTextWriter writer)
{
 FormTipAndFocus(writer);
 base.Render(writer);
}privatevoid FormTipAndFocus(HtmlTextWriter writer)
{
 string tipFunction = "";
 // Show tool tip only if ToolTipText has some textif (!ReferenceEquals(ToolTipText, null))
 {
 // to have several controls on page,// we should make unique ids for tool tip layers// javscript function will use this id to show/hide layerstring id = Guid.NewGuid().ToString();
 // create tool tip layer. Resolve drop down// and z-index problem for IE as wellstring toolTipLayer = String.Format(
 "<div class='toolTip selectFree' id='{0}'>" + 
 "<div class='content'>{1}</div>" + 
 "<!--[if lte IE 6.5]><iframe></iframe><![endif]--></div>",
 id, ToolTipText);
 Literal lit = new Literal();
 lit.Text = toolTipLayer;
 lit.RenderControl(writer);
 }
}

步骤 4.定义x。y 坐标。显示onfocus的工具提示层

下面是 showTip JavaScript函数的代码。 它显示/隐藏工具提示并将它的放置在正确的位置- 输入字段之后。

function showTip(id, inputId) {
 var panel = document.getElementById(id);
 var inputField = document.getElementById(inputId);
 // show/hide tool tip layerif (panel.style.display!= 'block') {
 panel.style.display = 'block';
 }
 else {
 panel.style.display = 'none';
 }
 //positioning panel.style.position = 'absolute';
 var width = inputField.style.width.toString();
 var w = findPosX(inputField) + parseInt(width.substring(0, width.length - 2));
 var h = findPosY(inputField);
 panel.style.left = w + 3 + 'px';
 panel.style.top = h + 'px';
}

现在我们必须在 onfocusonblur 中调用 showTip 函数。 只需将这些属性添加到 Render 方法中的TpTextBox:

privatevoid FormTipAndFocus(HtmlTextWriter writer)
{
 string tipFunction = "";
 if (!ReferenceEquals(ToolTipText, null))
 {
. . .
 tipFunction = String.Format("showTip('{0}','{1}');", id, ClientID);
 }
 // add showTip function onfocus event, also change styles to highlight input field Attributes.Add("onfocus", tipFunction + 
 String.Format(FocusBlurStyles, focusBackground, focusBorderColor));
 Attributes.Add("onblur", tipFunction + 
 String.Format(FocusBlurStyles, blurBackground, blurBorderColor));
}

好了控制已经准备好了。

注:

我们处理 TargetProcess v.2.0. 它是基于 ASP.NET 2.0的敏捷项目管理方案。 我们在分享想法代码等等。 在 20. targetprocess.com 检查它们。


tool  IMP  控制  Implementation  文本  TEX  
相关文章