js手机滑块模仿

点击文本框滑动选值

手机屏幕上的上下翻滚菜单使用JS实现.经过十几个小时的折磨,终于有了最初版本.实现办法如下描述:

一.要求和方法

1.一个input输入框,点击后弹出一个翻滚菜单盖在其上,翻滚选好后,点击确定.所选值就到了文本框里.
2.实现这个翻滚菜单使用如下办法:一个菜单DIV,里面是若干菜单项SPAN.菜单DIV设置有竖直滚动条,这样就能滚动菜单项.

菜单DIV的上层,有个包裹层,主要作用是遮住菜单DIV的滚动条.包裹层上还有一层菜单框,用于包裹所有菜单DIV,操作它的显示
和隐藏可以方便地打开关闭菜单.最后,INPUT 菜单框 按钮 放到一个DIV里.结构和主要设定如下:

div // 最外层包含所有 (相对定位)
 input // 输入框
 button // 按钮
div // 所有菜单外层 (相对定位,初始隐藏,长度设为input长度稍大于它)
 div // 菜单外层,为遮菜单DIV滚动条(相对定位,超出隐藏,宽度百分比值等于100/菜单DIV个数)
  div // 菜单面板层(滚动条,高度为菜单项3倍)
   span // 菜单,若干个(块级)
........可有多个菜单面板
3.遮挡滚动条:实现过程中,遮挡菜单DIV滚动条时费了很大劲.最终实现的办法是:将菜单DIV的宽度设为再加上它的滚动条的宽度.
这样一来,上层就显示不出多余的滚动条了,"超出部分隐藏了".那又如何得到菜单DIV宽度,和其滚动条宽度呢.这样.

var scrollbarWidth = menuDiv.offsetWidth - menuDiv.scrollWidth;
意思是offsetWidth这个包含滚动条在内的宽度,减去scrollWidth这个包含滚动区域不包含滚动条的宽度.
然后将菜单DIV的width设为offsetWidth加上上面得出的滚动条宽度值.就实现了
4.菜单出现位置:点击之后,要让它出现在INPUT的上层,左对齐,并且遮住INPUT.这主要是一个算TOP和LEFT的过程.它与INPUT同
级,父级为最外层DIV.这个要有相对定位属性.后面是用JQUERY的position()获取INPUT的位置的,如果不设的话
就错大了.TOP值好算,就是INPUT的outerHeight(),为了盖住INPUT,所以是负值,在前面加-号.
LEFT值和INPUT的左位移设置一样.其实可设为0,因为它们同级,且INPUT没有定位(默认0).但是为了让菜单跟着
INPUT框移动,则有必要这种灵活的计算.
5.遮住文本框:在手机上点击INPUT文本框时,出弹出手机上的输入法.但目前并不需要这个输入,所以不能让它弹出来.解决办法是
不让它点击文本框,在文本框上加一个透明的层,大小和文本框一样,刚好遮住.点击时实际上点这一层.

 

确定

↑

中国 美国 俄国 英国 法国 德国

↓

↑

亚洲 北美 东欧 西欧 地中海 波罗地海

↓

↑

雪地 极光 白马 拿破仑 元首 角斗士

↓

 

当前手机视口