当前位置：文江博客话题详情

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

发布于 2024-10-06 14:08:11 字数 390 浏览 7 评论 0原文

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

页脚在空单击事件上切换。
页脚不固定，隐藏了部分页面内容。

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

提前致谢。

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

我怎样才能阻止这种修改？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小嗲 2024-10-13 14:08:11

如果使用 1.1 或更高版本，请将 data-tap-toggle="false" 添加到页眉和页脚，如记录在此处。

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

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

If using 1.1 or later, add data-tap-toggle="false" to your header and footer, as documented here.

If you're using a version of jQuery Mobile prior to 1.1, place the following before loading jQuery Mobile:

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

回复收藏 0 原文

囍笑 2024-10-13 14:08:11

这在 jQueryMobile 1.1 rc1 中已修复。请参阅此处。

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

回复收藏 0 原文

杯别 2024-10-13 14:08:11

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

回复收藏 0 原文

荒人说梦 2024-10-13 14:08:11

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

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

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

回复收藏 0 原文

作妖 2024-10-13 14:08:11

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

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

回复收藏 0 原文

御弟哥哥 2024-10-13 14:08:11

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

回复收藏 0 原文

梦幻的味道 2024-10-13 14:08:11

我也遇到过类似的问题，页脚也没有固定在滚动条上。我的建议？ Sencha 而不是 jQueryMobile，它充满了错误并且尚未准备好用于生产。

页脚还突出显示从 URL /#page 中选定的页面，在我的例子中，事物 url 会影响页脚菜单。

回复收藏 0 原文

Smile简单爱 2024-10-13 14:08:11

我使用 jquery mobile 1.3.1，您之前所说的所有内容都不适用于我的应用程序。但我有一个解决这个错误的方法。检查我的其他帖子 JQueryMobile - 输入后固定页脚未修复焦点

$('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();
        });
});

i use jquery mobile 1.3.1, and all that you said earlier doesn't work on my app. but i've a solution for this bug. check my other post 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();
        });
});

回复收藏 0 原文