核心 ui 选择不适用于移动用户
Posted
技术标签:
【中文标题】核心 ui 选择不适用于移动用户【英文标题】：Core ui select not working for mobile users 【发布时间】：2015-08-03 13:16:13 【问题描述】：我正在使用脚本“core ui select”在我的网站上设置表单样式。对于桌面用户来说，一切都很好，但是一段时间以来，有很多来自使用手机的用户的报告。他们说他们无法修改该选项，因为它是灰色的。
所以我使用名为“默认用户代理”的 firefox 插件进行了测试，并将浏览器代理切换到 iPhone。然后我意识到整个表单停止工作，但仅适用于移动用户
如果您想实时查看问题，这里有一个测试页面（您必须更改您的用户代理才能重现该错误）： https://www.ni-dieu-ni-maitre.com/test_mobile.php
这是页面的代码。
<script type="text/javascript" src="https://www.no-gods-no-masters.com/scripts/jquery-1.8.2.min.js"></script>
<link href="https://www.no-gods-no-masters.com/scripts/css/core-ui-select.css" media="screen" rel="stylesheet" type="text/css">
<link href="https://www.no-gods-no-masters.com/scripts/css/jquery.scrollpane.css" media="screen" rel="stylesheet" type="text/css">
<script>
$(document).ready(function()
$('#impression').coreUISelect();
);
</script>
</head><body>
<select class="b-core-ui-select__dropdown" name="impression" id="impression">
<option>Printing on front</option>
<option>Printing on back</option>
</select>
<script src="https://www.no-gods-no-masters.com/scripts/js/jquery.core-ui-select.js"></script>
</body>
</html>
【问题讨论】：
我刚刚意识到，即使是 Core UI 选择脚本的演示页面也有这个错误...所以这不是我的网站的错误，而是 core-ui-select 脚本...有人知道如何解决这个问题吗？我可以支付工作费用 UI 核心并不是真正为移动设备设计的。你可以试试这个：touchpunch.furf.com我添加了这个小脚本来使用 uicore 滑块，并在我必须测试的所有移动设备上完美运行，包括 iPAD、iPhone、三星 Galaxy s3-4-5。希望有帮助 【参考方案1】：这不是错误。在移动设备上执行时，插件 (core-ui-select) 显式跳过旨在显示下拉列表的 DOM 操作代码。 要看到这一点，您可以在 jquery.core-ui-select.js 行号 176 中设置断点。
CoreUISelect.prototype.showDropdown = function()
this.domSelect.focus();
this.settings.onOpen && this.settings.onOpen.apply(this, [this.domSelect, 'open']);
if($.browser.mobile) return this; //176: this skips the rest on mobile
if(!this.isSelectShow)
this.isSelectShow = true;
this.select.addClass('open');
this.dropdown.addClass('show').removeClass('hide');
if(this.isJScrollPane) this.initJScrollPane();
this.scrollToCurrentDropdownItem(this.dropdownItem.eq(this.getCurrentIndexOfItem()));
this.updateDropdownPosition();
第 176 行的评估：$.browser.mobile 在点击时评估为真（我在 Chrome 中模拟了移动设备），因此跳过了其余代码。
修复：删除线显示下拉就好了。
【讨论】：
以上是关于核心 ui 选择不适用于移动用户的主要内容，如果未能解决你的问题，请参考以下文章
赛普拉斯测试 Material-UI 日期选择器不适用于 Github 操作
ContentInsets 不适用于 UITableView