accessing tab content across various pages jquery mobile

Question

I am using Jquery mobile in my application. Earlier, I was using single page and was navigating across the page using hash tags but now I am planning to break it into multiple pages. So which is the better approach,i.e. to use the tags or to make separate files for that ?

And after separating the html file into multiple how will I access the contents of the tags with data-role="page"? As earlier I was using # tag to search within the pages.

Answer 1

From the point of navigation you will use your file name instead of page #. But this is the only difference.

Which solution is better depend on what are you trying to do. If you are creating hybrid mobile app with Phonegap the go with single HTML file / multiple pages approach. If you are just creating a mobile version of your site the use multiple html approach.

From the point of content access nothing is changing at all. You will still use your page id to access its content.

For example, if you have just made a transition from page index.html to second.html and second.html has a page with an id second. Then you will access its content with:

$('#second [data-role="content"]').....

Basically if you dont count navigation nothing else will change. Your content will still be loaded into the DOM.

EDIT :

I forgot, one thing will change. In case of multiple html files solution, first page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM. So you will need to also worry about this. If you want to find more about it take a look at my other answer: Why I have to put all the script to index.html in jquery mobile