jquery-mobile - Jquery mobile：禁用“点击切换”固定页眉和页脚

Question

我在 jquery mobile 中禁用了点击切换，如下所示。

$(function(){ $('[data-role=header],[data-role=footer]').fixedtoolbar({ tapToggle:false }); });

遵循Jquery mobile 上的 Q：禁用“点击切换”固定页眉和页脚

现在我的内容被页眉剪裁了。寻找解决方案。

Answer 1

当我尝试使用 fixedtoolbar({ tapToggle:false }); 以编程方式禁用 Taptoggle 时遇到了同样的问题；

我很幸运在我的标题中使用了 data-tap-toggle="false" 标记，而不是完全禁用了 taptoggle。虽然添加 data-tap-toggle="false" 可能需要做更多的工作，但至少它可以工作！

我在尝试自己解决这个问题时发现了这个问题，并决定尝试一下。我在这里找到了信息：http: //jquerymobile.com/test/docs/toolbars/bars-fixed-options.html

文档在 tap-toggle 部分下说明了这一点：此选项也作为数据属性公开：data-tap-toggle="true"。我决定将其设置为 false，它解决了我的问题。不再有轻触，也不再重叠！我的大多数标题现在看起来像这样：

<div data-role="header" data-id="jqmheader" data-position="fixed" data-tap-toggle="false">

Answer 2

要以编程方式更改它，您需要执行以下操作：

$.mobile.toolbar.prototype.options.updatePagePadding = false;
$.mobile.toolbar.prototype.options.hideDuringFocus = "";
$.mobile.toolbar.prototype.options.tapToggle = false;

用 jQuery Mobile 1.4.0 尝试过

Answer 3

FYI
This is how it is done programatically with JQuery:

$("[data-role=header], [data-role=footer]").fixedtoolbar({ tapToggle: true });

This will toggle from the default state set in the page container tag.

Answer 4

如果您在单个页面上调用它，则不会发生这种情况。

例如

$("#pageA , #pageB , #pageC").bind('pageinit',function() { $(this).find("[data-role=header] , [data-role=footer]").固定工具栏({ tapToggle: false }); });

使用 1.2.0 JQM

Answer 5

或者就像这样：

<div data-role="page" ... data-hide-during-focus="" ... >...</div>

在 jQuery Mobile 1.4.5 上测试

Answer 6

默认情况下，jquery mobile 会自动计算页面填充。因此，您的页面似乎不正确，这就是为什么内容位于标题下方并且看起来被剪裁的原因。

您可以通过 JQM 禁用自动更新页面填充并自行设置。在这里查看 updatePagePadding 属性：http: //jquerymobile.com/test/docs/toolbars/bars-fixed-options.html

还需要进行修复，如下所述：https ://github.com/jquery/jquery-mobile/issues/4223

问候。