Core ui选择不适合移动用户

Question

Core ui选择不适合移动用户

lib*_*ire 12 javascript php forms jquery

我正在使用脚本"core ui select"在我的网站上设置我的表单样式.一切都适用于桌面用户,但是一段时间以来,有很多用户使用手机报告.他们说他们不能修改选项,因为它是灰色的.

所以我使用名为"默认用户代理"的firefox插件进行了测试,并将浏览器代理切换到iPhone.然后我意识到整个表单停止工作,但仅限于移动用户

这是一个测试页面,如果你想直接看到问题(你必须更改你的用户代理来重现这个bug):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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Blu*_*ill 5

这不是一个bug.在移动设备上执行时,插件(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();
        }
    }

Run Code Online (Sandbox Code Playgroud)

第176行的评估:$.browser.mobile点击时评估为真(我在Chrome中模拟了移动设备),因此跳过了剩余代码.

修复:删除该行显示下拉就好了.

归档时间：	10 年，9 月前
查看次数：	680 次
最近记录：	10 年，9 月前