1

I am starting a jquery mobile/phonegap application. And would like to know if there is any way I can keep my code in seperate files so it is easier to manage. From all the reading I have done on jquery mobile it looks like all of your pages are in one file and are just seperated by divs like <div data-role="page" id="page-one"></div>. I guess I could try to make some type of a makefile that concatenated them all together, but it seems that most apps are pretty lengthy that they should have a solution for this. Keeping all the code in one file just seems impossible to maintain.

JQuery demo, three pages, all one source file: http://demos.jquerymobile.com/1.1.0/docs/pages/multipage-template.html

Chase Roberts
  • 9,082
  • 13
  • 73
  • 131
  • 2
    JQM works for both multi pages and single page (each page in a separate html file). If you use the latter, place js code for this page inside page div not in head. JQM uses ajax to load pages, so head tag is loaded on first page but on the rest it's neglected. Use JQM 1.4 latest version not 1.x. – Omar Jan 01 '14 at 21:14

3 Answers3

0

I think my personal API is what you are searching for:

https://github.com/charnekin/api

Demo example: http://yopo.es/cordovapi/

JSG33kC0d3
  • 209
  • 4
  • 9
0

jQuery Mobile allows you to have the pages in separate files. Obviously in each file must conform to the structure of the markup pages. To point to another page in the link instead of the id you specify the correct file name. If the file then you enter multiple jquery mobile pages must also specify the id.

Flatlineato
  • 1,066
  • 15
  • 32
0

You can just use normal links with jQuery mobile:

http://demos.jquerymobile.com/1.4.0/navigation/

It will "hijack" the link and use transitions to give you a native like animation. As Flatlineato pointed out you need to make each page confirm to the required markup, and you'll need to repeat your headers/footers etc on each included page.

Or you can use more complex solutions to dynamically change the content of your page, which can be stored in multiple files, like this other SO post:

including the header and footer in jquery mobile multiple page site

But I would also agree with Leo and say the jQuery mobile isn't the best choice for Phonegap, it's not that well optimized, and runs slower in the Phonegap webkit view than it does in native safari.

I've also switched to a custom navigation system and dropped jQM early on in my Phonegap development, but that was over a year ago, more recent versions may work better.

Community
  • 1
  • 1
Pete
  • 4,542
  • 9
  • 43
  • 76
  • I thought that the iOS webView was a complete safari browser. I don't know why I thought that I couldn't link to other pages. Maybe because I was thinking I wanted to do crazy animations in between pages or something.. – Chase Roberts Jan 02 '14 at 18:04
  • jQuery mobile will turn the normal links into "crazy" animations by default, I'm fairly sure. It's been a while since I've used it but that was one of their selling points. Also there is loads of stuff all round the net about UIWebView not being as good as Mobile Safari: http://taitems.tumblr.com/post/52823302883/ios-7-mobile-safari-for-front-end-developers, http://iao.fi/myposts/uiwebview, plus stuff on SO as well: http://stackoverflow.com/questions/17796149/is-uiwebview-js-performance-is-slower-than-mobile-safari-on-ios-6-7 – Pete Jan 02 '14 at 18:30
  • Also it is a complete browser, but it is much slower than Mobile safari. It's still a webkit rendering engine and you can still get some nice animations on it, but you have to be really careful with your Javascript and know all the mobile optimisation tricks – Pete Jan 02 '14 at 18:31