CODEWITHSUNDEEP
cordovajquery-mobile
Churchill
Churchill

Reputation: 1607

jQuery mobile multi page phonegap application

I would like to develop a phonegap application that has a login page, if login is successfulm user gets to see #page1, based on details entered on #page1, user can either go to #page2 or #page3. How can I implement such a scenario? I also came across this link, if am implementing the kind of layout the 'sage' uses in that post, how do I get my other.html pages included in my application?

What is the best way to implement multiple pages that are either shown/hidden programatically based on user input and not clicks on Hyperlinks? That is my question.

Upvotes: 2

Views: 5862

Answers (1)

Akilan
Akilan

Reputation: 1717

Jquery mobile also do the same thing show hidden concept in the multi page transition. You can do it in your own way also. That is your wish.

Normally page transition can be done by this below example in jquery mobile phonegap,

<html>
<head>
<!-- HERE YOU CAN ADD ALL YOUR INCLUDES -->
<head>
<body>

<!-- This page will show first -->
<div data-role="page" id="index">

    <div data-role="header" data-position="inline" id="indexheader" >
        <h1>Page 1 Heading</h1>
    </div><!-- /header -->

    <div data-role="content">
        <h3>page Content</h3>
    </div><!-- /content -->

    <div data-role="footer"  data-position="fixed">
    <h3>Footer Text</h3>
    </div><!-- /footer -->

<!-- SECOND PAGE -->
<div data-role="page" id="pagetwo">

    <div data-role="header" data-position="inline" id="page2header" >
        <h1>Page 2 Heading</h1>
    </div><!-- /header -->

    <div data-role="content">
        <h3>page Content</h3>
    </div><!-- /content -->

    <div data-role="footer"  data-position="fixed">
    <h3>Footer Text</h3>
    </div>

<!-- THRIRD PAGE -->
<div data-role="page" id="pagethree">

    <div data-role="header" data-position="inline" id="page3header" >
        <h1>Page 3 Heading</h1>
    </div><!-- /header -->

    <div data-role="content">
        <h3>page Content</h3>
    </div><!-- /content -->

    <div data-role="footer"  data-position="fixed">
    <h3>Footer Text</h3>
    </div>
</div>
</body>
</html>

And you have to do the second or third page showing using javascript event.

Based on the condition, Load your pages like this,

$.mobile.changePage($('#pagetwo')); /*page navigation the particular where data shown*/
$("#index").trigger("pagecreate"); /*This is like a page refresh in jquery*/

Upvotes: 2

Related Questions