MOBILE - Login Navigation

by bizamajig

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

        <div data-role="page" id="home">
            <div data-theme="a" data-role="header">
                <h3>
                    Demo Page 1 
                </h3>
                <a data-role="button" id="prev"  data-inline="true" data-transition="slide" class="ui-disabled"  >
                    &lt;&lt;
                </a>
                <a data-role="button" id="next"  data-inline="true" data-transition="fade" >
                    &gt;&gt;
                </a>
            </div>
            <div data-role="content">
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup" data-mini="true">
                        <label for="textinput1">
                            User:
                        </label>
                        <input id="textinput1" type="text" placeholder="Khushbu" />
                    </fieldset>
                </div>
                <input id="login" data-theme="a" value="Login" type="button"  />
            </div>
            <div data-theme="a" data-role="footer" data-position="fixed" >
                <h3>
                  Footer 1
                </h3>

                </div>
        </div>

        <div data-role="page" id="child">
            <div data-theme="a" data-role="header">
                <h3>
                    Demo Page 2
                </h3>
                <a data-role="button" id="prevchild" data-inline="true" data-direction="reverse" data-transition="slide" >
                    &lt;&lt;
                </a>
                <a data-role="button" id="nextchild" data-inline="true" data-direction="reverse" data-transition="fade" class="ui-disabled" >
                    &gt;&gt;
                </a>
           ...

JavaScript

$('#prevchild').click(function() {
    
        $.mobile.changePage($('#home'), {
        transition: 'slide',
        reverse: true
    });
});

$('#nextchild').click(function() {

    $.mobile.changePage($('#child'), {
        transition: 'slide',
        reverse: true
    });
});
$('#login').click(function() {
    $.mobile.changePage($('#child'), {
        transition: 'slide',
        reverse: true
    });
});
$('#back').click(function() {
    $.mobile.changePage($('#home'), {
        transition: 'slide',
        reverse: true
    });
});

$('#next').click(function() {
    $.mobile.changePage($('#child'), {
        transition: 'slide',
        reverse: true
    });
});

$('#prev').click(function() {
    $.mobile.changePage($('#home'), {
        transition: 'slide',
        reverse: true
    });
});