DropDownList如何实现下拉图片？

v192 2004-07-07 02:11:58
不知道是不是要重写DropDownList类，谁来指点下？最好有现成的我就懒得自己写啦。
...全文
208 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
NekChan 2004-07-07
  • 打赏
  • 举报
 回复
对你一定有帮助。
NekChan 2004-07-07
  • 打赏
  • 举报
 回复
Pls reference this web,
http://www.c-sharpcorner.com/Code/2003/July/DropDownListBox.asp
v192 2004-07-07
  • 打赏
  • 举报
 回复
to :net_lover(孟子E章) ( )http://www.lostinet.com/en/LWSampleCS/ComboBox/SelectPhoto.Aspx
这个的控件在哪里下的啊？
孟子E章 2004-07-07
  • 打赏
  • 举报
 回复
<html>
<head>
<title>模拟下拉列表框</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
body,td,div {font:12px 宋体}
label {height:19px;padding:3px 0px 0px 4px}
.link_box {text-align:left;cursor:default}
.link_head {width:100%;height:23;border:2px inset}
.link_text {background:#fff;padding-left:2px}
.link_arrow0 {font:14px marlett;text-align:center;width:22;height:100%;border:2px outset;background:buttonface}
.link_arrow1 {font:14px marlett;text-align:center;width:22;height:100%;border:1px solid buttonshadow;padding:2px 0px 0px 2px;background:buttonface}
.link_value {position:absolute;visibility:hidden;border:1px solid;overflow:auto;overflow-x:hidden;filter:alpha(opacity:0)}
.link_record0{width:100%;height:20;border-top:1px solid #eee;background:#fff;color:#000;padding-left:2px}
.link_record1{width:100%;height:20;border-top:1px solid #047;background:#058;color:#fe0;padding-left:2px}
</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){//替换显示内容
el.parentElement.parentElement.childNodes(0).childNodes(0).childNodes(0).childNodes(0).childNodes(0).childNodes(0).innerHTML=el.innerHTML
}
document.onclick=dropdownHide
</script>
</head>

<body bgcolor="#0099FF" text="#000000" onload="document.form1.reset()">
<table align="center" width="100%" height="100%">
<tr><td align="center">
<table cellpadding=4 cellspacing=2 bgcolor=#a0a0a0 align="center"><tr>
<td bgcolor=#ddeeff width=160>范例1 (使用于表单)</td><td bgcolor=#ddeeff width=270>范例2 (使用于超连结)</td></tr>
<tr><td bgcolor=#e0e0e0 align=center>
<!--// 范例 1 开始 //-->
<table><tr><form name=form1 onsubmit="alert(city.value);return false"><td>
<div class=link_box style="width:100px" onselectStart="return false">
<div class=link_head onclick="dropdown(value1)">
<table width=100% height=100% border=0 cellpadding=0 cellspacing=0><tr>
<td><div id=text1 class=link_text><label>请选择？</label></div></td>
<td width=22 align=right><div class=link_arrow0 onmousedown="this.className='link_arrow1'" onmouseup="this.className='link_arrow0'" onmouseout="this.className='link_arrow0'">6</div></td>
</tr></table>
</div>
<div id=value1 class=link_value style="width:100%;height:100px">
<div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);document.form1.city.value=this.innerText"><label>北京市</label></div>
<div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);document.form1.city.value=this.innerText"><label>上海市</label></div>
<div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);document.form1.city.value=this.innerText"><label>河南省</label></div>
<div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);document.form1.city.value=this.innerText"><label>深圳市</label></div>
<div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);document.form1.city.value=this.innerText"><label>大连市</label></div>
<div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);document.form1.city.value=this.innerText"><label>云南省</label></div>
</div>
</div>
</td><td>
<input type="hidden" name="city" value="您尚未选择">
<input type="submit" value="确定">
</td></form></tr></table>
<!--// 范例 1 结束 //-->
</td>
<td bgcolor=#e0e0e0 align=center>
<!--// 范例 2 开始 //-->
<div class=link_box style="width:250px" onselectStart="return false">
<div class=link_head onclick="dropdown(value2)">
<table width=100% height=100% border=0 cellpadding=0 cellspacing=0><tr>
<td><div class=link_text><img src="http://lucky.myrice.com/images/home.gif" align="absmiddle"><label>您想要浏览哪个网站？</label></div></td>
<td width=22 align=right><div class=link_arrow0 onmousedown="this.className='link_arrow1'" onmouseup="this.className='link_arrow0'" onmouseout="this.className='link_arrow0'">6</div></td>
</tr></table>
</div>
<div id=value2 class=link_value style="width:100%;height:82px">
<div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);window.open('http://lucky.myrice.com')"><img src="http://lucky.myrice.com/images/copyright.gif" align="absmiddle"><label>【孟宪会之精彩世界】一</label></div>
<div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);window.open('http://lucky.myrice.com/')"><img src="http://lucky.myrice.com/images/copyright2.gif" align="absmiddle"><label>【孟宪会之精彩世界】二</label></div>
<div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);window.open('http://lucky.myrice.com')"><img src="http://lucky.myrice.com/images/copyright.gif" align="absmiddle"><label>【孟宪会之精彩世界】一</label></div>
<div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);window.open('http://lucky.myrice.com/')"><img src="http://lucky.myrice.com/images/copyright2.gif" align="absmiddle"><label>【孟宪会之精彩世界】二</label></div>
<div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);window.open('http://www.sina.com.cn/')"><img src="http://lucky.myrice.com/images/oicq.gif" align="absmiddle"><label>新浪网</label></div>

