JQM 1.1 Final

by codaniel

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/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<div data-role="page" id="page1">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <form>
            <label>Header
                <input type="text" name="header" />
            </label>
            <label>Content
                <textarea name="content"></textarea>
            </label>
            <input type="submit" value="Submit" />    
        </form>            
    </div><!-- /content -->

</div>
<div data-role="page" id="page2">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <p>Hello world</p>        
    </div><!-- /content -->

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

JavaScript

$(document).on('pageinit', '#page1', function(){
    
    $('form').submit(function(){
       
        header = $('[name=header]').val();
        content = $('[name=content]').val();
        
        $.mobile.changePage('#page2');
        return false;        
    });
    
});
$(document).on('pageinit', '#page2', function(){
   
    $('.ui-title').text(header);
    $('.ui-content').text(content);
    
});