可输可选下拉列表控件制作

.cs中代码
using System;
using System.Collections.Generic;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Data ;
using System.ComponentModel;
using System.Web.UI.WebControls;
using System.Drawing;

[assembly: TagPrefix("TextDropList", "kk")]
namespace TextDropList
{
[ToolboxData(@"<{0}:TextDropList runat='server'></{0}:TextDropList>")]
public class TextDropList : System .Web .UI .WebControls .TextBox
{
private DataTable dt=new DataTable ();
private string mouseOverColor = "Gainsboro";
private string mouseOutColor = "WhiteSmoke";
private string listBackColor = "WhiteSmoke";
private string listFontSize = "12px";
private string listSelected = "false";
private string listSelectedColor = "red";
//private string listSelectText = "";

private string valueString="";
private string itemString="";
private string image = "";
private string width="0px";
private string height = "0px";
private string listSelectValue="";

#region 属性

//[BrowsableAttribute(true)]
//[DescriptionAttribute("下拉列表字体大小")]
//[DefaultValueAttribute("")]
//[CategoryAttribute("Appearance")]

// 获取或设置下拉列表高度
[Category("自定义信息区")]
[Browsable(true)]
[Description("选种记录背景颜色")]
[DefaultValue("")]
public virtual string ListSelectedColor
{
get
{
return listSelectedColor;
}
set
{
listSelectedColor = value;
}
}

// 获取或设置下拉列表高度
[Category("自定义信息区")]
[Browsable(true)]
[Description("下拉列表字体大小")]
[DefaultValue("")]
public virtual string ListFontSize
{
get
{
return listFontSize;
}
set
{
listFontSize = value;
}
}

// 获取或设置下拉列表背景颜色
[Category("自定义信息区")]
[Browsable(true)]
[Description("下拉列表背景颜色")]
[DefaultValue("")]
public virtual string ListBackColor
{
get
{
return listBackColor;
}
set
{
listBackColor = value;
}
}

// 获取或设置下拉列表鼠标经过时颜色
[Category("自定义信息区")]
[Browsable(true)]
[Description("鼠标经过时颜色")]
[DefaultValue("")]
public virtual string MouseOverColor
{
get
{
return mouseOverColor;
}
set
{
mouseOverColor = value;
}
}

// 获取或设置下拉列表鼠标离开时颜色
[Category("自定义信息区")]
[Browsable(true)]
[Description("鼠标离开时颜色")]
[DefaultValue("")]
public virtual string MouseOutColor
{
get
{
return mouseOutColor;
}
set
{
mouseOutColor = value;
}
}

// 获取或设置下拉列表图标路径
[Category("自定义信息区")]
[Browsable(true)]
[Description("下拉列表图标路径")]
[DefaultValue("")]
public virtual string ListImgSrc
{
get
{
return image;
}
set
{
image = value;
}
}

// 获取或设置下拉列表高度
[Category("自定义信息区")]
[Browsable(true)]
[Description("下拉列表高度")]
[DefaultValue("100px")]
public virtual string ListHeight
{
get
{
return height;
}
set
{
height = value;
}
}

// 获取或设置下拉列表宽度
[Category("自定义信息区")]
[Browsable(true)]
[Description("获取或设置下拉列表宽度")]
[DefaultValue("0px")]
public virtual string ListWidth
{
get
{
return width;
}
set
{
width = value;
}
}

// 获取或设置所选数据的value值
[Category("自定义信息区")]
[Browsable(true)]
[Description("获取或设置下拉列表值")]
[DefaultValue("")]
public virtual string ListSelectValue
{
get
{
return listSelectValue;
}
set
{
listSelectValue = value;
}
}

// 设置或获取DataTable类型数据集
public DataTable GetDataTable
{
get
{
return dt;
}
set
{
dt = value;
}
}

// 设置value的列名
public string ValueString
{
set
{
valueString = value;
}
}

// 设置显示数据的列名
public string ItemString
{
set
{
itemString = value;
}
}
#endregion

//保存 listSelectValue
protected override bool LoadPostData(string postDataKey, System.Collections.Specialized.NameValueCollection postCollection)
{
this.ListSelectValue = Page.Request.Form["lstVal" + this.UniqueID];
return base.LoadPostData(postDataKey, postCollection);
}

protected override void Render(HtmlTextWriter writer)
{
//填充下拉表
writer.AddStyleAttribute(HtmlTextWriterStyle.Position, "absolute");
writer.AddStyleAttribute(HtmlTextWriterStyle.Display, "none");
writer.AddStyleAttribute(HtmlTextWriterStyle.BackgroundColor, ListBackColor);
writer.AddStyleAttribute(HtmlTextWriterStyle.FontSize, ListFontSize);
writer.AddAttribute(HtmlTextWriterAttribute.Id, "TopDiv" + this.UniqueID);
if (this.Width.ToString () =="")
writer.AddStyleAttribute(HtmlTextWriterStyle.Width, ListWidth == "0px" ? "150px" : ListWidth);
else
writer.AddStyleAttribute(HtmlTextWriterStyle.Width, this .Width.ToString ());
writer.AddStyleAttribute(HtmlTextWriterStyle.Height, ListHeight );
writer.AddStyleAttribute(HtmlTextWriterStyle.OverflowY, "auto");
writer.RenderBeginTag(HtmlTextWriterTag.Div );
for (int i = 0; i <= dt.Rows.Count - 1; i++)
{
if (listSelectValue != "")
{
if (listSelectValue == dt.Rows[i][valueString].ToString())
{
//
listSelected = "true";
this .Text = dt.Rows[i][itemString].ToString();
}
else
{
listSelected = "false";
}
}
else
{
listSelected = "false";
}
writer.Write("<script language='javascript'>CreatDivItem('" + this.UniqueID + i.ToString() + "','" + this.ID + "','" + dt.Rows[i][itemString].ToString() + "','" + dt.Rows[i][valueString].ToString() + "','" + "lstVal" + this.UniqueID + "','" + MouseOverColor + "','" + MouseOutColor + "','" + listSelected + "');</script>");
}
writer.RenderEndTag();

//输出textBox
this.Attributes.Add("ListValue", "");
AddTextChangeEvent(writer);
//设置txtBox宽度和下拉表一致
writer.AddStyleAttribute(HtmlTextWriterStyle.Width, ListWidth == "0px" ? "150px" : ListWidth);
base.Render(writer);

//下拉铵钮
writer.AddStyleAttribute(HtmlTextWriterStyle.BorderWidth, "2px");
writer.AddStyleAttribute(HtmlTextWriterStyle.BorderColor, "Red");
writer.AddStyleAttribute(HtmlTextWriterStyle.Height, this.Height.ToString ( ));
writer.AddStyleAttribute(HtmlTextWriterStyle.Width, "20px");
writer.AddAttribute(HtmlTextWriterAttribute.Onclick, "ShowItem('TopDiv" + this.UniqueID + "','" + this.ID + "','" + "img" + this.UniqueID + "','" + this.ListSelectedColor + "');");
writer.AddAttribute(HtmlTextWriterAttribute.Id, "img" + this.UniqueID );
writer.AddStyleAttribute(HtmlTextWriterStyle.BackgroundImage, ListImgSrc);
if (this.Enabled == false)
writer.AddAttribute(HtmlTextWriterAttribute.Disabled, "disabled");
writer.RenderBeginTag(HtmlTextWriterTag.Button );
writer.RenderEndTag();

//保存 ListSelectValue值
AddSaveValue(writer);
}

protected void AddTextChangeEvent(HtmlTextWriter writer)
{
this.Attributes.Add("onpropertychange", "TxtChanged('TopDiv" + this.UniqueID + "','" + this.ID + "','" + "img" + this.UniqueID + "');");
}

protected void AddSaveValue(HtmlTextWriter writer)
{
//保存 ListSelectValue值
writer.AddAttribute(HtmlTextWriterAttribute.Type, "hidden");
writer.AddAttribute(HtmlTextWriterAttribute.Name, "lstVal" + this.UniqueID);
writer.AddAttribute(HtmlTextWriterAttribute.Id, "lstVal" + this.UniqueID);
writer.AddAttribute(HtmlTextWriterAttribute.Value, listSelectValue);
writer.RenderBeginTag(HtmlTextWriterTag.Input);
writer.RenderEndTag();
}

protected override void OnPreRender(EventArgs e)
{
//输出脚本
Page.ClientScript .RegisterClientScriptBlock(GetType(),"kkScript", ScriptSrouce.kkScript);
base.OnPreRender(e);
}

//private string overFlowY;
//[Bindable(true)]
//[Category("自定义信息区")]
//[Browsable(true)]
//[Description("验证数据类型，默认为不验证")]
//[DefaultValue("IntPostive")]
//public OverFlowYEnum OverFlowY
//{
// get { return (string)OverFlowYEnum; }
// set { overFlowY = value.ToString(); }
//}
}

//public enum OverFlowYEnum
//{
// visible,
// auto,
// hidden,
// scroll
//}
}

