标题: input模仿下拉菜单的问题 [打印本页]

---

作者: fangzhen    时间: 2008-11-14 13:24     标题: input模仿下拉菜单的问题

<style>
.nslostfocus{
background-color:#FFE4BA;
border:1px solid #CE7E00;
}
.nsgetfocus{
background-color:#FFF0D9;
border:1px solid #4A2E00;
}

.list{
border:1px solid #CE7E00;
background:#FFF0D9;
overflow: scroll;
overflow-x: hidden;
scrollbar-face-color:#FFF0D9;
position:absolute;
z-index:10;
}
.list ul{
list-style:none;
margin:0px;
padding:0px;
font-size:12px;
}
.list li{
margin:0px;
padding:0px;
float:left;
}
.list li img{
margin:1px;

}
.list a{
text-decoration:none;
display:block;
height:18px;
line-height:18px;
text-indent:4px;
text-align:left;
}
.list a:link, .list a:visited{
color: #2A1B00;
background-color:#FFF0D9;
}
.list a:hover, .list a:active{
background-color:#C2C660;
}

</style>
<script defer="defer">
for(i=0;i<document.getElementsByTagName("input").length;i++){
if(document.getElementsByTagName("input").type=="text" ){
document.getElementsByTagName("input").gf=0;
document.getElementsByTagName("input").onmouseover=nsgetfocust;
document.getElementsByTagName("input").onmouseout=nslostfocust;
document.getElementsByTagName("input").onclick=nsshowlist;
}
}

function nsgetfocust(){
event.cancelBubble=true;
with (event.srcElement) {
if (tagName.toLowerCase()=="input"){
className="nsgetfocus";
}
}
}
function nslostfocust(){
event.cancelBubble=true;
with (event.srcElement) {
if (tagName.toLowerCase()=="input"){
if(gf==0)className="nslostfocus";
}
}
}

function nsshowlist(){
event.cancelBubble=true;
with (event.srcElement) {
if (tagName.toLowerCase()=="input"){
if(gf==1){
document.getElementById(name+"list").style.visibility="hidden"
gf=0;
}else{
document.getElementById(name+"list").style.visibility="visible"
gf=1;
}
}
}
}

function selectIt(obj,content){
document.getElementById(obj).value=content;
for(i=0;i<document.getElementsByTagName("div").length;i++){
if(document.getElementsByTagName("div").className=="list" ){
document.getElementsByTagName("div").style.visibility="hidden"
document.getElementsByTagName("input").gf=0;
}
}
}



</script>
<input name="UserBornSign" class="nslostfocus" type="text" size="8" readonly /> 点一下它
<div id="UserBornSignlist" class="list" style="left:10px; top:40px; width:70px; height:100px; visibility:hidden; ">
<ul style="width:70px;">
<li><a href="java script:selectIt('UserBornSign',' ')"> </a></li>
<li><a href="java script:selectIt('UserBornSign','鼠')">鼠</a></li>
<li><a href="java script:selectIt('UserBornSign','牛')">牛</a></li>
<li><a href="java script:selectIt('UserBornSign','虎')">虎</a></li>
<li><a href="java script:selectIt('UserBornSign','免')">免</a></li>
<li><a href="java script:selectIt('UserBornSign','龙')">龙</a></li>
<li><a href="java script:selectIt('UserBornSign','蛇')">蛇</a></li>
<li><a href="java script:selectIt('UserBornSign','马')">马</a></li>
<li><a href="java script:selectIt('UserBornSign','羊')">羊</a></li>
<li><a href="java script:selectIt('UserBornSign','猴')">猴</a></li>
<li><a href="java script:selectIt('UserBornSign','鸡')">鸡</a></li>
<li><a href="java script:selectIt('UserBornSign','狗')">狗</a></li>
<li><a href="java script:selectIt('UserBornSign','猪')">猪</a></li>
</ul>
</div>

---

欢迎光临 PHP开发笔记 (http://phpvi.com/)

Powered by Discuz! 6.1.0