带图片的，多列的DropDownList的实现 （摘自孟子E章）
下面是模仿的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
}
}
posted on 2004年07月29日 5:51 PM
1、用CSS将DIV模拟成文本框，真是高人哪！也可见CSS的美化功能是强大得恐怖呀:p
<div class="link_text" onmouseup="arrow1.className='link_arrow0'" onmousedown="arrow1.className='link_arrow1'" onmouseout="arrow1.className='link_arrow0'"><nobr><label id="text1">请选择？</label></nobr></div>
注：上面我也加上了脚本处理，孟老大原来的程序是没有的，但我觉得加上后更像dropdown list :)
2、用CSS特殊字体将DIV和数字模拟成按钮面和箭头，真是高人哪！特殊字体有时确实有出其不意之效
按钮面 BACKGROUND: buttonface;
正常按钮立体 BORDER-LEFT: 2px outset; BORDER-TOP: 2px outset; BORDER-RIGHT: 2px outset; BORDER-BOTTOM: 2px outset;
按下按钮立体 BORDER-LEFT: buttonshadow 1px solid; PADDING-LEFT: 2px;
BORDER-TOP: buttonshadow 1px solid; PADDING-TOP: 2px;
BORDER-RIGHT: buttonshadow 1px solid; PADDING-RIGHT: 0px;
BORDER-BOTTOM: buttonshadow 1px solid; PADDING-BOTTOM: 0px;
箭头 FONT: 14px marlett; <div id=arrow1>7</div>
注：我将原来的数字6换成了7，你看看有没有漂亮一些:)
3.用脚本和CSS实现鼠标按下放开时的按钮动态效果。
onmouseup="arrow1.className='link_arrow0'"
onmousedown="arrow1.className='link_arrow1'"
4. 用表格或div模拟出下拉列表，其实要加入图片前缀很简单。
asp:BoundColumn和DataFormatString确实强大呀，它会自己决定td的width和将格式化变量外的图像或文字附加到正文中。
<asp:BoundColumn DataField="Title" SortExpression="Title"
DataFormatString="<img src='http://dotnet.aspx.cc/Images/meng.gif' align='absmiddle'> {0}">
当然，我自己将img加入div内也不是不行的嘛:p
<div class="link_record0" onmouseover="hiLight(this)" onclick="CheckMe(this);"><img src='http://dotnet.aspx.cc/Images/meng.gif' align='absmiddle'> <label>北京市</label></div>
5. 用脚本和CSS实现光标移过时的反白效果。
onmouseover="this.bgColor='#C1D2EE'" onmouseout="this.bgColor=document.getElementById('DataGrid1').getAttribute('singleValue')"
6. 关键用css实现div的即时隐藏和显示！
el.style.visibility="visible"
el.style.visibility="hidden"
下面是改进的说明：
1. 孟老大为了美观，在图片和标题之间加了一个空格，但这样一来，选中Text1中的就多了一个空格！要消除它当然很简单啦，只有用trim就行了，问题是js没有这个函数，你要实现它得用正则表格式。当然，你可以可以简单得用substring来去掉第一个空格字符啦。但我的做法是用vbscript来实现了。所以说，没有一种语言是完美的，有时相互搭配才最爽，正如男女搭配干活不累:)
vbscript:document.all.text1.innerText=trim(document.all.DataGrid1.cells(0).innerText)
注：可惜的是，vbs有了trim，却没有了this，只能改成document.all.DataGrid1了。
2. 当鼠标移过div列表时（北京市），再移回table列表时（文章），div列表仍然会保留着一个反白的标志！
虽说现实应用中应该不会同时用table和div产生这样的结果列表，但我还是把它改正了吧:p
只要将原来的hiLight(el)函数复制出来一个clearHiLight(el)函数，并作如下修改：
function clearHiLight(el)
{ //清除所有高亮度显示
el=document.getElementById(el);
//alert(el.childNodes.length);
if(dropShow)
{
for(i=0;i<el.childNodes.length;i++)
{
el.childNodes(i).className="link_record0"
}
}
}
最后在table列表时的 onmouseover="this.bgColor='#C1D2EE'" 脚本里加上一句clearHiLight('mx')即可
3. 我不想要孟老大的淡入淡出（太花哨了:p），所以我就取消了这个函数，但一个重要问题就发生了！
请注意孟老大脚本的最后一句：document.onclick=dropdownHide
这句脚本的意思是在这个网页文档上任何处单击，都会调用这个隐藏下拉的函数！问题是，不单在其它地方点会，你就是在点那个按钮或文本框时，甚至在选择列表中的具体一项时，都会触发这个函数！
结果，当我把dropFadeOut()和dropFadeIn()杀掉以后，不管我怎么点按钮都不会出来下拉列表，但脚本却不会出错！费了我九牛二虎之力，我才发现上述那个事实！但为什么加上了这两个函数就不会发生这种情况呢？原来，这两上函数里的setTimeout()起了关键作用，在这个函数执行时，系统会将时间片交给其它脚本，这样，当dropFadeOut()完全完成之前它的dropShow还是false的，这样即使执行了dropdownHide()也不会造成什么后果。
所以，我也只能加了一个setTimeout()函数，仅仅只为延时将dropShow置为true。但请不要尝试将这句换成for空循环来延时，没用的，因为这时系统并不会将时间片交给其它脚本，所以当你执行dropdownHide()时dropShow已经为true，这就是悲衰的根源：（
4. 发现列表的高度太高了，远远超出了项目的数目。
建议，在表单里放一个hidden控件，里面放着asp.net程序里产生了记录总个数，最后在脚本里动态将div总高度改为“行数*单位行高”。
不过我就没做了，等下一个人吧：）
想让孟老大帮忙解决的疑问：
1. 我发现所有标题列的onclick事件都是“document.all.text1.innerText=this.cells[0].innerText;”
this.cells[0]指的是这一行的第一个单元格？
那假如我要取这个表格的第三行的第二个单元格又该如何表达？是不是得用二维数组？还是二级对象？
再假如我要取这个表格的第一个单元格，又该如何表示？能直接用document.all.datagrid1.cells[0]吗？