资源文件中的javascript
<script language ="javascript" type ="text/javascript" >
var itemsID="";
var txtBoxsID="";
var imgsID="";
function ShowItem(itemID,txtBoxID,imgID,selectedColor)
{
if(txtBoxsID==txtBoxID)
{
}
else
{
if(txtBoxsID != "")
{
document.getElementById(itemsID).style.display="none";
}
}

itemsID=itemID;
txtBoxsID=txtBoxID;
imgsID=imgID;

for(i=0;i<document.all.tags("div").length;i++)
{
if (LeftStr(document.all.tags("div")[i].id,txtBoxID.length) == txtBoxID)
{ if(document.all.tags("div")[i].isSelect=="true")
{ document.all.tags("div")[i].style.backgroundColor=selectedColor;}
if(LeftStr(document.all.tags("div")[i].innerText,document.getElementById(txtBoxID).value.length)!=(document.getElementById(txtBoxID).value))
{
document.all.tags("div")[i].style.display="";
}
}
}

document.getElementById(itemID).style.display="";
document.getElementById(itemID).style.left=document.getElementById(txtBoxID).offsetLeft+10;
document.getElementById(itemID).style.top=document.getElementById(txtBoxID).offsetTop+35;
}
function CreatDivItem(itemDivID,txtID,divStr,divTitle,listValues,mouseOverColor,mouseOutColor,isSelected)
{
document.write("<div id=" + itemDivID + " isSelect=" + isSelected + " style='cursor :hand' onmouseover='style.backgroundColor=/"" + mouseOverColor + "/"' onmouseout='style.backgroundColor=/"" + mouseOutColor + "/";if(this.isSelect==/"true/"){this.style.backgroundColor=/"red/";};' SelectValue=" + divTitle + " onclick='document.getElementById(/"" + txtID + "/").value=this.innerText; document.getElementById(/"" + txtID + "/").ListValue=this.SelectValue; document.getElementById(/"" + listValues + "/").value=document.getElementById(/"" + txtID + "/").ListValue; '>" + divStr+ "</div>");
}
function LeftStr(str,len)
{
return str.substr(0,len);
}

function TxtChanged(itemID,txtBoxID,imgID)
{
itemsID=itemID;
txtBoxsID=txtBoxID;
imgsID=imgID;
document.getElementById(itemID).style.display="";
document.getElementById(itemID).style.left=document.getElementById(txtBoxID).offsetLeft+10;
document.getElementById(itemID).style.top=document.getElementById(txtBoxID).offsetTop+35;
for(i=0;i<document.all.tags("div").length;i++)
{
if (LeftStr(document.all.tags("div")[i].id,txtBoxID.length) == txtBoxID)
{
if(LeftStr(document.all.tags("div")[i].innerText,document.getElementById(txtBoxID).value.length)!=(document.getElementById(txtBoxID).value))
{
document.all.tags("div")[i].style.display="none";
}
else
{ document.all.tags("div")[i].style.display="";}
}
}
}
function HideItem()
{
var IDStr = event.srcElement.id;
if(itemsID == "")
{return;}
if(IDStr ==imgsID)
{
document.getElementById(itemsID).style.display="";
}
else
{
document.getElementById(itemsID).style.display="none";
}
}
document.onclick=HideItem;
</script>

IE 和 maxthon中可用 下拉位置还有点问题