社区
ASP
帖子详情
有没有好的asp的动态下拉菜单?
ccchhhwww
2006-04-17 09:21:59
如题
...全文
1085
10
打赏
收藏
有没有好的asp的动态下拉菜单?
如题
复制链接
扫一扫
分享
举报
写回复
配置赞助广告
用AI写文章
10 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
sxsgssgs
2006-04-18
打赏
举报
回复
搜联动,太多了.
ccchhhwww
2006-04-18
打赏
举报
回复
没有了吗
yemeiqiang
2006-04-18
打赏
举报
回复
相信大家都见过一些软件里的图片下拉选择控件吧?喏,OICQ中就有。但网页上的你见过没有?小阳今天就为你推出你心怡已久的这个控件,下面演示中就是了!效果还可以吧?心动不如行动,我们来看下是怎么弄出来的。演示
我们先来看下做出这个控件需要解决哪些问题。
第一,图片下拉列表框是一个层,它在选择提示框点击时出现,出现后在选择图片或窗体点击时再隐藏。
它出现时位置要在选择提示框的正下方;隐藏实际上可以把它的位置定在屏幕之外(style.pixelLeft=-800)。
第二,图片下拉列表框的位置。选择提示框不是层,图片下拉列表框出现的位置要在选择提示框的正下方,就必须读取选择提示框在窗体中的绝对位置,不能受选择提示框的位置和屏幕分辨率的影响。
我们可以用“Object.offsetLeft”和“Object.offsetTop”获取对象(Object)在其父容器(offsetParent)中的相对位置。于是我们可以用while()循环向高一级父容器一层一层读取相对位置,它们的代数和就是该Object在最上层容器(窗体)中的绝对位置了。
第三,图片下拉列表框的滚动,要保证自动滚动到相应的图片出现在列表框的顶端:当手动滚动停止时,如果滚动条趋势是向下滚动,则自动继续向下滚动直至最近的图片在列表框的顶端,反之亦然。
例子中我们将所有供选图片命名为“0.gif”、“1.gif”……“9.gif”,并放在“head”目录下。下面我们以实际程序解决这些问题:
Code:
<!--建立表单-->
<form name="myform" method="post" action="">请选择图片:
<div id="imgBox"><!--这里是图片下拉选择器的位置--></div>
<input name="myhead" type="text" id="myface" size="10" value="">
</form>
<script language="JavaScript">
<!--
var imgWidth=64; //列表框中图片的宽度;
var imgHeight=64; //列表框中图片的高度;
var imgSrc="head/数字序号.gif"; //供选图片的路径。"数字序号"四字将在程序中替换为0,1,2...,不要手工更改为数字 ;
var selectedNo=7; //默认选定的图片序号;
var selecteSize=2; //下拉列表框中显示的图片数;
/* 以下把图片和层输出在"imgBox"的位置:
我们用变量"isin"记录鼠标是否在该控件上;用CSS定义下拉列表框的滚动条,"overflow-x:hidden;overflow-y:scroll;"指水平方向不滚动,竖直方面滚动;
用for()循环依次把图片输出到下拉列表框。
*/
var myHTML='<SPAN onmouseover="isin=true" onmouseout="isin=false">';
myHTML+='<table width="1" onclick="showlist(this)" title="选择提示框" border="0" cellspacing="0" cellpadding="0"><tr><td><img name="imgselected" border=1 src="'+imgSrc.replace("数字序号",selectedNo)+'" WIDTH='+(imgWidth)+' HEIGHT='+imgHeight+'></td><td valign=top><img src="menu.gif"></td></tr></table>';
myHTML+='<DIV onscroll="scrollud()" id="imgBox" \n';
myHTML+='style="position:absolute;left=-800;top=0;background-color:#FFFFFF;border: 1px solid #000000;overflow-x:hidden;overflow-y:scroll; width:'+(imgWidth+20)+'px; height: '+imgHeight*selecteSize+'px">';
for(i=0;i<10;i++){
myHTML+="<img listID="+i+" src='"+imgSrc.replace("数字序号",i)+"' alt='"+imgSrc.replace("数字序号",i)+"' width="+imgWidth+" height="+imgHeight+" onclick='selectme(this)' onload='if(init)init()'><BR>";
}
myHTML+= "</DIV></SPAN>";
imgBox.outerHTML=myHTML;
/* 以下控制下拉列表框的出现或隐藏 */
function showlist(obj){//这个函数将在选择提示框点击时激活
//如果列表框已经出现,这次点击则隐藏:
if(imgBox.style.pixelLeft!=-800){imgBox.style.pixelLeft=-800; return;}
//读取选择提示框在窗体中的绝对位置:
//在父容器中的相对位置:
var mytop=obj.offsetTop;
var myleft=obj.offsetLeft;
//依次读取父容器在更高一级父容器中的相对位置:
while(obj=obj.offsetParent){
myleft+=obj.offsetLeft;
mytop+=obj.offsetTop;
}
//现在已经得到选择提示框的绝对位置myleft和mytop。
//下拉列表拉就出现在这个绝对位置的正下方:
imgBox.style.left=myleft;
imgBox.style.top=mytop+imgHeight+2;
}
var isin=false;
function selectme(obj){ //这个函数将在窗体点击或选定图片时激活,窗体点击中传递的参数是null。
if(!isin||obj){imgBox.style.pixelLeft=-800;} //隐藏列表框
if(obj){
//改变选择提示框中的图片和"myhead"输入框中的值:
//listID是对象的自定义属性,即在对象的标签中定义了这个属性值,现在就可以读取或改变。
myform.myhead.value=imgSrc.replace("数字序号",obj.listID);
document.p_w_picpaths["imgselected"].src=imgSrc.replace("数字序号",obj.listID);
}
}
/* 以下控制下拉列表框的自动滚动 */
var mytime=setTimeout("",0);
var pre_X=0; //这个变量用来记录滚动前滚动条的位置
function scrollud(){ //本函数在下拉列表框滚动时被激活
var current_X=imgBox.scrollTop; //记录函数激活时滚动条的位置
//判断向上还是向下滚动,并自动滚动到"imgHeight"的整数倍。
//我们改变列表框的scrollTop值时,会自动激发其onscroll事件,循环激活本函数。
if(current_X>pre_X && imgBox.scrollTop< Math.ceil(imgBox.scrollTop/imgHeight)*imgHeight){
clearTimeout(mytime);
mytime=setTimeout("imgBox.scrollTop=Math.round(imgBox.scrollTop+1);",1);
}
else if(current_X<pre_X && imgBox.scrollTop> Math.floor(imgBox.scrollTop/imgHeight)*imgHeight){
clearTimeout(mytime);
mytime=setTimeout("imgBox.scrollTop=Math.round(imgBox.scrollTop-1);",1);
}
pre_X=current_X;
}
//使列表框自动滚动到默认选定的图片位置,并给"myhead"输入框以默认值
function init(){ //本函数在每个列表框中的图片加载时激活
imgBox.scrollTop=selectedNo*imgHeight;
myform.myhead.value=imgSrc.replace("数字序号",selectedNo);
}
/* 以下使窗体点击时selectme(obj)函数被激活: */
myActivation="selectme(null)";
if(document.body.onclick)
{
eval(document.body.onclick.toString().replace('anonymous()','bodyclick()'));
document.body.onclick=new Function("bodyclick();"+myActivation);
}
else document.body.onclick=new Function(myActivation);
-->
</script>
[Ctrl+A Select All]
程序最后“使窗体点击时selectme(obj)函数被激活”部分可以用document.body.onclick=new Function("selectme(null)")简单替换之。但为了不和其它程序的窗体点击事件冲突,我们用了这段代码。详见拙作《完美解决一个事件激活多个函数》。你也可以将"myhead" 的type值设为"hide",这里为了演示,就将它显示了出来。
好了,这个控件“图片下拉选择器”已经做好了,把它应用到留言本、论坛等动态交互的网页上,真是最好不过了!
ccchhhwww
2006-04-18
打赏
举报
回复
等于没说
celerylhl
2006-04-18
打赏
举报
回复
自己写个异步调用的
ccchhhwww
2006-04-18
打赏
举报
回复
没有吗
ccchhhwww
2006-04-17
打赏
举报
回复
是下拉菜单
yeaky
2006-04-17
打赏
举报
回复
http://www.happig.net/Soft_Show.asp?SoftID=7
给个例子你,地区联运的。
ccchhhwww
2006-04-17
打赏
举报
回复
等于没说
yeaky
2006-04-17
打赏
举报
回复
自己写
想要怎么样的就怎么样的
python pip本地拒绝访问
解决Could not install packages due to an OSError: [WinError 5] 拒绝访问。 本地拒绝访问解决办法: python -m pip install
python:pip install 拒绝访问错误的解决办法
在使用pip安装某个包时,python install xxx,会报拒绝访问的错误,解决方式是修改python安装目录的权限http://blog.csdn.net/shang_jia/article/details/78323496
python升级pip命令拒绝访问,python升级pip命令没反应
大家好,小编来为大家解答以下问题,python升级pip命令中出现retrying,python升级pip命令拒绝访问,今天让我们一起来看看吧!2、升级命令:python -m pip install --upgrade pip;3、验证升级成功,再次使用pip show pip命令查看pip版本。1、首先使用pip show pip 命令查看当前pip版本;
python安装拒绝访问解决方法_使用pip安装时遇到文件拒绝访问和版本升级的问题及解决方法...
使用系统win10,使用pip安装selenium报错时的解决方法pip install selenium时提示:PermissionError: [WinError 5] 拒绝访问。: ‘c:\\program files\\python36\\Lib\\site-packages\\urllib3‘You are using pip version 9.0.1, however version...
ASP
28,402
社区成员
356,940
社区内容
发帖
与我相关
我的任务
ASP
ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
复制链接
扫一扫
分享
社区描述
ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章