具有炫酷效果的自定义列表框

• 下载源代码 - 1.82 KB
• 下载演示 - 11.26 KB

引言

本文描述了如何

1. 在列表框中添加水平滚动
2. 为每个列表项添加图片
3. 将列表框用作列表视图

问题

如上所述，列表框存在一些问题

1. 它不提供水平滚动
2. 它无法为列表项添加图片
3. 无法实现多列视图

在列表框中添加水平滚动的一种方法是将其放入一个具有固定高度和宽度的 div 中。 这样，水平滚动条就会出现，问题似乎解决了。 但另一个问题随之而来，即出现两个垂直滚动条，如下所示

解决方案

要解决此问题，可以使用自定义列表框。 它提供水平滚动，而不会出现额外的垂直滚动条。 该自定义列表框基本上是一个基于项目渲染的表格，但它的行为类似于列表框。 在此列表框中，您可以根据需要添加自己的炫酷效果，例如，当鼠标悬停时更改背景颜色，并为每个列表项添加图片。

以下代码在运行时渲染自定义列表框中的项目列表

public void RenderCustomControl()
{
String HtmlList = String.Empty;
try
{
HtmlList = HtmlList + "<TABLE width=\"100%\" bgColor=\"white\" border=\"0\"
	cellpadding =\"0\" cellspacing=\"0\" > <TBODY class=\"list\">";
for (int i = 0; i < Items.Count; i++)
{
string imgPath = Items[i].ImagePath;
HtmlList += string.Format("<tr ID=\"tr{0}\"" +
" onmouseover=\"mouseoverelem('tr{0}');\" " +
" onmouseout=\"mouseoutelem('tr{0}');\" " +
" onclick=\"select('tr{0}');\">"
, Items[i].Value);
HtmlList += "<td width='1%'>";
if (imgPath != "")
HtmlList += "<img src=\"" + imgPath + "\">";
HtmlList += "</td>";
HtmlList += string.Format("<td ID=\"td{0}\" " +
"> {1}</td>"
, Items[i].Value, Items[i].Text);
for (int j = 0; j < Items[i].DetailDataItem.Count; j++)
{
HtmlList += "<td style='border-left-width:1px'> " +
		Items[i].DetailDataItem[j] + "</td>";
}
HtmlList += "</tr>";
}
HtmlList = HtmlList + "</tbody></TABLE>";
divListControl.InnerHtml = HtmlList;
}
catch (Exception ex)
{
HtmlList = HtmlList + "</tbody></TABLE>";
}
}

项目列表可以按如下方式传递

MyListControl1.Items.Add(new CListItem("abcdefghijklmnopqrestuvwxyz", "1"));

MyListControl1.Items.Add(new CListItem
	"abcdefghijklmnopqrestuvwxyz", "3", "images/comments.gif"));
MyListControl1.Items.Add(new CListItem
	"<a href='#'>my list 2</a>", "2", "images/comments.gif"));

CListItem cli = new CListItem
		abcdefghijklmnopqrestuvwxyz", "4", "images/comments.gif");
MyListControl1.Items.Add(cli);

如上代码所示，项目可以是

• 一个简单的文本值对
• 文本、值和一个可选的图片
• 文本可以是任何 HTML，例如超链接

您可以在服务器端按如下方式获取选定的值

lblInfo.Text = MyListControl1.SelectedValue;

与本文一起提供的源代码包含提供水平滚动的两种方法和上述代码。 该自定义列表框已在 Internet Explorer 和 Firefox 上成功测试。