Dynamically include header and footer jquerymobile and phongap applying CSS correctly

Posted: September 23, 2013 in web

Note: the trick is the “$(this).trigger(‘create’);” line below.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Mobile App</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>        
    </head>
    <body>
        <div data-role="page" id="login-page">
            <div data-role="header" class="app-header">
            </div>
            <div data-role="content">
                <form action="account.html">
                    <label for="username">Username:</label>
                    <input type="text" name="username" id="username" value="">
                    <label for="password">Password:</label>
                    <input type="password" name="password" id="password" value="" autocomplete="off">
                    <div id="login-submit">
                        <input type="submit" value="Login" data-icon="check" data-theme="b">
                    </div>
                    <div id="login-cancel">
                        <input type="button" value="Cancel" data-icon="delete" data-theme="b">
                    </div>
                </form>
            </div><!-- /content -->
            <div data-role="footer" data-position="fixed" class="app-footer">
            </div><!-- /footer -->
        </div><!-- /page -->        
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();

$(document).bind("pageinit", function() {
    $('.app-header').load("template/header.html", function() {
        $(this).trigger('create');
    });
    $('.app-footer').load("template/footer.html", function() {
        $(this).trigger('create');
    });
});

        </script>
    </body>
</html>

/template/header.html

<h1>Fixed Header!</h1>

/template/footer.html

                <div data-role="navbar">
                    <ul>
                        <li><a href="a.html">Facebook</a></li>
                        <li><a href="b.html">Twitter</a></li>
                        <li><a href="c.html">Call Us</a></li>
                        <li><a href="index.html">Login</a></li>
                    </ul>
                </div><!-- /navbar -->
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s