首 页
ASP.NET
VB.NET
Visual C#
XML/XSL
Web Services
.NET FAQs
书籍出版
Silverlight 1.0 SDK 中文版
English Version
带图片的，多列的DropDownList的实现
作者：孟宪会 出自：【孟宪会之精彩世界】 发布日期：2004年7月29日 17点49分13秒

下面是模仿的DropDownList的效果，支持图片，多列，换行等。查看例子

WebDropDownList.aspx

<%@ Page language="c#" Codebehind="WebDropDownList.aspx.cs"validateRequest="false" AutoEventWireup="false" Inherits="eMeng.WebDropDownList" %> <HTML> <HEAD> <title>模拟下拉列表框</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style>BODY { FONT: 12px 宋体 } TD { FONT: 12px 宋体 } DIV { FONT: 12px 宋体 } LABEL { PADDING-RIGHT: 0px; PADDING-LEFT: 4px; PADDING-BOTTOM: 0px; PADDING-TOP: 3px; HEIGHT: 19px } .link_box { CURSOR: default; TEXT-ALIGN: left } .link_head { BORDER-RIGHT: 2px inset; BORDER-TOP: 2px inset; BORDER-LEFT: 2px inset; WIDTH: 100%; BORDER-BOTTOM: 2px inset; HEIGHT: 23px } .link_text { PADDING-LEFT: 2px; BACKGROUND: #fff } .link_arrow0 { BORDER-RIGHT: 2px outset; BORDER-TOP: 2px outset; BACKGROUND: buttonface; FONT: 14px marlett; BORDER-LEFT: 2px outset; WIDTH: 22px; BORDER-BOTTOM: 2px outset; HEIGHT: 100%; TEXT-ALIGN: center } .link_arrow1 { BORDER-RIGHT: buttonshadow 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: buttonshadow 1px solid; PADDING-LEFT: 2px; BACKGROUND: buttonface; PADDING-BOTTOM: 0px; FONT: 14px marlett; BORDER-LEFT: buttonshadow 1px solid; WIDTH: 22px; PADDING-TOP: 2px; BORDER-BOTTOM: buttonshadow 1px solid; HEIGHT: 100%; TEXT-ALIGN: center } .link_value { BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FILTER: alpha(opacity:0); VISIBILITY: hidden; OVERFLOW-X: hidden; OVERFLOW: auto; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid; POSITION: absolute } .link_record0 { BORDER-TOP: #eee 1px solid; PADDING-LEFT: 2px; BACKGROUND: #fff; WIDTH: 100%; COLOR: #000; HEIGHT: 20px } .link_record1 { BORDER-TOP: #047 1px solid; PADDING-LEFT: 2px; BACKGROUND: #058; WIDTH: 100%; COLOR: #fe0; HEIGHT: 20px } </style> <script> var dropShow=false var currentID function dropdown(el){ if(dropShow){ dropFadeOut() }else{ currentID=el el.style.visibility="visible" dropFadeIn() } } function dropFadeIn(){//选单淡入的效果 if(currentID.filters.alpha.opacity<100){ currentID.filters.alpha.opacity+=20 fadeTimer=setTimeout("dropFadeIn()",50) }else{ dropShow=true clearTimeout(fadeTimer) } } function dropFadeOut(){//选单淡出的效果 if(currentID.filters.alpha.opacity>0){ clearTimeout(fadeTimer) currentID.filters.alpha.opacity-=20 fadeTimer=setTimeout("dropFadeOut()",50) }else{ dropShow=false currentID.style.visibility="hidden" } } function dropdownHide(){ if(dropShow){ dropFadeOut() dropShow=false } } function hiLight(el){//高亮度显示指标位置 if(dropShow){ for(i=0;i<el.parentElement.childNodes.length;i++){ el.parentElement.childNodes(i).className="link_record0" } el.className="link_record1" } } function CheckMe(el){//替换显示内容 document.all.text1.innerText=el.innerText } document.onclick=dropdownHide </script> </HEAD> <body text="#000000" onload="document.all.form1.reset()"> <div style="padding:10px;border-bottom:2px solid red">模拟下拉框</div> <form id="form1" onsubmit="alert(city.value)" runat="server"> <table> <tr> <td> <div class="link_box" onselectstart="return false" style="WIDTH: 100px"> <div class="link_head" onclick="dropdown(value1)"> <table height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0"> <tr> <td> <div class="link_text"><nobr><label id="text1">请选择？</label></nobr></div> </td> <td align="right" width="22"> <div onmouseup="this.className='link_arrow0'" class="link_arrow0" onmousedown="this.className='link_arrow1'" onmouseout="this.className='link_arrow0'">6</div> </td> </tr> </table> </div> <div class="link_value" id="value1" style="WIDTH: 500px; HEIGHT: 300px"> <asp:datagrid id="DataGrid1" runat="server" AutoGenerateColumns="False" Font-Size="12px" Width="100%" ShowHeader="False"> <Columns> <asp:BoundColumn DataField="Title" SortExpression="Title" DataFormatString="<img src='http://dotnet.aspx.cc/Images/meng.gif' align='absmiddle'> {0}"> </asp:BoundColumn> <asp:BoundColumn DataField="CreateDate" SortExpression="CreateDate" HeaderText="" DataFormatString="{0:yyyy年MM月dd日}"></asp:BoundColumn> </Columns> </asp:datagrid> <div id="mx"> <div class="link_record0" onmouseover="hiLight(this)" onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>北京市</label></div> <div class="link_record0" onmouseover="hiLight(this)" onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>上海市</label></div> <div class="link_record0" onmouseover="hiLight(this)" onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>河南省</label></div> <div class="link_record0" onmouseover="hiLight(this)" onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>深圳市</label></div> <div class="link_record0" onmouseover="hiLight(this)" onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>大连市</label></div> <div class="link_record0" onmouseover="hiLight(this)" onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>云南省</label></div> </div> </div> </div> </td> <td><input type="hidden" value="您尚未选择" name="city"> <input type="submit" value="确定"> </td> </tr> </table> </form> </body> </HTML>

WebDropDownList.aspx.cs

using System; using System.Collections; using System.ComponentModel; using System.Data; using System.Drawing; using System.Web; using System.Web.SessionState; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.HtmlControls; using System.Data.OleDb; namespace eMeng { /// <summary> /// ShowList 的摘要说明。 /// </summary> public class WebDropDownList : System.Web.UI.Page { protected System.Web.UI.WebControls.DataGrid DataGrid1; private void Page_Load(object sender, System.EventArgs e) { DataGrid1.Columns[0].ItemStyle.Width = Unit.Pixel(400); DataGrid1.Columns[1].ItemStyle.Width = Unit.Pixel(100); Data_Bind(); } public void Data_Bind() { Response.CacheControl = "no-cache"; Response.Expires = -1; try { string strSQL = "SELECT id,objectGuid,Title,CreateDate,HitCount FROM Document ORDER BY id DESC"; string cnString = (new Connection()).ConnectionString; OleDbConnection cn = new OleDbConnection(cnString); cn.Open(); OleDbCommand cmd = new OleDbCommand(strSQL, cn); DataGrid1.DataSource = cmd.ExecuteReader(CommandBehavior.CloseConnection); DataGrid1.DataBind(); cn.Close(); cn.Dispose(); cn = null; cmd.Dispose(); cmd = null; } catch(OleDbException myOleDbException) { Response.Write("错误：" + myOleDbException.Message + ":" + myOleDbException.HelpLink); Response.End(); } } private void DataGrid1_ItemDataBound(object sender,System.Web.UI.WebControls.DataGridItemEventArgs e) { if( e.Item.ItemIndex != -1 ) { e.Item.Attributes.Add("onmouseover", "this.bgColor='#C1D2EE'"); e.Item.Attributes.Add("onclick", "document.all.text1.innerText=this.cells[0].innerText;document.all.form1.city.value=this.cells[0].innerText;"); if (e.Item.ItemIndex % 2 == 0 ) { e.Item.Attributes.Add("bgcolor", "#FFFFFF"); e.Item.Attributes.Add("onmouseout", "this.bgColor=document.getElementById('DataGrid1').getAttribute('singleValue')"); } else { e.Item.Attributes.Add("bgcolor", "oldlace"); e.Item.Attributes.Add("onmouseout", "this.bgColor=document.getElementById('DataGrid1').getAttribute('oldValue')"); } } else { DataGrid1.Attributes.Add("oldValue", "oldlace"); DataGrid1.Attributes.Add("singleValue", "#FFFFFF"); } } #region Web Form Designer generated code override protected void OnInit(EventArgs e) { // // CODEGEN：该调用是 ASP.NET Web 窗体设计器所必需的。 // InitializeComponent(); base.OnInit(e); } /// <summary> /// 设计器支持所需的方法 - 不要使用代码编辑器修改 /// 此方法的内容。 /// </summary> private void InitializeComponent() { this.DataGrid1.ItemDataBound += new System.Web.UI.WebControls.DataGridItemEventHandler(this.DataGrid1_ItemDataBound); this.Load += new System.EventHandler(this.Page_Load); } #endregion } }
关键字：
【发表评论】 【打印文章】 【收藏文章】
  关于本文的评论：为了保护您的电子邮件不被骚扰，地址中的个别符号转换成了全角字符！
评论人： 电子邮件：cqqjj1029＠gmail．com 评论日期：2007年12月13日 03:06:00
Firefox2.0下没通过
评论人：goodman 电子邮件：wxzlymanfs＠163．net 评论日期：2007年08月09日 05:27:26
做成用户控件就好了，研究研究
评论人：sx 电子邮件：sx．84＠163．com 评论日期：2007年06月04日 04:37:16
效果不错
评论人：メ冰枫ぱ雪 电子邮件：lantk＠126．com 评论日期：2006年05月25日 04:24:53
关键还是CSS+Js哈，不过做的很赞哦。。取到了点灵感，晚上试做做。。
评论人：santa 电子邮件： 评论日期：2006年05月09日 02:52:36
Firefox1.5 不通过
评论人： 电子邮件： 评论日期：2006年02月20日 08:12:17
string cnString = (new OleDbConnection()).ConnectionString;
评论人：kk 电子邮件：laojie＠hotmail．com 评论日期：2005年01月28日 09:36:38
string cnString = (new Connection()).ConnectionString;  怎么解决
评论人：Cornfield 电子邮件：cornfield＠gmail．com 评论日期：2004年11月12日 04:35:06
请问如何实现多选,或者图片换成CheckBox实现多选?
评论人：leilei 电子邮件： 评论日期：2004年11月10日 02:39:06
东东好是好，不过，该程序的重点应该是在JS脚本与css的结合，而非c#,能设立个脚本专区就好了
评论人：re 电子邮件： 评论日期：2004年09月24日 05:48:37
牛
评论人：xia 电子邮件：asdf 评论日期：2004年09月03日 10:58:00
adf
评论人：Super 电子邮件： 评论日期：2004年08月27日 10:51:48
孟大哥真是牛人!
评论人：ly 电子邮件： 评论日期：2004年08月13日 03:20:23
楼下的兄弟也太懒了。孟子代码算是好的了，copy过去都能用。不出现字符转义，已经很方便了。
评论人：要求过不过份啊??? 电子邮件：xiaosonge＠hotmail．com 评论日期：2004年08月10日 09:29:52
如果每篇文章后面能提供实例下载该多好啊
评论人： 电子邮件： 评论日期：2004年08月09日 04:16:55
有没有VB.net的版本啊
评论人：yanyl 电子邮件： 评论日期：2004年08月04日 04:53:57
string cnString = (new Connection()).ConnectionString; 报错.
评论人：bluefee 电子邮件：bluefee＠21cn．com 评论日期：2004年08月01日 08:22:20
效果不错啊
评论人：gordon 电子邮件：gordon772＠yahoo．com 评论日期：2004年07月29日 11:37:15
string cnString = (new Connection()).ConnectionString; 报错.
  发表评论（小于4000字） [注意：如果您输入电子邮件，将有利于您得到及时的回复。]【请勿发表国家法律不允许的言论，谢谢！！】
用户名： 电子邮件： 验证码：
[Valid RSS] Valid CSS!

【孟宪会之精彩世界】  ©【孟宪会之精彩世界】®由孟宪会制作 2008年 版权所有 Powered By ASP.NET 2.0 特别感谢：Ahui