"Masterpage"-Layout with jQuery Mobile in a PhoneGap app

Question

Is it somehow possible to create something like a masterpage (asp.net) in jQuery Mobile? I'm developing an mobile app (using phonegap if its important) and there I have the same header and footer (some buttons to navigate in the app) at all pages. What I want to do is to create this footer just once... not in each div (page container).

Greetings

edit: thats the markup as I want it to be, but displayed is only page1 or page2 without header/footer

<div data-role="header">
        <h1>Header</h1>
</div>

    <div data-role="content">
        <div data-role="page" id="page1" data-title="Page 1">
            Page 1
        </div>
        <div data-role="page" id="page2" data-title="Page 2">
            Page 2
        </div>
    </div>

    <div data-role="footer" data-position="fixed">
        <table>
            <tr>
                <td>
                    <a href="#page1">Page 1</a>
                </td>
                <td>
                    <a href="#page2">Page 2</a>
                </td>
            </tr>
        </table>
    </div>

This feature is in proposal stage. Check this out http://stackoverflow.com/questions/6875404/why-does-html5-not-include-a-way-of-loading-local-html-into-the-document — Liam, Jan 16 '12 at 22:37
HTML "includes" as in PHP for example are maybe interesting but not what I'm looking for... I could use an iFrame also for now. What I want to do is to use jQuery Mobile navigation as its provided but i dont want to change the whole page but just a part of the page. — Dominik Kirschenhofer, Jan 17 '12 at 08:55

score 1 · Answer 1 · answered Mar 02 '12 at 21:24

You could look at this good tutorial here which explains how to structure your code so you reuse the header and footer.

It basically creates a wrapper method called Load which dynamically loads a page into the dom, at a given location (usually your content placeholder).

Dominik Kirschenhofer · Accepted Answer · 2012-06-25T13:40:18.320

After coming back to this problem I have decidet to use backbone.js. This is a javascript MVC framework.

For more informations see:

http://backbonejs.org/

http://backbonetutorials.com/

Also something I have found during my research:

http://kmalakoff.github.com/knockback/ Have not tried it yet, but it sounds very nice. This framework combines backbone.js and knockout.js (an MVVM framework) together.

Hope this helpes other peoples with the same problem!

score -2 · Answer 3 · edited Jan 17 '12 at 11:06

If you are using Asp.Net to develop your JQM, merely use the the Asp.Net master page. The body could look something like ...

<body>

<div data-role="page" data-theme="c" id="pgMaster">
    <div data-role="header" data-nobackbtn="true" data-theme="a">
        <asp:ContentPlaceHolder ID="PageTitleContent" runat="server" />
    </div>
    <div data-role="content">
        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
    </div>
    <div data-role="footer" data-id="nav" data-theme="a">
        <h4 style="font-size: 75%">
            <%= AppCode.Common.CGlobals.CopyRight %>
        </h4>
    </div>
    <asp:ContentPlaceHolder ID="ScriptContent" runat="server" />
</div>
</body>

My site at http://Cta.yyyz.com is built using Aps.Net with enableviewstate=false in web.Config so your are really creating basic html pages - no bloat.

I'm developing a mobile application with PhoneGap (as explained ;) ). There you dont have a server part for your pages... you have to develop html+javascript which gets deployed on the mobile device. So the .html and .js files are "hard" on the device => no asp.net =/ — Dominik Kirschenhofer, Jan 17 '12 at 11:32

"Masterpage"-Layout with jQuery Mobile in a PhoneGap app

3 Answers3