Best IT Recipes

Creating a template / persistent header / footer template in jQuery Mobile and PhoneGap

I'm immersed in creating a mobile application using jQuery Mobile / PhoneGap. I use this sample template to start with, which uses HTML / JS to create pages. Instead of having all the <page> tags in one html file, he split it up to make it easier to edit.

Since I will have a separate file for each page, what's the best way to enable tempated header / footer? I saw it only where you need to copy and paste the entire footer,> navigator code to each HTML page. This does not seem to be the case. For example, if you want to change one menu item, you need to go to each page and change it.

What solution do I miss?

Maybe I just don't understand jQuery Mobile. For example, is their sidebar that they use for their documents a copy of the sidebar code and pasted onto each page? It does not make sense. This is the same idea as the question I ask here about the footer.

http://jquerymobile.com/test/docs/pages/page-cache.html

This is what I have that seems wrong (and $.live('pageinit') not working). This HTML code applies to all HTML pages:

 <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;">

And 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>'); }
+60
jquery jquery-mobile cordova footer
Feb 05 2018-12-12T00:
source share
6 answers

I tried to solve this problem for several days, and I came very close to the solution. I am using the following HTML:

 <body> <div data-role="page" id="page"> <div data-role="header"> <h1 id="title">Title</h1> </div><!-- /header --> <div data-role="content" id="content"> <p>Loading...</p> </div><!-- /content --> <div data-role="footer" id="footer" data-position="fixed"> <div data-role="navbar" id="navbar"> </div> </div><!-- /footer --> </div><!-- /page --> </body>

And I created the following functions for loading menu / content using ajax:

 $(document).on('pageinit', "#page", function() { // for example: displayFooter(); loadContent("main"); loadMenu("default"); }); function loadContent(location) { return $('#content').load("views/content/"+location+".html", function() { $(this).trigger('create'); }); } function loadMenu(location) { $("#menu").remove(); $("#navbar").remove(); $("#footer").html('<div data-role="navbar" id="navbar">'); $("#navbar").html('<ul id="menu"></ul>'); $("#menu").load("views/menus/"+location+".html", function() { $("#menu").parent().navbar(); }); return true; }

.trigger('create'); and .navbar(); - These are the methods necessary to properly manage the JQM style, however there is another small mistake. The menu position (which is set using css top: ... px) is sometimes incorrect and moves to the correct position after the first press. Really close though!

Edit:. By setting #footer to position: fixed; , the minor error that I mentioned above disappeared. It is also easy to create a method that calculates top (in px) for #footer if the position is incorrect due to the top JQM value.

+22
Feb 11 '12 at 19:35
source share
— -

Something like that:

 function getText() { //return footer text here } $("div:jqmData(role='page')").live("pagebeforecreate",function() { // get find the footer of the page var $footer =$(this).page().find('div:jqmData(role="footer")') // insert it where you want it... }

you could just define role = footer in getText and just check if this is defined ... if not, add it.

+3
Feb 09 '12 at 3:10
source share

If you really want to do it right, you need to look into the js framework like Thorax or JavascriptMVC.

In the JMVC application, you can do this from any view:

 <div data-role="page"> <%== $.View('./header.ejs') %> <div data-role="content"> ... </div> <%== $.View('./footer.ejs') %> </div>

jQuery Mobile is really only useful for the progressive layout and styling of mobile devices. For the actual part of MVC, you need the MVC framework.

The examples for jQuery Mobile are also mainly for creating mobile websites, which, since they take pages from the server, suggest that the code is reused on the server side. The phonegap application is a whole beast, because you will generate these pages on the fly or from local static files. This was an MVC framework, as you would build your pages with controllers, views, help assistants, and model classes. You connect all this with the jQuery mobile device by listening to the pagebeforeshow event, as shown on the jQm documentation page on the pages.

+3
Feb 09 2018-12-12T00:
source share

Depends on how you load the relevant pages.

If you use rel = "external" - there is no AJAX, each page will be reloaded completely.

If you use regular JQM-AJAX, JQM will take the page and bind it to the existing DOM. Think of your first page as your "anchor" page, which all subsequent pages are added / removed.

In the second case, you can specify the data-append-all-pages = "true" attribute for the elements that you want to have on each page.

Then just listen to the corresponding event (pagebeforeshow?) And add the elements with the above label to the new page before it is shown. Thus, elements should only be installed on the first page, and then automatically added to any subsequent page that is retracted and added to the DOM.

I am studying this right now with a login form that I need on every page outside the login and should not end with duplicate # someID input.

EDIT - Possible Solution

Place the appropriate element on the first page and add unique attributes, for example:

  <div data-role="navbar" data-unique="true" data-unique-id="log"> // full navbar </div>

All other pages just get a unique element container

 <div data-role="navbar" data-unique="true" data-unique-id="log"></div>

Then use this script:

 $('div:jqmData(role="page")').live('pagebeforehide', function(e, data) { // check page you are leaving for unique items $(this).find('div:jqmData(unique="true")').each(function(){ // more or less 1:1 stickyFooter var uniqueID = $(this).jqmData("unique-id"), nextPage = data.nextPage, nextUnique = nextPage && nextPage.find( "div:jqmData(unique-id='"+uniqueID+"')" ), nextMatches = nextUnique.length && nextUnique.jqmData('unique-id') === uniqueID; // if unique items on previous and new page are matching if ( uniqueID && nextMatches ) { nextUnique.replaceWith( uniqueID ); $(this).jqmData("unique-id").empty(); } }); });

Of course, this would mean that you need a unique container on each page. But then you just carry its contents when you go through the application. Should work for me and avoid using the same login form 2 times in the DOM.

In addition, you could freely edit its contents, for example, adding an active class.

+2
05 Feb '12 at 20:24
source share

We have not yet found a good way to do this. Thus, we actually process this dynamically in our custom js file. Search for a closing container - and then dynamically add a footer after closing the last content.

+2
Feb 06 2018-12-12T00:
source share

Do not use pageinit, the events that you should listen to are pagecreate and pageshow, pagecreate is called when the page first loads, but not when going to the page, for example. on the back button. While pageview fires every time a page is displayed, so just attach a live listener to the showhow event for each page where you add a footer (assuming the footer can change, otherwise use pagecreate).

I have a longer example that shows how to properly bind an event to another question: stack overflow

And yes, a great solution is to just use the PHP / CF include, which I use instead of JS.


EDIT My bad one, it seems that pageinit is now used instead of pagecreate (see here) , but it still costs every time that the page is fired, so you can use the ones you need

+2
Feb 06 2018-12-12T00:
source share


More articles:


All Articles