|
下面是模仿的DropDownList的效果支持图片多列换行等 WebDropDownListaspx <%@ Page language=c# Codebehind=WebDropDownListaspxcsvalidateRequest=false AutoEventWireup=false Inherits=eMengWebDropDownList %> <HTML> <HEAD> <title>模拟下拉列表框</title> <meta httpequiv=ContentType content=text/html; charset=gb> <style>BODY { FONT: px 宋体 } TD { FONT: px 宋体 } DIV { FONT: px 宋体 } LABEL { PADDINGRIGHT: px; PADDINGLEFT: px; PADDINGBOTTOM: px; PADDINGTOP: px; HEIGHT: px } link_box { CURSOR: default; TEXTALIGN: left } link_head { BORDERRIGHT: px inset; BORDERTOP: px inset; BORDERLEFT: px inset; WIDTH: %; BORDERBOTTOM: px inset; HEIGHT: px } link_text { PADDINGLEFT: px; BACKGROUND: #fff } link_arrow { BORDERRIGHT: px outset; BORDERTOP: px outset; BACKGROUND: buttonface; FONT: px marlett; BORDERLEFT: px outset; WIDTH: px; BORDERBOTTOM: px outset; HEIGHT: %; TEXTALIGN: center } link_arrow { BORDERRIGHT: buttonshadow px solid; PADDINGRIGHT: px; BORDERTOP: buttonshadow px solid; PADDINGLEFT: px; BACKGROUND: buttonface; PADDINGBOTTOM: px; FONT: px marlett; BORDERLEFT: buttonshadow px solid; WIDTH: px; PADDINGTOP: px; BORDERBOTTOM: buttonshadow px solid; HEIGHT: %; TEXTALIGN: center } link_value { BORDERRIGHT: px solid; BORDERTOP: px solid; FILTER: alpha(opacity:); VISIBILITY: hidden; OVERFLOWX: hidden; OVERFLOW: auto; BORDERLEFT: px solid; BORDERBOTTOM: px solid; POSITION: absolute } link_record { BORDERTOP: #eee px solid; PADDINGLEFT: px; BACKGROUND: #fff; WIDTH: %; COLOR: #; HEIGHT: px } link_record { BORDERTOP: # px solid; PADDINGLEFT: px; BACKGROUND: #; WIDTH: %; COLOR: #fe; HEIGHT: px } </style> <script> var dropShow=false var currentID function dropdown(el){ if(dropShow){ dropFadeOut() }else{ currentID=el elstylevisibility=visible dropFadeIn() } } function dropFadeIn(){//选单淡入的效果 if(currentIDfiltersalphaopacity<){ currentIDfiltersalphaopacity+= fadeTimer=setTimeout(dropFadeIn()) }else{ dropShow=true clearTimeout(fadeTimer) } } function dropFadeOut(){//选单淡出的效果 if(currentIDfiltersalphaopacity>){ clearTimeout(fadeTimer) currentIDfiltersalphaopacity= fadeTimer=setTimeout(dropFadeOut()) }else{ dropShow=false currentIDstylevisibility=hidden } } function dropdownHide(){ if(dropShow){ dropFadeOut() dropShow=false } } function hiLight(el){//高亮度显示指标位置 if(dropShow){ for(i=;i<elparentElementchildNodeslength;i++){ elparentElementchildNodes(i)className=link_record } elclassName=link_record } } function CheckMe(el){//替换显示内容 documentalltextinnerText=elinnerText } documentonclick=dropdownHide </script> </HEAD> <body text=# onload=documentallformreset()> <div >模拟下拉框</div> <form id=form onsubmit=alert(cityvalue) runat=server> <table> <tr> <td> <div class=link_box onselectstart=return false > <div class=link_head onclick=dropdown(value)> <table height=% cellSpacing= cellPadding= width=% border=> <tr> <td> <div class=link_text><nobr><label id=text>请选择？</label></nobr></div> </td> <td align=right width=> <div onmouseup=thisclassName=link_arrow class=link_arrow onmousedown=thisclassName=link_arrow onmouseout=thisclassName=link_arrow></div> </td> </tr> </table> </div> <div class=link_value id=value > <asp:datagrid id=DataGrid runat=server AutoGenerateColumns=False FontSize=px Width=% ShowHeader=False> <Columns> <asp:BoundColumn DataField=Title SortExpression=Title DataFormatString=<img src=/Images/menggif align=absmiddle> {}> </asp:BoundColumn> <asp:BoundColumn DataField=CreateDate SortExpression=CreateDate HeaderText= DataFormatString={:yyyy年MM月dd日}></asp:BoundColumn> </Columns> </asp:datagrid> <div id=mx> <div class=link_record onmouseover=hiLight(this) onclick=CheckMe(this);documentallformcityvalue=thisinnerText><label>北京市</label></div> <div class=link_record onmouseover=hiLight(this) onclick=CheckMe(this);documentallformcityvalue=thisinnerText><label>上海市</label></div> <div class=link_record onmouseover=hiLight(this) onclick=CheckMe(this);documentallformcityvalue=thisinnerText><label>河南省</label></div> <div class=link_record onmouseover=hiLight(this) onclick=CheckMe(this);documentallformcityvalue=thisinnerText><label>深圳市</label></div> <div class=link_record onmouseover=hiLight(this) onclick=CheckMe(this);documentallformcityvalue=thisinnerText><label>大连市</label></div> <div class=link_record onmouseover=hiLight(this) onclick=CheckMe(this);documentallformcityvalue=thisinnerText><label>云南省</label></div> </div> </div> </div> </td> <td><input type=hidden value=您尚未选择 name=city> <input type=submit value=确定> </td> </tr> </table> </form> </body> </HTML> WebDropDownListaspxcs using System; using SystemCollections; using SystemComponentModel; using SystemData; using SystemDrawing; using SystemWeb; using SystemWebSessionState; using SystemWebUI; using SystemWebUIWebControls; using SystemWebUIHtmlControls; using SystemDataOleDb; namespace eMeng { /// <summary> /// ShowList 的摘要说明 /// </summary> public class WebDropDownList : SystemWebUIPage { protected SystemWebUIWebControlsDataGrid DataGrid; private void Page_Load(object sender SystemEventArgs e) { DataGridColumns[]ItemStyleWidth = UnitPixel(); DataGridColumns[]ItemStyleWidth = UnitPixel(); Data_Bind(); } public void Data_Bind() { ResponseCacheControl = nocache; ResponseExpires = ; try { string strSQL = SELECT idobjectGuidTitleCreateDateHitCount FROM Document ORDER BY id DESC; string cnString = (new Connection())Con |