</div>
</div>
<!--// 范例 2 结束 //-->
</td></tr>
</table>

</body>
</html>
sunrongxa 2004-07-07
  • 打赏
  • 举报
 回复
有中文的例子吗? net_lover(孟子E章)
孟子E章 2004-07-07
  • 打赏
  • 举报
 回复
http://lucky.myrice.com/javascriptexam/mengxhselect.htm
sunrongxa 2004-07-07
  • 打赏
  • 举报
 回复
to:net_lover(孟子E章) 怎么模仿
孟子E章 2004-07-07
  • 打赏
  • 举报
 回复
http://www.lostinet.com/en/LWSampleCS/ComboBox/SelectPhoto.Aspx
cpp2017 2004-07-07
  • 打赏
  • 举报
 回复
自己写个这个控件,用tabel模拟实现
孟子E章 2004-07-07
  • 打赏
  • 举报
 回复
只能模仿
vzxq 2004-07-07
  • 打赏
  • 举报
 回复
attention
DropDownList 下拉图片
1.有些特殊的情况：DropDownList 想加载图片。 2.下拉菜单直接加载图片，比较明显。 3.主要是自定义一个控件当成DropDownList使用。 4.另外的操作都一样。 5.提供直接可以运行的代码。
asp.net常用Web服务器控件
实例 实现上传图片 实例 GridView控件显示商品缩略图 4.3 控件的超级链接 实例 ImageButton按钮超级链接查看商品详细信息 实例 GridView控件中使用超级链接模板列查看详细信息 实例 DataList控件模板中使用...
实验三 ASP.NET服务器控件练习
一个DropDownList显示网站类型，另一个DropDownList显示具体的网站，显示网站的下拉列表框会根据显示网站类型的下拉列表框中所选值的不同而显示不同的网站。FFF.ASPX,FFF.ASPX.CS 三、实验指导 略。
第7章 数据绑定控件
实例208 自定义分页并结合下拉列表实现页次 切换 328 实例209 结合分页模板PagerTemplate实现 自定义分页 330 实例210 在GridView控件中动态添加模板列 331 实例211 带上下箭头排序并实现查询数据为 空显示表头 334...
.NET社区

62,046

社区成员

669,049

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章