Question

我有一个jQuery Mobile幻灯片面板，用户可以从中选择一些电子阅读器类型选项（突出显示，搜索，定义等）。问题是当滑动面板打开并处于活动状态时，用户无法从页面中选择文本。

结果是，要使用这些功能，用户必须选择要突出显示的文本，然后打开滑动面板以突出显示它。显然不是一个非常好的用户体验。

我搜索了SO和jQuery Mobile文档，并且在对话框，弹出窗口或面板处于活动状态时找不到启用用户选择的方法。这里有没有人对这个问题有任何想法？

感谢。

Answer 1

可以解决你只需要更改一些CSS。

第一部分

jQuery Mobile弹出窗口和面板有一个隐藏的叠加div，覆盖全屏高度和宽度，同时弹出窗口和面板打开。

你只需要做一件事。使用一些浏览器工具查看HTML结构并检查overlay div的名称，然后将其设置为此css属性：

display: none;

如果它只有类名，你需要这样做：

display: none !important;

如果您愿意，我甚至可以为您创建一个有效的例子。

第二部分

现在这部分很棘手，适用于弹出窗口。 jQuery Mobile js代码通过javascript阻止背景文本选择。

它可以手动修复，基本上你需要修改jQuery Mobile javascript文件，未压缩的文件。在完成所有更改后再次压缩它。

打开jQuery Mobile 1.3.2 js文件（未压缩版本），转到第8505行，它看起来像这样：

if ( tgt !== ui.container[ 0 ] ) {
    $tgt = $( e.target );
    if ( 0 === $tgt.parents().filter( ui.container[ 0 ] ).length ) {
        $( document.activeElement ).one( "focus", function( e ) {
            $tgt.blur();
        });
        ui.focusElement.focus();
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
    } else if ( ui.focusElement[ 0 ] === ui.container[ 0 ] ) {
        ui.focusElement = $tgt;
    }
}

将其更改为：

if ( tgt !== ui.container[ 0 ] ) {
    /*$tgt = $( e.target );
    if ( 0 === $tgt.parents().filter( ui.container[ 0 ] ).length ) {
        $( document.activeElement ).one( "focus", function( e ) {
            $tgt.blur();
        });
        ui.focusElement.focus();
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
    } else if ( ui.focusElement[ 0 ] === ui.container[ 0 ] ) {
        ui.focusElement = $tgt;
    }*/
}

现在可以使用背景选择了。如果您使用较旧的jQuery Mobile 1.3.1或1.3，只需找到相同的功能并执行相同的操作。

在jQuery Mobile Dialog / Popup / Panel后面启用文本选择

1 个答案:

第一部分

第二部分