我有一个 jQuery Mobile 滑动面板,用户可以从中选择一些电子阅读器类型的选项(突出显示、搜索、定义等)。问题是当滑动面板打开并处于事件状态时,用户无法从页面中选择文本。
结果是,要使用这些功能,用户必须选择他们想要突出显示的文本,然后打开滑动面板以突出显示它。显然这不是一个很好的用户体验。
我已经搜索了 SO 和 jQuery Mobile 文档,但没有找到在对话框、弹出窗口或面板处于事件状态时启用用户选择的方法。这里有人对这个主题有什么想法吗?
谢谢。
最佳答案
只需更改一些CSS即可解决。
第一部分
jQuery Mobile 弹出窗口和面板有一个隐藏的覆盖 div,在弹出窗口和面板打开时覆盖全屏高度和宽度。
您只需要做一件事。使用一些浏览器工具查看 HTML 结构并检查覆盖 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 - 在 jQuery Mobile 对话框/弹出窗口/面板后面启用文本选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19856201/