Question

我想在导航栏按钮中打开jQuery Mobile中的弹出窗口。问题是按下按钮后的小亮点（默认为蓝色）。桌面浏览器在200ms左右后删除突出显示。在移动设备上，此突出显示有时在打开弹出窗口后可见，并且在关闭时不会被删除。在Nexus 4/10上选择文件有些问题。我还添加了一个文件选择：在移动设备上永远不会删除突出显示，在桌面浏览器上这不是更大的问题。

我创造了一个小提琴来说明问题：

http://jsfiddle.net/eGFaG/1/

HTML：

<div data-role="ui-page">
    <div data-role="ui-header">    
        <div data-role="navbar">
            <ul>
                <li><a id="popupTest">Popup function</a></li>
                <li><a href="#popup" data-rel="popup">Popup Link</a></li>
                <li><a id="fileUpload">File select</a></li>
            </ul>
        </div>
    </div>
    <div data-role="ui-content">
        <input type="file" id="fileSelect" data-role="none">
        <div id="popup" data-role="popup">
            <fieldset data-role="controlgroup" data-inset="true">
                <input type="checkbox" name="option1" id="option1" value="true">
                <label for="option1">Option #1</label>
                <input type="checkbox" name="option2" id="option2" value="true">
                <label for="option2">Option #2</label>
                <input type="checkbox" name="option3" id="option3" value="true">
                <label for="option3">Option #3</label>
            </fieldset>
        </div>
    </div>
</div>

JS：

$('#popupTest').click(
    function(event) {
        $('#popup').popup(
            'open', {
                x: $(this).offset().left + $(this).width() / 2,
                y: $(this).offset().top + $(this).height()
            }
        );

        event.preventDefault();
        return false;
    }
);

$('#fileUpload').click(
    function(event) {
        $('#fileSelect').click();
        event.preventDefault();
        return false;
    }
);

CSS：

#popup fieldset {
    margin-top: 0;
    margin-bottom: 0;
}

#fileSelect {
    position: absolute;
    top: -10000px;
    left: -10000px;
}

我正在寻找通过官方jQuery Mobile选项来阻止蓝色突出显示的一般方法。修改样式表可能是一个选项，但突出显示也存储在控件的内部。我不知道是否还有其他副作用。

以编程方式打开弹出窗口时，桌面浏览器上没有突出显示。在页脚上使用导航栏时，必须以更复杂的方式计算位置（页脚固定？）。

那么我错过了什么选择吗？在单击导航栏按钮时以编程方式执行某些操作时，使用event.preventDefault（）并返回false或缺少其他内容是否正确？

如何通过链接打开jQuery Mobile弹出窗口而不用导航栏突出显示？

0 个答案: