jQuery Mobile 2-page Base Fiddle

by peterbenoit

HTML

<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
<div data-role="page" id="p1"> 
    <div  data-role="header"><h1>Header Page 1</h1></div> 
    
    <div  data-role="content">
        <a href="#p2" data-role="button">Go To Page 2</a>
    </div> 
    
    <div  data-role="footer"><h4>Footer</h4></div> 
</div> 


<div data-role="page" id="p2">
    <div  data-role="header" data-rel="back"><h1>Header Page 2</h1></div>
    
    <div  data-role="content">
        <p>This is page2</p>
    </div>
    
    <div  data-role="footer"><h4>Footer</h4></div>
</div>

CSS

div.ui-loader.ui-body-a {
    border: 1px solid         #2A2A2A /*{a-body-border}*/;
    background:             blue        /*{a-body-background-color}*/;
    color:                     #fff /*{a-body-color}*/;
    font-weight: normal;
    background-image:         linear-gradient(#666, #222);    
}

JavaScript

//$.mobile.loadingMessage = "Loading, Please wait";
//$.mobile.showPageLoadingMsg();

$.mobile.showPageLoadingMsg("b", "This is only a test", true);