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

Question

Using jQueryMobile, I've included data-role="footer" data-position="fixed" in the markup, but two bugs persist:

• 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?

Thanks in advance.

UPDATE : It seems that the click event modifies the current page's footer, and changes ui-fixed-overlay to ui-fixed-inline , which of course is styled display:none to prevent the other pages' footers from appearing.

How can I prevent this modification?

Answer 1

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

Answer 2

This is fixed in jQueryMobile 1.1 rc1. See here .

Use data-tap-toggle="false" on your footer.

Answer 3

使用jquery.mobile-1.0a4将数据位置=“固定”添加到页脚部分，在Iphone，Android和Chrome中按需运行

Answer 4

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:

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.

Apologies for posting this as an answer, but I am unable to comment at this point.

Answer 5

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

Answer 6

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:

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

Answer 7

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

Answer 8

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.

The footer also highlights the selected page from URL /#page thing url affects the footer menu in my case.

Answer 9

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.

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.