Im developing a hypbrid app using IBM Workligth, with a single html file containing all application pages, like:
<div data-role="page" id="page1">
//page1 specific
</div>
<div data-role="page" id="page2">
//page2 specific
</div>
How do I switch between the pages? It seems like this should be really simple, but I can't find out how.
Thanks in advance.
You should probably also mention that you are using jQuery Mobile (data-role attribute in your HTML tags...), because that's the key to your question.
jQuery Mobile provides the ability to create multi-page applications. There are two approaches:
You should consider one of the above approaches, depending on how "heavy" your app is going to be (how many pages, the contents of each page, etc...).
jQuery Mobile's documentation website explains the above concept: http://demos.jquerymobile.com/1.4.3/pages/
jQuery Mobile provides an API method called changePage. Using it, you will be able to traverse between "pages".
For example:
A button then when tapped will show another "page" (here, a DIV).
<a href="#" data-role="button" id="button" onclick="$.mobile.changePage('page2', {transition: 'flip'})">load page2</a>
In the context of a Worklight application, you must keep in mind that Worklight is a single-page application, meaning that navigating between "pages" must be done in a way that keeps the Worklight framework in the loop, otherwise Worklight features will stop functioning.
I suggest to skim through the various past questions on this topic: https://stackoverflow.com/search?q=%5Bworklight%5D+multipage+is%3Aquestion
Finally, here are some example Worklight 6.1 projects:
