jquery mobile static footer navbar

问题

Found this answer In Jquery mobile, Header and footers are always hiding, when clicking inside the page?

The only difference that I have is I do NOT have data-fullscreen="true" but have a data-cache="never".

footer bar keeps fading in and out. Just want footer navbar to be on bottom of screen without fades.

<div data-role="page" data-cache="never" id="mainPage">
<script>
$('#mainPage').live('pagecreate', function (event) {

    $.fixedToolbars.setTouchToggleEnabled(false);

});
</script>
....header stuff
<div data-role="content" id="mainContent">
....
</div>
<div data-role="footer" data-theme="a" data-position="fixed">
  <div data-role="navbar">
    <ul>
      ... 4 li's
    </ul>
  </div>
</div>
</div>

EDIT

Here we go. How is this done? http://jquerymobile.com/test/experiments/scrollview/#../../docs/toolbars/footer-persist-a.html

Header loads immediately but not footer. Would like for my footer to act like the header of that page.

回答1:

This is fixed in jQueryMobile 1.1 rc1. See this link

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

回答2:

It should work.
There's just one problems when you're scrolling a list: the navbar disappears but it reappers as soon as you stop scrolling. You can see a fiddle here.

回答3:

        $(document).bind("mobileinit", function() {
             $.support.touchOverflow = true;

              $.mobile.touchOverflowEnabled = true;
              $.mobile.fixedToolbars.setTouchToggleEnabled(false);

        });

This works. Tested in Android 2.3

来源：https://stackoverflow.com/questions/6962961/jquery-mobile-static-footer-navbar

标签

jquery

jquery-mobile