无刷新点文本框，自动出现下拉框

webcode

浏览: 5942733 次
性别:
来自: 上海

最近访客更多访客>>

ap950

u012363178

wangyy

ybfjavaeye

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (7533)

社区版块

存档分类

2013-02 ( 78)
2013-01 ( 83)
2012-12 ( 121)
更多存档...

JavaScript HTML

<html>
<head>
<title>add</title>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<scripttype="text/javascript">

functionShowName(sName)
{
document.getElementById('sel_class').value=sName;
}
functionDiv()
{
this.obj=null;
this.objWidth=0;
this.objHeight=0;
this.IntervalID=null;
this.bProcessing=false;
this.bOpen=false;
this.nStep=12;

this.Init=function(sValue)
{
if(!this.obj)return;
this.obj.innerHTML=sValue;
this.obj.style.display='none';
this.obj.style.position='absolute';
this.obj.style.overflow='hidden';
}
this.Show=function()
{
if(!this.bProcessing&&!this.bOpen)
{
if(!this.obj)return;
this.obj.style.width='0px';
this.obj.style.height='0px';
this.obj.style.display='block';
this.obj.style.zIndex='1';
varself=this;
this.IntervalID=setInterval(function(){self.DoShow();},10);
this.bProcessing=true;

//隐藏select
varoSel=document.getElementsByTagName('select');
for(i=0;i<oSel.length;i++)
{
//oSel[i].style.visibility='hidden';
}
}
}
this.DoShow=function()
{
varnWidth=this.obj.offsetWidth;
varnHeight=this.obj.offsetHeight;
varnPerX=this.nStep;
varnPerY=nPerX/(this.objWidth/this.objHeight);
varnTempX=nWidth+nPerX;
varnTempY=nHeight+nPerY;
this.obj.style.width=nTempX+"px";
this.obj.style.height=nTempY+"px";
if(this.obj.offsetWidth>=this.objWidth||this.obj.offsetHeight>=this.objHeight)
{
this.obj.style.width=this.objWidth+"px";
this.obj.style.height=this.objHeight+"px";
clearInterval(this.IntervalID);
this.IntervalID=null;
this.bProcessing=false;
this.bOpen=true;
}
}

this.Close=function()
{
if(!this.bProcessing&&this.bOpen)
{
if(!this.obj)return;
varself=this;
this.IntervalID=setInterval(function(){self.DoClose();},10);
this.bProcessing=true;
}
}

this.DoClose=function()
{
varnWidth=this.obj.offsetWidth;
varnHeight=this.obj.offsetHeight;
varnPerX=this.nStep;
varnPerY=nPerX/(this.objWidth/this.objHeight);
varnTempX=nWidth-nPerX;
varnTempY=nHeight-nPerY;
if(nTempX>0&&nTempY>0)
{
this.obj.style.width=nTempX+"px";
this.obj.style.height=nTempY+"px";
}
else
{
this.obj.style.display='none';
clearInterval(this.IntervalID);
this.IntervalID=null;
this.bProcessing=false;
this.bOpen=false;

//显示select
varoSel=document.getElementsByTagName('select');
for(i=0;i<oSel.length;i++)
{
oSel[i].style.visibility='visible';
}
}
}
}
</script>
</head>
<body>
<tablecellspacing="0"cellpadding="0"width="98%"align="center"border="0">
<tbody>
<tr>
<tdclass="show_main">
<formonsubmit="returncheck()"action="?action=save"method="post">
<tablecellspacing="1"cellpadding="0"width="100%"border="0">
<tbody>
<tr>
<tdid="errormsg"colspan="2">
</td>
</tr>
<tr>
<tdclass="form_label">
<labelfor="sel_class">
select</label>
</td>
<tdclass="form_input">
<inputclass="text"id="sel_class"onclick="oClassDiv.Show()"value="">
<divid="class">
</div>
<scripttype="text/javascript">
varsHTML="<divstyle=\"width:200px;height:250px;border:1pxsolid#000;background-color:#fff;position:absolute;left:0px;top:0px;cursor:default\">";
sHTML+="<divstyle=\"height:20px;line-height:20px;color:#fff;background-color:#a00d06;padding-left:12px;font-weight:bold;\">";
sHTML+="select<spanstyle=\"cursor:pointer;font-weight:normal;\"onclick=\"oClassDiv.Close();\">[close]</span></div>";
sHTML+="<divstyle=\"height:230px;line-height:20px;overflow-y:scroll;\"><ulstyle=\"list-style:none;margin:0;\">";
sHTML+="<listyle='padding-left:12px;'><inputtype=radioname=class_idvalue=7onclick='ShowName(\"11111\")'/>job</li>";
sHTML+="<listyle='padding-left:12px;'><inputtype=radioname=class_idvalue=1onclick='ShowName(\"22222\")'/>james</li>";
sHTML+="<listyle='padding-left:12px;'><inputtype=radioname=class_idvalue=2onclick='ShowName(\"33333\")'/>kobi</li>";
sHTML+="<listyle='padding-left:12px;'><inputtype=radioname=class_idvalue=3onclick='ShowName(\"44444\")'/>oneal</li>";
sHTML+="</ul></div>";
sHTML+="</div>";
varoClassDiv=newDiv();
oClassDiv.objWidth=202;
oClassDiv.objHeight=252;
oClassDiv.obj=document.getElementById('class');
oClassDiv.Init(sHTML);
</script>
</td>
</tr>
</tbody>
</table>
</form>
</td>
</tr>
</tbody>
</table>
</body>
</html>

分享到：