61,112
社区成员
发帖
与我相关
我的任务
分享关于按钮图标和下拉框的问题(请进)
我做了一个可输入的下拉框
由一个text,一个下拉图层,和一个下拉按钮或下拉框组合成的,但是不论按钮还是下拉框总有不尽人意的地方,问题如下.
我的bottom 图标value设为6 高度宽度各为18px 想做一个下拉按钮,但是图标不能显示在按钮中间,总是显示在靠下的位置
我又试了用下拉框,但是单击后是跳出空的下拉表,不能直接把焦点转到我自己做的图层上去.
有没有什么好的解决办法?
由一个text,一个下拉图层,和一个下拉按钮或下拉框组合成的,但是不论按钮还是下拉框总有不尽人意的地方,问题如下.
我的bottom 图标value设为6 高度宽度各为18px 想做一个下拉按钮,但是图标不能显示在按钮中间,总是显示在靠下的位置
我又试了用下拉框,但是单击后是跳出空的下拉表,不能直接把焦点转到我自己做的图层上去.
有没有什么好的解决办法?
...全文
请发表友善的回复…
发表回复
shizhanbei 2004-07-24
- 打赏
- 举报
gif 不能由事件激发转换,行了昨天已经好了,还有些问题自己解决,散分
woyingjie 2004-07-23
- 打赏
- 举报
你用gif不就行了吗
剩了多少事呢
剩了多少事呢
shizhanbei 2004-07-23
- 打赏
- 举报
thanks you 我已经自己抓了图,一个按下的一个没有按下的
我要做一个动画,但是按下去然后自己跳起来,但要有个时间延迟,请问javascript有没有这这时间延迟的函数?
我要做一个动画,但是按下去然后自己跳起来,但要有个时间延迟,请问javascript有没有这这时间延迟的函数?
woyingjie 2004-07-23
- 打赏
- 举报
http://free.cnyys.com/my/killerj/combo_arrow.gif
shizhanbei 2004-07-23
- 打赏
- 举报
to woyingjie(woyingjie)
你把按钮改成了图片,但是我没有这种立体图片啊,你有么?
to wanghr100(灰豆宝宝.net)
你的这些demo都不具备上面长度定死,下拉内容长度随意的实现
就像vb的下拉列表框一样的功能
你把按钮改成了图片,但是我没有这种立体图片啊,你有么?
to wanghr100(灰豆宝宝.net)
你的这些demo都不具备上面长度定死,下拉内容长度随意的实现
就像vb的下拉列表框一样的功能
ice_berg16 2004-07-22
- 打赏
- 举报
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body onload="c_cpua.value=c_cpu.options[c_cpu.selectedIndex].value">
<select name="c_cpu" style="position:absolute;top:30px; width: 150px; height: 20px; clip: rect(0 150 30 132);" onChange='c_cpua.value=this.options[this.selectedIndex].value'>
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input name="c_cpua" type="text" style="position:absolute;top:30px; width: 150px; height: 20px;>
<input type="button" name="Submit" value="结果" onClick="alert(c_cpua.value)">
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body onload="c_cpua.value=c_cpu.options[c_cpu.selectedIndex].value">
<select name="c_cpu" style="position:absolute;top:30px; width: 150px; height: 20px; clip: rect(0 150 30 132);" onChange='c_cpua.value=this.options[this.selectedIndex].value'>
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input name="c_cpua" type="text" style="position:absolute;top:30px; width: 150px; height: 20px;>
<input type="button" name="Submit" value="结果" onClick="alert(c_cpua.value)">
</body>
</html>
woyingjie 2004-07-22
- 打赏
- 举报
能不能把代码帖出来
wanghr100 2004-07-22
- 打赏
- 举报
Demo:
http://webfx.eae.net/dhtml/combobox/combo_demo.htm
Download:
http://webfx.eae.net/dhtml/combobox/ComboBox.zip
可以编辑的Select (第二版) bencalie [原作]
http://dev.csdn.net/develop/article/15/15197.shtm
可输入的select flylyke [转贴]
http://dev.csdn.net/develop/article/13/13634.shtm
http://webfx.eae.net/dhtml/combobox/combo_demo.htm
Download:
http://webfx.eae.net/dhtml/combobox/ComboBox.zip
可以编辑的Select (第二版) bencalie [原作]
http://dev.csdn.net/develop/article/15/15197.shtm
可输入的select flylyke [转贴]
http://dev.csdn.net/develop/article/13/13634.shtm
woyingjie 2004-07-22
- 打赏
- 举报
<img src=i.jpg onclick=showSel(true) style="font-family:Webdings;position:absolute;top:30;left:114;width:18px; height: 20
px;">
<option></option>
</select>
<input name="c_cpua" type="text" style="position:absolute;top:30px;left:15;width:100px; height: 20px" size="20">
<div id=haiwa style="background-color: #EEEEEE; border: 1 solid #000000;position:absolute;display:none;top:50px;left:15;
width: 140; height: 80;overflow:auto" onmouseover=this.style.height="80"; onmouseout=haiwa.style.height='80';>
<table cellpadding="0" cellspacing="1" class="optionForSel" bgcolor="White" width="120">
<SCRIPT language=JavaScript>
var i=0;
for(i=1;i<20;i++)
{
document.write("<tr onmouseover=\"this.style.backgroundColor='#0099ff'\" onmouseout=\"this.style.backgroundColor=''
"><td onclick=\"c_cpua.value=this.innerText\">第"+i+"项</td></tr>");
}
</SCRIPT>
</table>
<script>
function document.onclick(){
showSel(false)
}
function showSel(flag){
document.all.haiwa.style.display=(flag?"block":"none")
window.event.cancelBubble=true;
}
</script>
</div>
shizhanbei 2004-07-22
- 打赏
- 举报
代码如下,如果是下拉框的话就是把button改成了select 而且里面没有数据,
<input type="button" name="c_cpu" value="6" style="font-family:Webdings;position:absolute;top:30;left:114;width:18px; height: 18px;" onclick=showSel(true)>
<option></option>
</select>
<input name="c_cpua" type="text" style="position:absolute;top:30px;left:15;width:100px; height: 20px" size="20">
<div id=haiwa style="background-color: #EEEEEE; border: 1 solid #000000;position:absolute;display:none;top:50px;left:15; width: 140; height: 80;overflow:auto" onmouseover=this.style.height="80"; onmouseout=haiwa.style.height='80';>
<table cellpadding="0" cellspacing="1" class="optionForSel" bgcolor="White" width="120">
<SCRIPT language=JavaScript>
var i=0;
for(i=1;i<20;i++)
{
document.write("<tr onmouseover=\"this.style.backgroundColor='#0099ff'\" onmouseout=\"this.style.backgroundColor=''\"><td onclick=\"c_cpua.value=this.innerText\">第"+i+"项</td></tr>");
}
</SCRIPT>
</table>
<script>
function document.onclick(){
showSel(false)
}
function showSel(flag){
document.all.haiwa.style.display=(flag?"block":"none")
window.event.cancelBubble=true;
}
</script>
</div>
<input type="button" name="c_cpu" value="6" style="font-family:Webdings;position:absolute;top:30;left:114;width:18px; height: 18px;" onclick=showSel(true)>
<option></option>
</select>
<input name="c_cpua" type="text" style="position:absolute;top:30px;left:15;width:100px; height: 20px" size="20">
<div id=haiwa style="background-color: #EEEEEE; border: 1 solid #000000;position:absolute;display:none;top:50px;left:15; width: 140; height: 80;overflow:auto" onmouseover=this.style.height="80"; onmouseout=haiwa.style.height='80';>
<table cellpadding="0" cellspacing="1" class="optionForSel" bgcolor="White" width="120">
<SCRIPT language=JavaScript>
var i=0;
for(i=1;i<20;i++)
{
document.write("<tr onmouseover=\"this.style.backgroundColor='#0099ff'\" onmouseout=\"this.style.backgroundColor=''\"><td onclick=\"c_cpua.value=this.innerText\">第"+i+"项</td></tr>");
}
</SCRIPT>
</table>
<script>
function document.onclick(){
showSel(false)
}
function showSel(flag){
document.all.haiwa.style.display=(flag?"block":"none")
window.event.cancelBubble=true;
}
</script>
</div>
