如何修复 jQuery Mobile 的固定页脚？答案

【问题标题】：How to fix jQuery Mobile's fixed footer?如何修复 jQuery Mobile 的固定页脚？
【发布时间】：2011-05-21 14:17:04
【问题描述】：

使用 jQueryMobile，我在标记中包含了data-role="footer" data-position="fixed"，但仍然存在两个错误：

页脚在空点击事件上切换。
页脚不固定，并且隐藏了一些页面内容。

我正在使用 iPhone 3g 进行测试。有什么想法吗？

提前致谢。

UPDATE：貌似点击事件修改了当前页面的页脚，将ui-fixed-overlay改为ui-fixed-inline，当然是display:none的样式，防止其他页面的页脚出现。

如何防止这种修改？

【问题讨论】：

取得了一些进展：找到了症状。关于治愈的任何想法？
嗨，您有没有找到解决页脚重绘问题的方法？我正在尝试在 jQuery Mobile rc1 版本中解决同样的问题。

标签： javascript iphone jquery mobile footer

【解决方案1】：

如果使用1.1 或更高版本，请将data-tap-toggle="false" 添加到您的页眉和页脚，如documented here。

如果您使用的是 jQuery Mobile 1.1 之前的版本，请在加载 jQuery Mobile 之前放置以下内容：

$(document).bind("mobileinit", function(){
  $.mobile.touchOverflowEnabled = true;
}); // remove

【讨论】：

谢谢。这是 2011 年 5 月发布的；猜想同时事情发生了变化。
你能链接到描述它的文档吗？它似乎不起作用（栏仍然消失并重新出现）。此外，对于其他看到此 SO 帖子的人来说，可能会有更多有趣的信息。
截至今天，当我检查 touchOverflowEnabled 不再受支持。您可以使用上面的文档链接查看官方说明。

【解决方案2】：

这在 jQueryMobile 1.1 rc1 中已修复。见here。

在页脚使用 data-tap-toggle="false"。

【讨论】：

【解决方案3】：

使用 jquery.mobile-1.0a4 将 data-position="fixed" 添加到页脚部分在 Iphone、Android 和 Chrome 中可以正常工作

【讨论】：

按需要工作？...页眉和页脚在滚动时消失（有时）然后赶上并淡入。似乎没有办法（当然除了黑客之外）创建一个 iScroll 之类的，真的，真正固定的页脚。这也不是 Beta 版的预定功能。考虑 Wink 或 iScroll 以获得真正固定的页眉或页脚。
嗯，它按设计工作。这不是一个非常受欢迎的设计决定。在这里查看一些解决方案stackoverflow.com/questions/5763619/…
我想补充一点，在我的页脚 div 上具有相同的 data-id="foo" 包括修复了我的页脚栏在按钮按下事件上更改为内联定位的问题。 jquerymobile.com/demos/1.0rc2/docs/toolbars/…

【解决方案4】：

当前的“答案”可能有点误导。使用 touchOverflow 可能会在短期内帮助您，但很快就会消失。如果有人阅读 jQuery mobile blog，他们会注意到 1 月 10 日发布的这个简介：

注意：touchOverflow 将在 1.1 中被弃用——当我们第一次引入了 touchOverflow 功能，我们认为它是一个很好的方法利用 iOS 中的原生溢出支持带来真正的固定工具栏和更平滑的过渡，即使它是用于相当狭窄的当时的一组设备。现在随着对固定的重大变化为 1.1 计划的标题和过渡，这些将改善以几乎与 touchOverflow 相同的方式体验，除了它会在更多平台上工作，复杂性更低，所以我们决定停用此功能。它将在 1.1 被弃用并在 1.2.我们确实有解决内部滚动溢出区域的未来计划，所以我们在 touchOverflow 上做了很多工作将被重新利用。

很抱歉将其发布为答案，但我目前无法发表评论。

【讨论】：

【解决方案5】：

我们遇到了这个问题，并结合使用了 iScroll (v3) 和 iScroll 的一个不错的 jquery 移动包装器。它完美地工作。在此处查看所有详细信息：

http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html

【讨论】：

【解决方案6】：

我做了非常简单的事情。使用 CSS 找到解决方案只需为内容设置适当的“最小高度”。将停止页脚在页面内容上跳转。

【讨论】：

【解决方案7】：

页脚也没有固定在滚动条上，我也遇到过类似的问题。我的建议？ Sencha 而不是 jQueryMobile，它充满了 bug，还没有准备好投入生产。

页脚还突出显示来自 URL /#page 事物的选定页面 url 在我的情况下会影响页脚菜单。

【讨论】：

煎茶看起来很不错，谢谢。我不记得是什么了，但我听说它有一些问题。
无论如何，用 Sencha 重建整个东西需要一些时间。如果同时有解决此问题的技巧，那就更好了。谢谢！
你看过这个吗？ github.com/jquery/jquery-mobile/… 它可能解决页脚未修复的问题。这是一个已知的错误。

【解决方案8】：

我使用 jquery mobile 1.3.1，而你之前所说的一切都不适用于我的应用程序。但我有这个错误的解决方案。查看我的其他帖子JQueryMobile - fixed footer not fixed after input focus

$('div:jqmData(role="page")').on('pageinit',function(){
    $(document)
        .on('focus','input, select, textarea', function(){
            $('[data-role="footer"][data-position="fixed"]').hide();
        })
        .on('blur','input, select, textarea',function(){
            $('[data-role="footer"][data-position="fixed"]').show();
        });
});

【讨论】：

【解决方案9】：

Re：页脚不固定，隐藏了部分页面内容。

我也遇到过这个问题。原来，我必须将结束内容 div 标签移动到页脚开始之前。如果页脚位于内容 div 标记内 - 并且您打开 >>> data-position="fixed"

我不知道您的其他问题，“页脚在空点击事件上切换”，因为我不知道如何在我的应用中重新创建它。

正在使用...

JQuery Mobile 1.3.2
科尔多瓦
页脚中有一个导航栏和一个广告横幅。

【讨论】：