03月28, 2012

手机网页select控件的实现.

做手机版网址导航有一段时间了.中途制作的时候遇到了很多离奇的问题.其中最让我头疼的就是头部search的实现了.

目标如下:

当我看到这个页面的第一眼的时候.

我就想到了用一个隐藏的UL在"谷歌"下面,用JS去控制列表模仿select控件.

如下图:

这不就是我朝思暮想的结果吗.

结果测试的时候杯具了.

问题:在手机上当我用我的手指头点"百度"或"易查"的时候.被下拉菜单盖住一半的百度猫爪图标总是也跟着被点击了.导致页面跳转

原因:当我的小指肚触碰易查和猫爪中间的那根线的时候.你觉得浏览器会判定易查和猫爪哪个被点击呢?

大家可能会问,谁去点那根线做什么.大家都是冲着"易查"那两个字去的.

但是...我们的手指肚却不像电脑上的鼠标.那么精确.我们的手指肚是非常大的.我的芊芊手指轻轻一点.比上面的百度猫爪图标还大.

几乎每次都是一半点在字上,一半点在猫爪图标上.

我非常小心的触碰.误操作率达到了70%以上.

后经过考虑.决定用原生的select.因为这样.才可以保证在每款手机上兼容.而且方便点击.

我的实现步骤:

外层一个固定宽的框截断.内层一个无背景无边框的select,并列一个自制下三角压住select的按钮.如下图:

在手机上的效果如下图:

木有了.

本文链接:https://75team.com/post/手机网页select控件的实现.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。