扩展的 DropDownList

• 下载源代码和演示 - 52.41 KB

什么是 DropDownListEx？

大多数时候，当下拉列表中的项目很长时，开发人员会发现很难控制它们的外观。 如果未设置下拉列表宽度，则下拉列表的大小会变得很长；如果设置了下拉列表的大小，则项目会在显示期间被裁剪。 DropDownListEx 是解决此类问题的方法。 您可以控制下拉列表的宽度，项目显示时不会被裁剪。

随附了一个示例代码以及 DropDownListEx 源代码，供您了解如何使用和设置控件的属性。

背景

包括我自己，我的许多同事都面临 dropdownlist 问题。 因此，我想到开发自定义控件来摆脱这个问题。 而且这不像我是第一个做这件事的人。 有可用的自定义控件，但您必须付费才能使用它们。 在我开发完它之后，我想为什么不与世界各地也面临同样问题的其他开发人员分享呢。 所以在这里我向你展示我的努力。 始终欢迎您的建议。

使用 DropDownListEx

此自定义控件包括

• DropDownListEx.cs：自定义控件源代码文件
• DropDownListEx.js：用于处理客户端任务的 JavaScript
• DropDownListEx.css：用于控制下拉列表及其项目外观的样式表
• DownArrow.gif：用于显示下拉按钮的图像文件

呈现 DropDownList

DropdownListEx 继承自 DropDownList & IPostBackHandler 类，因此我们获得了标准 dropdownlist & IPostBackHandler 接口的所有属性、事件和方法来处理回发事件。

通过覆盖标准 dropdownlist 的渲染功能，我们创建了自己的渲染功能。 我们没有显示标准下拉列表，而是使用 textbox 和项目符号树 (ul li) 来呈现下拉列表及其项目。

我们使用 HTMLTextWriter 来呈现这些控件，如下面的代码所示

private void RenderTextBoxSpan(HtmlTextWriter writer)
{
	writer.WriteBeginTag("div");
	writer.Write(">");
	writer.WriteFullBeginTag("table cellpadding='1' cellspacing='0' border='0'");
	writer.WriteFullBeginTag("tr");
	writer.WriteFullBeginTag("td");
	writer.WriteBeginTag("span");
	if (!string.IsNullOrEmpty(CssClass))
	{
		writer.WriteAttribute("class", "textBoxWrapper " + CssClass);
	}
	else
	{
		writer.WriteAttribute("class", "textBoxWrapper");
	}
		writer.Write(">");
	.
	.
	.
	.
	writer.WriteBeginTag("div");
	writer.WriteAttribute("ID", this.ClientID + "_listBox");
	writer.WriteAttribute("class", "listBox");
	writer.WriteAttribute("tabindex", "0");
	writer.Write(">");
	writer.WriteLine();

	// opening ul... the rest is rendered in the RenderContents()
	writer.WriteFullBeginTag("ul");
}

通过渲染，设计了以下 HTML 结构

<div>
        <table>
    <tr>
    <td>
     <table>
          <tr>
       <td>TextBox<td><td>ImageButton</td>
      </tr>
     </table>
     <div>
          <ul>
            <li>First Item of the dropdown</li>
            <li>Second Item of the dropdown</li>
      </ul>
     </div>
    </td>
  </tr>
 </table>
</div>

还在结构中添加了一些 span 以更改控件的外观，使其看起来像下拉列表。

TextBox 显示选定的项目，图像按钮用于向下钻取项目。 通过使用样式表，项目符号 (ui, li) 的外观与标准下拉列表项目相似。

使用 DropDownListEx.js

现在，由于下拉列表已呈现，因此是浏览器开始运行的时候了。 使用 JQuery 强大而简单的功能，可以控制客户端下拉列表的功能。 这些功能包括单击图像按钮时向下钻取项目、鼠标悬停时更改项目的外观、鼠标离开或选择项目时隐藏项目等。

历史

• 2010年12月16日：初始版本