Question

I’m building a mobile app with Cordova, Backbone for the MVC structure and jQuery Mobile for UI.

This works well except for the user experience while loading a new page. Actually a new page is created dynamically, and when it’s ready, jquery mobile handles the page transition to this page. In a mobile browser this transition is slower than in a classic browser, so while page is loading the user sees a blank white screen and then appears the new page.

The matter is about my header/footer bar. I’d like it to keep showing while the content is loading, so the user will see the header/footer and only a blank/white content during the transition.

So this is a classic page structure:

<div data-role="page">
    <div data-role="header"></div>
    <div data-role="content"></div>
    <div data-role="footer"></div>
</div>

For me the easiest way to go is like that:

<div data-role="header"></div>
<div data-role="page">
    <div data-role="content"></div>
</div>
<div data-role="footer"></div>

And fix the content with CSS positioning.

But I’d like to find something smarter.

What do you think of having a single JQM page, with Backbone just updating the <div data-role="content"> for each route? What about JQM rendering? And what about transitions?

Answer 1

Documentation: http://jquerymobile.com/demos/1.1.0/docs/toolbars/footer-persist-d.html

Basically you put a data-role="footer" element in each page like this:

<div data-role="footer" data-id="foo-footer" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="a.html">Friends</a></li>
            <li><a href="b.html">Albums</a></li>
            <li><a href="c.html">Emails</a></li>
            <li><a href="d.html" >Info</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->

Notice the data-id, it must be the same on all data-role="footer" elements to take advantage of the persistent toolbar option. The data-role="footer" element also must have the data-position="fixed" attribute.

Here is a demo: http://jsfiddle.net/SpRAA/