带图片的，多列的DropDownList的实现
点击次数：24 次 发布日期：2008-11-26 12:22:24 作者：源代码网
|
源代码网推荐 源代码网推荐 WebDropDownList.ASPx 源代码网推荐 源代码网推荐 <%@ Page language="<a href="http://dev.21tx.com/dotnet/csharp/" target="_blank">C#</a>" 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://image.21tx.com/image/20040729/10694.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 源代码网推荐 } 源代码网推荐 } 源代码网推荐 源代码网推荐 源代码网推荐 源代码网推荐 做人要厚道，请注明转自酷网动力(www.ASPCOOL.COM)。 源代码网推荐 源代码网供稿. |
