- 浏览: 640186 次
- 性别:
- 来自: 合肥
文章分类
最新评论
-
nehaoww:
754588141@qq.com,源码可以给一份吗
Struts/JSP可上传、预览服务器端文件(图片、文件、Flash、多媒体)文件组件 -
zzd_md:
把XmlTreeLoader.js 这个文件的路径改一下就好了 ...
ExtJs 实现的后台管理框架 -
llixinrui_strive:
EXT之form.load(转) -
liangzhang0929:
部门管理和用户管理的url怎么显示#,没法打开dept_lis ...
Extjs3.x Struts2 -Json-plugin学习实例 -首页框架代码 05 -
datouren:
您好想问你一下 为什么只显示根节点 其它节点不显示 目前是在一 ...
ExtJs加载本地txt格式的数据
相信大家都见过一些软件里的图片下拉选择控件吧?喏,OICQ中就有。但网页上的你见过没有?小阳今天就为你推出你心怡已久的这个控件,下面演示中就是了!效果还可以吧?心动不如行动,我们来看下是怎么弄出来的。
演示:(点击这里在新窗口中打开演示页)
我们先来看下做出这个控件需要解决哪些问题。
第一,图片下拉列表框是一个层,它在选择提示框点击时出现,出现后在选择图片或窗体点击时再隐藏。
它出现时位置要在选择提示框的正下方;隐藏实际上可以把它的位置定在屏幕之外(style.pixelLeft=-800)。
第二,图片下拉列表框的位置。选择提示框不是层,图片下拉列表框出现的位置要在选择提示框的正下方,就必须读取选择提示框在窗体中的绝对位置,不能受选择提示框的位置和屏幕分辨率的影响。
我们可以用“Object.offsetLeft”和“Object.offsetTop”获取对象(Object)在其父容器(offsetParent)中的相对位置。于是我们可以用while()循环向高一级父容器一层一层读取相对位置,它们的代数和就是该Object在最上层容器(窗体)中的绝对位置了。
第三,图片下拉列表框的滚动,要保证自动滚动到相应的图片出现在列表框的顶端:当手动滚动停止时,如果滚动条趋势是向下滚动,则自动继续向下滚动直至最近的图片在列表框的顶端,反之亦然。
例子中我们将所有供选图片命名为“0.gif”、“1.gif”……“9.gif”,并放在“head”目录下。下面我们以实际程序解决这些问题:
程序最后“使窗体点击时selectme(obj)函数被激活”部分可以用document.body.onclick=new Function("selectme(null)")简单替换之。但为了不和其它程序的窗体点击事件冲突,我们用了这段代码。详见拙作《完美解决一个事件激活多个函数》。你也可以将"myhead" 的type值设为"hide",这里为了演示,就将它显示了出来。
好了,这个控件“图片下拉选择器”已经做好了,把它应用到留言本、论坛等动态交互的网页上,真是最好不过了!
演示:(点击这里在新窗口中打开演示页)
我们先来看下做出这个控件需要解决哪些问题。
第一,图片下拉列表框是一个层,它在选择提示框点击时出现,出现后在选择图片或窗体点击时再隐藏。
它出现时位置要在选择提示框的正下方;隐藏实际上可以把它的位置定在屏幕之外(style.pixelLeft=-800)。
第二,图片下拉列表框的位置。选择提示框不是层,图片下拉列表框出现的位置要在选择提示框的正下方,就必须读取选择提示框在窗体中的绝对位置,不能受选择提示框的位置和屏幕分辨率的影响。
我们可以用“Object.offsetLeft”和“Object.offsetTop”获取对象(Object)在其父容器(offsetParent)中的相对位置。于是我们可以用while()循环向高一级父容器一层一层读取相对位置,它们的代数和就是该Object在最上层容器(窗体)中的绝对位置了。
第三,图片下拉列表框的滚动,要保证自动滚动到相应的图片出现在列表框的顶端:当手动滚动停止时,如果滚动条趋势是向下滚动,则自动继续向下滚动直至最近的图片在列表框的顶端,反之亦然。
例子中我们将所有供选图片命名为“0.gif”、“1.gif”……“9.gif”,并放在“head”目录下。下面我们以实际程序解决这些问题:
<!--建立表单--> <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" '; 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.images["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>
程序最后“使窗体点击时selectme(obj)函数被激活”部分可以用document.body.onclick=new Function("selectme(null)")简单替换之。但为了不和其它程序的窗体点击事件冲突,我们用了这段代码。详见拙作《完美解决一个事件激活多个函数》。你也可以将"myhead" 的type值设为"hide",这里为了演示,就将它显示了出来。
好了,这个控件“图片下拉选择器”已经做好了,把它应用到留言本、论坛等动态交互的网页上,真是最好不过了!
发表评论
-
jQuery flashSlider
2010-08-10 22:51 2125jQuery flashSlider -
JavaScript操作表单项总结
2010-07-19 21:16 12801、表单判文本框空 表 ... -
JavaScript 设置和获得Radio的选中值-转
2010-07-10 08:15 1962function setCheckedValue(radioN ... -
JS中判断对象是否为空
2010-07-09 16:52 2431if (typeOf(x) == "un ... -
JavaScript几秒种后,进行动作
2009-08-24 07:03 1922<script language="JavaS ... -
js访问xml之 各种对象的属性和方法
2009-08-24 06:46 4360节点对象属性 childNodes—返回节点到子节点的节点列 ... -
js获取单元格内容
2009-08-21 22:46 2841<table width="100%" ... -
在模式窗口中打开连接不开新窗口
2009-08-21 22:36 1691* 在模式窗口中打开连接不开新窗口 在<head> ... -
javaScript实现checkbox多项选择
2009-08-21 22:27 1708<script language="javaS ... -
JavaScript数字插件
2009-08-21 21:20 1255说明 1 只能输入0到9和小数点 2 只能粘贴数字 3 不能拖 ... -
JavaScript日历控件
2009-08-21 14:52 3854第一步:引用JavaScript(calendar.js)文件 ... -
货币输入框
2009-08-21 13:30 1364第二步:引用JavaScript(moneyinput.js) ... -
各种js页面跳转代码
2009-08-21 13:18 5209第一种: <scrip ... -
常用JavaScript語句
2009-08-21 13:13 10421.document.write(""); ... -
JavaScript表单提交到弹出窗口
2009-08-21 13:08 2762方法: 用window.open弹出一个窗口,通过第二个参 ... -
window.showModalDialog的基本用法
2009-08-21 12:58 4174window.showModalDialog的基本用法 sh ... -
用javaScript动态修改html组件form的action属性
2009-08-21 12:53 8874用javaScript动态修改html组件form的actio ... -
JavaScript读写Cookie
2009-08-21 12:50 1654//读取cookie的函数 function readco ... -
setTimeout和setInterval的使用
2009-08-19 10:11 1736Internet的基本结构是建立在一系列静态状态上的,这些静态 ... -
javascirpt网页常用代码集合
2009-08-19 10:10 11001、oncontextmenu="window.ev ...
相关推荐
一个日期下拉选择器,年月日联动显示,准确显示日期(包括闰年日期),可自定义日期范围。
本项目是基于Layui和ZTree的树形下拉选择器设计源码,包含118个文件,其中75个GIF文件,24个JavaScript文件,6个CSS文件。该系统是一个基于layui和ztree的树形下拉选择器,提供了丰富的功能,包括异步加载、点击回调...
下拉菜单选择器.rar下拉菜单选择器.rar下拉菜单选择器.rar下拉菜单选择器.rar下拉菜单选择器.rar下拉菜单选择器.rar
Vue 2.x的下拉时间选择器(小时|分钟|秒),支持灵活的时间格式
内容索引:脚本资源,Ajax/JavaScript,下拉菜单,日期选择器 一个基于JavaScript 的日期下拉选择器,年、月、日联动显示,准确显示日期(包括闰年日期),可自定义日期范围。
样图: ... 注:浮层选择器源码来源于网络(Apache授权),“jquery.dropdownTomcdropdown.3.js”为原创编写。
其实纯css也是可以实现的,但是会有一些限制,必须如要显示的菜单需要作为鼠标悬浮元素的子元素,选择器优先级等等。废话不多说,直接看效果! 样式有点丑。 代码实现(JavaScript) 1、获取要悬浮的对象和菜单对象...
Vue2时间选择器Vue 2.x的下拉时间选择器(小时|分钟|秒),具有灵活的时间格式支持。 寻找Vue 1.x版本吗? 请检查vue-timepicker(支持Vue 1.x)演示可以看到Vue2 Timepicker:light_bulb:已为死回购充电:battery:Vue...
vue日期选择器控件
下拉多个选择器,带有搜索和过滤器。 版本 1.1.1 执照 麻省理工学院执照 依存关系 [jquery.js] 基本用法 JavaScript $ ( selector ) . Selectify ( ) ; 贡献 非常欢迎您为这个项目做出贡献。 该库是用javascript和...
实例013 日期选择器 21 1.3 窗口的动画效果 26 实例014 页面自动滚动 26 实例015 打开窗口特殊效果 27 实例016 动态显示窗口 29 实例017 慢慢放大的窗口 30 实例018 下降式浏览器 32 实例019 旋转的窗口 33 实例020 ...
此日期范围选择器组件创建一个下拉菜单,用户可以从中选择日期范围。 我在为改进构建 UI 时创建了它,它需要一种方法来选择报告的日期范围。 功能包括限制可选择的日期范围、可本地化的字符串和日期格式、单一日期...
基于layui的全国省市区区域选择器组件,主要要放到服务器环境运行,不然运行不了
13.31 用JavaScript制作的特色时钟 13.32 自定义的日历 13.33 生日提醒器 13.34 时间的倒影 13.35 使用正则表达式验证日期 13.36 全面的日期选择功能 13.37 全球的时间查看表 13.38 无刷新定时取数据 13.39 取当月的...
14.9.3 继承和上下文选择器 14.10 定位元素和层 14.10.1 绝对定位 14.10.2 〈div〉容器 14.10.3 绝对定位 14.10.4 相对定位 14.10.5 z索引和三维 14.11 如何与JavaScript融合...
13.31 用JavaScript制作的特色时钟 13.32 自定义的日历 13.33 生日提醒器 13.34 时间的倒影 13.35 使用正则表达式验证日期 13.36 全面的日期选择功能 13.37 全球的时间查看表 13.38 无刷新定时取数据 13.39 取当月的...
实例360 日期选择器 580 实例361 弹出提示对话框并重定向网页 584 实例362 打开指定大小的新窗口并居中显示 586 15.2 弹出确认对话框 588 实例363 删除数据前弹出确认对话框 588 实例364 安全退出前弹出...
calendarToDropdown 仅需几行JavaScript,即可将日历日期选择器转换为下拉列表。 我在WordPress网站上将它与插件结合使用。
Qualtrics下拉排序 在Qualtrics中对问题进行排序非常有用,但对移动性不太友好。 此自定义Qualtrics问题采用排序问题类型,并创建一个下拉选择器以添加到排序框中。 请参阅的演示