[英]Multi Select <select> box on mobile devices
我有一个界面,它使用具有 css 设置高度的多选列表框来填充其他列表。
基本上:
<select multiple="multiple" size="5" style="height:150px;">
<option value='1'>one</option>
<option value='2'>two</option>
<option value='3'>three</option>
<option value='4'>four</option>
</select>
<select multiple="multiple" style="height:150px;"></select>
使用 jQuery,基本上你在第一个中选择一些东西,然后将它们移动到第二个。
这很好用,我们的用户在非移动环境中喜欢它。 但是,在 android 平板电脑、手机、iphone 和 ipad 上,列表看起来是空的,直到您单击并显示内置的滚动选择界面。 所以当它们被添加到第二个列表时你看不到新的。
这个非常简单的 jsFiddle 显示了我正在谈论的选择框不显示它们的内容:
有没有办法覆盖这种行为而不必制作我自己的自定义东西,或者对移动设备使用完全不同的方式来做到这一点?
如果没有办法做到这一点,那么实现类似移动友好的东西的最佳方法是什么?
编辑:
这是此界面外观的基本图片,任一框中的列表可能很长或很短。 但它们有一个固定的高度,以保持一致性:
编辑:我无法想象我是唯一遇到这种情况的人! 必须有一种方法可以使移动浏览器正常运行。
移动浏览器中的这种行为是为了改善用户体验而设计的。 根据Safari Web 内容指南
使用 Select 元素 如果您在网页中使用 select HTML 元素,iOS 会显示一个自定义选择控件,该控件针对使用手指作为输入设备选择列表中的项目进行了优化。 在 iOS 上,用户可以滑动以滚动列表,然后点击以从列表中选择一个项目。
这是说:
我建议不要对抗它,而是为了移动用户而利用它
使用媒体查询为桌面和移动浏览器的select
元素应用不同的 css;
如果显示的选项数量足够小,请考虑使用<input type="checkbox">
而不是select
因为它的行为在浏览器中是一致的。
我一直在使用类似的界面,它对桌面用户非常有用,但在多选不显示为多行可滚动列表的触摸设备上完全不直观。
看起来您需要一个完全自定义的控件,但我发现有两个 Jquery 控件似乎实现了此功能(尽管方式略有不同)。
Eric Hynds Jquery UI 多选: http ://comsim.esac.esa.int/rossim/3dtool/common/utils/jquery/ehynds-jquery-ui-multiselect-widget-f51f209/demos/index.htm
准粒子可排序可搜索多选小部件: http : //quasipartikel.at/multiselect/
这两个在手机大小的设备上都显得有些繁琐,但特别是 Quasi Partikel 版本,它使用项目左侧的小“+”来添加它,而 Eric Hynds 允许点击整个项目来选择/取消选择. 两者都可以通过移动特定样式进行改进,以增加我认为的关键元素的大小。
据我了解,我认为根据选择的选项重定向到另一个页面会容易得多,除非您首先没有选择此选项。
我不明白为什么你不能只使用复选框的下拉列表。 这些几乎在任何地方都兼容,当然也可以在所有智能手机上兼容。
<select name="Dropdown1">
<option value="o1">Option 1</option>
<option value="o2">Option 2</option>
<option value="o3">Option 3</option>
<option value="o4">Option 4</option>
</select>
要么
<input type="checkbox" name="checkbox" value="o1">Option 1<br>
<input type="checkbox" name="checkbox" value="o2">Option 2
( http://www.w3schools.com/html/tryit.asp?filename=tryhtml_select2和http://www.w3schools.com/html/html_forms.asp )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.