multiPage test with jquery mobile

Testing multipage with Jquery mobile.

by jpeter06

HTML

<div id="pageContainer" style="position: relative !important; height: 100%;">
    <div data-role="page" id="test1">

        <div data-role="header" data-theme="c">
            <h1>Page1</h1>
            <a id="page2link"   data-icon="arrow-r" class="ui-btn-right">Page2</a>
        </div>
        
        <div data-role="content">
            <p>Page content goes here.</p>        
        </div><!-- /content -->

        <div data-role="footer"  data-theme="c">
            <h4>Footer</h4>
        </div><!-- /footer -->
    </div><!-- /page -->
    
    <div data-role="page" id="test2" 
    style="height: 568px;background-color:orange">

    <div class="contenido" 
        data-role="content" style="height:100%;">
             <a id="page1link" data-role="button" 
            data-inline="true" 
            data-rel="back" data-icon="arrow-l">Back</a>
        <p style="height: 80%;">This is page 2
            Here we can find a lot of text.</p>        
    </div>


</div><!-- /page -->
</div><!-- /page -->

CSS

a {
 cursor: hand;
cursor: pointer;    
}

.contenido{
    background-color:yellow;
}

}

JavaScript

$(function() {
$.mobile.defaultPageTransition = "slide";    
    $('#page2link').click(function() {
       $.mobile.changePage($('#test2'));
    });
        
    $('#page1link').click(function() {
       window.history.back();
    });
    
    $('#test2 .contenido').swipeleft( function(){
   $.mobile.changePage( $('#test1'));
 });
});