Response title
This is preview!
- Screen name: johnsmith21
johnsmith21's Profile
1 Posts
2 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- 05-Feb-2012 03:20 PM
- Forum: jQuery Mobile
I'm diving into writing a mobile app with jQuery Mobile/PhoneGap. I'm using this sample template to start from, which uses HTML/JS to create the pages. Rather than have all the
<page>tags in one single html file, he's got it split up so it's easier to edit.Since I will have a separate file for each page, what's the best way to include the tempated header/footer? I've only seen it where you need to copy and paste the whole footer->navbar code into each HTML page. This doesn't seem like it should be. For example, if you want to change one menu item, you need to go into each page and change it.
What's the solution that I'm missing?
This is what I've got that doesn't seem right (and `$.live('pageinit')` isn't working). This HTML is what goes on each HTML page:- <div id="mainFooter" data-position="fixed" data-id="mainFooter" data-role="footer" class="ui-footer ui-bar-a ui-footer-fixed fade ui-fixed-inline" role="contentinfo" style="top: 58px;">
- </div>
And the JS- $.live('pageinit', function(event) {
- displayFooter();
- });
- function displayFooter()
- {
- $('#mainFooter').html('<div data-role="navbar" class="nav-glyphish-example" data-grid="d">' +
- '<ul>' +
- '<li><a href="#" id="menuitem1" data-icon="custom">Menu Item 1</a></li>' +
- '<li><a href="#" id="menuitem2" data-icon="custom">Menu Item 2</a></li>' +
- '<li><a href="#" id="menuitem3" data-icon="custom">Menu Item 3</a></li>' +
- '</ul>' +
- '</div>');
- }
- «Prev
- Next »
Moderate user : johnsmith21