Javascript 如何修复 jQuery Mobile 的固定页脚？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4377062/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fix jQuery Mobile's fixed footer?
提问by Tomer Lichtash
Using jQueryMobile, I've included data-role="footer" data-position="fixed"in the markup, but two bugs persist:
使用 jQueryMobile，我已包含data-role="footer" data-position="fixed"在标记中，但仍有两个错误：
- Footer toggles on a null click event.
- Footer isn't fixed, and hides some of the page content.
- 页脚在空点击事件上切换。
- 页脚不固定，隐藏了一些页面内容。
I'm testing with iPhone 3g. Any ideas?
我正在用 iPhone 3g 进行测试。有任何想法吗？
Thanks in advance.
提前致谢。
UPDATE: It seems that the click event modifies the current page's footer, and changes ui-fixed-overlayto ui-fixed-inline, which of course is styled display:noneto prevent the other pages' footers from appearing.
更新：似乎单击事件修改了当前页面的页脚，并更改ui-fixed-overlay为ui-fixed-inline，这当然是display:none为了防止其他页面的页脚出现。
How can I prevent this modification?
我怎样才能防止这种修改？
回答by Roi
If using 1.1 or later, add data-tap-toggle="false"to your header and footer, as documented here.
如果使用1.1 或更高版本，请添加data-tap-toggle="false"到您的页眉和页脚，如此处所述。
If you're using a version of jQuery Mobile prior to 1.1, place the following before loading jQuery Mobile:
如果您使用的是1.1 之前的 jQuery Mobile 版本，请在加载 jQuery Mobile 之前放置以下内容：
$(document).bind("mobileinit", function(){
$.mobile.touchOverflowEnabled = true;
}); // remove
回答by Simon Vane
回答by neavilag
With jquery.mobile-1.0a4 adding the data-position="fixed" to the footer section is working as desired in Iphone, Android and Chrome
使用 jquery.mobile-1.0a4 将 data-position="fixed" 添加到页脚部分可以在 Iphone、Android 和 Chrome 中按需要工作
回答by MGG
The current "answer" may be a bit misguided. Using touchOverflow may help you in the short-term, but that will soon be going away. If anyone were to read the jQuery mobile blog, they would notice this blurb posted on Jan. 10:
目前的“答案”可能有点误导。使用 touchOverflow 可能会在短期内对您有所帮助，但这很快就会消失。如果有人阅读 jQuery 移动博客，他们会注意到 1 月 10 日发布的这个简介：
Heads up: touchOverflow to be deprecated in 1.1 – When we first introduced the touchOverflow feature, we saw it as a good way to leverage the native overflow support in iOS to bring true fixed toolbars and smoother transitions, even if it was for a fairly narrow set of devices at the time. Now with the significant changes to fixed headers and transition planned for 1.1, these will improve the experience in an almost identical way as touchOverflow, except it will work on a lot more platforms and with less complexity so we've decided to retire this feature. It will be deprecated at 1.1 and removed at 1.2. We do have future plans for addressing overflow regions with internal scrolling so a lot of the work we've done on touchOverflow will be re-purposed.
注意：touchOverflow 将在 1.1 中被弃用——当我们第一次引入 touchOverflow 功能时，我们认为这是利用 iOS 中的原生溢出支持带来真正固定的工具栏和更平滑的过渡的好方法，即使它是针对相当窄的当时的一组设备。现在，随着 1.1 计划对固定标题和过渡的重大更改，这些将以与 touchOverflow 几乎相同的方式改善体验，除了它可以在更多平台上运行并且复杂性更低，因此我们决定停用此功能。它将在 1.1 中弃用并在 1.2 中删除。我们确实有使用内部滚动解决溢出区域的未来计划，因此我们在 touchOverflow 上所做的许多工作将被重新利用。
Apologies for posting this as an answer, but I am unable to comment at this point.
很抱歉将此作为答案发布，但此时我无法发表评论。
回答by greencustard
We had this problem and used a combination of iScroll (v3) and a nice jquery mobile wrapper for iScroll. It works perfectly. See all the details here:
我们遇到了这个问题，并使用了 iScroll (v3) 和一个很好的 iScroll 的 jquery 移动包装器的组合。它完美地工作。在此处查看所有详细信息：
http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html
http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html
回答by Nikhil Patil
I did very simple thing.Found solution with CSS just set proper "min-height" for the content.The will stop footer jumping on the content of the page.
我做了很简单的事情。用 CSS 找到的解决方案只是为内容设置了适当的“最小高度”。这将停止页脚在页面内容上跳转。
回答by Ary Wibowo
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
我使用 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();
});
});
回答by Sandi Laufenberg-Deku
Re: Footer isn't fixed, and hides some of the page content.
回复：页脚不是固定的，并且隐藏了一些页面内容。
I struggled with this problem, too. Turned out that I had to move the ending content div tag to be BEFORE the start of the Footer. If the footer is inside the content div tag - and you turn on >>> data-position="fixed" <<<, then my footer isn't fixed.
我也遇到了这个问题。结果我不得不将结束内容 div 标签移动到页脚开始之前。如果页脚在内容 div 标签内 - 并且您打开 >>> data-position="fixed" <<<，那么我的页脚未固定。
I don't know about your other problem, "Footer toggles on a null click event" as I don't know how to re-create that in my app.
我不知道你的另一个问题，“页脚在空点击事件上切换”，因为我不知道如何在我的应用程序中重新创建它。
USING...
使用...
- JQuery Mobile 1.3.2
- Cordova
- The footer has a navbar and an advertising banner inside it.
- jQuery 移动版 1.3.2
- 科尔多瓦
- 页脚内部有一个导航栏和一个广告横幅。
回答by Alon Carmel
I've had similar issue with the footer not being fixed on scroll either. My suggestion? Sencha and not jQueryMobile, its loaded with bugs and not ready for production.
我也遇到过类似的问题，即页脚也没有固定在滚动条上。我的建议？Sencha 而不是 jQueryMobile，它充满了错误，还没有准备好投入生产。
The footer also highlights the selected page from URL /#page thing url affects the footer menu in my case.
在我的例子中，页脚还突出显示了来自 URL /#page thing url 影响页脚菜单的选定页面。
