带图片的，多列的DropDownList的实现

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

WebDropDownList.aspx

1@ Page language="c#" Codebehind="WebDropDownList.aspx.cs"validateRequest="false"   
2AutoEventWireup="false" Inherits="eMeng.WebDropDownList" 

  1<html>
  2<head>
  3<title>模拟下拉列表框</title>
  4<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
  5<style>BODY {   
  6FONT: 12px 宋体   
  7}   
  8TD {   
  9FONT: 12px 宋体   
 10}   
 11DIV {   
 12FONT: 12px 宋体   
 13}   
 14LABEL {   
 15PADDING-RIGHT: 0px; PADDING-LEFT: 4px; PADDING-BOTTOM: 0px; PADDING-TOP: 3px; HEIGHT: 19px   
 16}   
 17.link_box {   
 18CURSOR: default; TEXT-ALIGN: left   
 19}   
 20.link_head {   
 21BORDER-RIGHT: 2px inset; BORDER-TOP: 2px inset; BORDER-LEFT: 2px inset; WIDTH: 100%;   
 22BORDER-BOTTOM: 2px inset; HEIGHT: 23px   
 23}   
 24.link_text {   
 25PADDING-LEFT: 2px; BACKGROUND: #fff   
 26}   
 27.link_arrow0 {   
 28BORDER-RIGHT: 2px outset; BORDER-TOP: 2px outset; BACKGROUND: buttonface;   
 29FONT: 14px marlett; BORDER-LEFT: 2px outset; WIDTH: 22px;   
 30BORDER-BOTTOM: 2px outset; HEIGHT: 100%; TEXT-ALIGN: center   
 31}   
 32.link_arrow1 {   
 33BORDER-RIGHT: buttonshadow 1px solid; PADDING-RIGHT: 0px;   
 34BORDER-TOP: buttonshadow 1px solid; PADDING-LEFT: 2px;   
 35BACKGROUND: buttonface; PADDING-BOTTOM: 0px; FONT: 14px marlett;   
 36BORDER-LEFT: buttonshadow 1px solid; WIDTH: 22px; PADDING-TOP: 2px;   
 37BORDER-BOTTOM: buttonshadow 1px solid; HEIGHT: 100%; TEXT-ALIGN: center   
 38}   
 39.link_value {   
 40BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FILTER: alpha(opacity:0);   
 41VISIBILITY: hidden; OVERFLOW-X: hidden; OVERFLOW: auto; BORDER-LEFT: 1px solid;   
 42BORDER-BOTTOM: 1px solid; POSITION: absolute   
 43}   
 44.link_record0 {   
 45BORDER-TOP: #eee 1px solid; PADDING-LEFT: 2px; BACKGROUND: #fff;   
 46WIDTH: 100%; COLOR: #000; HEIGHT: 20px   
 47}   
 48.link_record1 {   
 49BORDER-TOP: #047 1px solid; PADDING-LEFT: 2px; BACKGROUND: #058;   
 50WIDTH: 100%; COLOR: #fe0; HEIGHT: 20px   
 51}   
 52</style>
 53<script>   
 54var dropShow=false   
 55var currentID   
 56function dropdown(el){   
 57if(dropShow){   
 58dropFadeOut()   
 59}else{   
 60currentID=el   
 61el.style.visibility="visible"   
 62dropFadeIn()   
 63}   
 64}   
 65function dropFadeIn(){//选单淡入的效果   
 66if(currentID.filters.alpha.opacity<100){   
 67currentID.filters.alpha.opacity+=20   
 68fadeTimer=setTimeout("dropFadeIn()",50)   
 69}else{   
 70dropShow=true   
 71clearTimeout(fadeTimer)   
 72}   
 73}   
 74function dropFadeOut(){//选单淡出的效果   
 75if(currentID.filters.alpha.opacity>0){   
 76clearTimeout(fadeTimer)   
 77currentID.filters.alpha.opacity-=20   
 78fadeTimer=setTimeout("dropFadeOut()",50)   
 79}else{   
 80dropShow=false   
 81currentID.style.visibility="hidden"   
 82}   
 83}   
 84function dropdownHide(){   
 85if(dropShow){   
 86dropFadeOut()   
 87dropShow=false   
 88}   
 89}   
 90function hiLight(el){//高亮度显示指标位置   
 91if(dropShow){   
 92for(i=0;i<el.parentElement.childNodes.length;i++){   
 93el.parentElement.childNodes(i).className="link_record0"   
 94}   
 95el.className="link_record1"   
 96}   
 97}   
 98function CheckMe(el){//替换显示内容   
 99document.all.text1.innerText=el.innerText   
100}   
101document.onclick=dropdownHide   
102</script>
103</head>
104<body onload="document.all.form1.reset()" text="#000000">
105<div style="padding:10px;border-bottom:2px solid red">模拟下拉框</div>
106<form id="form1" onsubmit="alert(city.value)" runat="server">
107<table>
108<tr>
109<td>
110<div class="link_box" onselectstart="return false" style="WIDTH: 100px">
111<div class="link_head" onclick="dropdown(value1)">
112<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
113<tr>
114<td>
115<div class="link_text"><nobr><label id="text1">请选择？</label></nobr></div>
116</td>
117<td align="right" width="22">
118<div class="link_arrow0" onmousedown="this.className='link_arrow1'" onmouseout="this.className='link_arrow0'" onmouseup="this.className='link_arrow0'">6</div>
119</td>
120</tr>
121</table>
122</div>
123<div class="link_value" id="value1" style="WIDTH: 500px; HEIGHT: 300px">
124<asp:datagrid autogeneratecolumns="False" font-size="12px" id="DataGrid1" runat="server" showheader="False" width="100%">
125<columns>
126<asp:boundcolumn datafield="Title" dataformatstring="&lt;img src='http://dotnet.aspx.cc/Images/meng.gif' align='absmiddle'&gt; {0}" sortexpression="Title">
127</asp:boundcolumn>
128<asp:boundcolumn datafield="CreateDate" dataformatstring="{0:yyyy年MM月dd日}" headertext="" sortexpression="CreateDate"></asp:boundcolumn>
129</columns>
130</asp:datagrid>
131<div id="mx">
132<div class="link_record0" onclick="CheckMe(this);document.all.form1.city.value=this.innerText" onmouseover="hiLight(this)"><label>北京市</label></div>
133<div class="link_record0" onclick="CheckMe(this);document.all.form1.city.value=this.innerText" onmouseover="hiLight(this)"><label>上海市</label></div>
134<div class="link_record0" onclick="CheckMe(this);document.all.form1.city.value=this.innerText" onmouseover="hiLight(this)"><label>河南省</label></div>
135<div class="link_record0" onclick="CheckMe(this);document.all.form1.city.value=this.innerText" onmouseover="hiLight(this)"><label>深圳市</label></div>
136<div class="link_record0" onclick="CheckMe(this);document.all.form1.city.value=this.innerText" onmouseover="hiLight(this)"><label>大连市</label></div>
137<div class="link_record0" onclick="CheckMe(this);document.all.form1.city.value=this.innerText" onmouseover="hiLight(this)"><label>云南省</label></div>
138</div>
139</div>
140</div>
141</td>
142<td><input name="city" type="hidden" value="您尚未选择"/> <input type="submit" value="确定"/>
143</td>
144</tr>
145</table>
146</form>
147</body>
148</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
{
///

1<summary>   
2/// ShowList 的摘要说明。   
3/// </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);
}

///

1<summary>   
2/// 设计器支持所需的方法 - 不要使用代码编辑器修改   
3/// 此方法的内容。   
4/// </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
}
}

Published At
Categories with Web编程
Tagged with
comments powered by Disqus