application.css

body {
    background-color: #C5CCD6; /* Background color */
    color: #222;            /* Foreground color used for text */
    font-family: Helvetica; 
    font-size: 14px;
    margin: 0;              /* Amount of negative space around the outside of the body */
    padding: 0;             /* Amount of negative space around the inside of the body */	
    -webkit-user-select: none;
    overflow-x: hidden;
}

h1{
  font: bold 18px "Helvetica Neue", Helvetica;
      text-shadow: rgba(255,255,255,.2) 0 1px 1px;
      color: rgb(76, 86, 108);
}

.header h1{
	text-overflow: ellipsis;
	color: #fff;
}
.header {   
  position:absolute;
	top:0; left:0;
	width:100%;
	height:45px;
	line-height:45px;
	background: url(images/toolbar.png) #6d84a2 repeat-x;
	-webkit-box-sizing: border-box;
     border-bottom: 1px solid #2d3642;
	padding:0;
	color:#eee;
	font-size:20px;
	text-align:center;
}

.button{
  position: absolute;
  overflow: hidden;
  top: 8px;
  right: 6px;
  margin: 0;
  border-width: 0 5px;
  padding: 0 3px;
  width: auto;
  height: 30px;
  line-height: 30px;
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0;
  text-overflow: ellipsis;
  text-decoration: none;
  white-space: nowrap;
  background: none;
  -webkit-border-image: url(images/toolButton.png) 0 5 0 5;
}
#header div.leftButton {
  position: absolute;
  top: 7px;
  left: 6px;
  height: 30px;
  font-weight: bold;
  text-align: center;
  color: white;
  text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
  line-height: 28px;
  border-width: 0 8px 0 8px;
  -webkit-border-image: url(images/backButton.png) 0 8 0 8;
}

.back {
  left: 6px;
  right: auto;
  padding: 0;
  max-width: 55px;
  border-width: 0 8px 0 14px;
  -webkit-border-image: url(images/backButton.png) 0 8 0 14;
}
  
.page{
  display:none;
  position:absolute;
  width: 100%;
  left: 0px;
  min-height: 375px !important;
  -webkit-backface-visibility: hidden;
  -webkit-box-sizing: border-box;
  -webkit-transform: translate3d(0px, 0px, 0px) rotate(0deg) scale(1);
  display: none;
}
.page.active{
  display:block;
}
.pages{
    position:relative;
}

/*
* jQuery Mobile Framework
* Copyright (c) jQuery Project
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
/* Transitions from jQtouch (with small modifications): http://www.jqtouch.com/
Built by David Kaneda and maintained by Jonathan Stark.
*/
.in, .out {
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-duration: 350ms;
}

.slide.in {
	-webkit-transform: translateX(0);
	-webkit-animation-name: slideinfromright;
}

.slide.out {
	-webkit-transform: translateX(-100%);
	-webkit-animation-name: slideouttoleft;
}

.slide.in.reverse {
	-webkit-transform: translateX(0);
	-webkit-animation-name: slideinfromleft;
}

.slide.out.reverse {
	-webkit-transform: translateX(100%);
	-webkit-animation-name: slideouttoright;
}

@-webkit-keyframes slideinfromright {
    from { -webkit-transform: translateX(100%); }
    to { -webkit-transform: translateX(0); }
}

@-webkit-keyframes slideinfromleft {
    from { -webkit-transform: translateX(-100%); }
    to { -webkit-transform: translateX(0); }
}

@-webkit-keyframes slideouttoleft {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(-100%); }
}

@-webkit-keyframes slideouttoright {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(100%); }
}



/*scroll wrapper*/

.wrapper {
	position:absolute; z-index:1;
	top:45px;/* bottom:48px;*/ left:0;bottom: 0px;
	width:100%;
	overflow:hidden;
}

.scroller{
 	position:relative;
/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	float:left;
	width:100%;
	padding:0 10px 0 10px;
}

application.js

//#########################
// Configuration
//#########################

//**************************
// Global Variables
//**************************
var currentPage;

//**************************
// Utilities
//**************************

function preventBehavior(e){ 
    e.preventDefault(); 
};

// simple changePage without transition animation
function simpleChangePage($to, $from ){
  currentPage = "#" + $to.attr("id")[0];
  
  $from.removeClass("active");
  $to.addClass( "active" );
  
  
  window.scrollTo(0,0);
        
  saveNavigationState();
  reverseTransition = false; // reset the transition animation to forward
  
  x$(document).fire('changePageComplete');
}

function changePage(reverse, $to, $from ){
  var name = "slide";
	var reverseClass = reverse ? " reverse" : "", 
	donefunc = function(){
	  $to.removeClass( "out").removeClass( "in").removeClass( "reverse").removeClass( name );

		if ( $from ) {
		  $from.removeClass( "out").removeClass( "in").removeClass( "reverse").removeClass( name );
			$from.removeClass("active");
		}

		$to.un('webkitAnimationEnd', donefunc);

		saveNavigationState();

		reverseTransition = false; // reset the transition animation to forward

		x$(document).fire('changePageComplete');
	};

	// transitioning to and from the same page causes no page to be shown, so fallback to simpleChagePage
	if($to.attr("id")[0] !== $from.attr("id")[0]){ 
	  currentPage = "#" + $to.attr("id")[0];

    $to.on('webkitAnimationEnd', donefunc);

  	if ( $from ) {
  		$from.addClass( name ).addClass( "out").addClass( reverseClass );
  	}
  	$to.addClass( "active" ).addClass( name ).addClass( "in").addClass( reverseClass );
	}else{
	  simpleChangePage($to, $from );
	}
}

// checks the network status using the phonegap api
function checkConnection() {
    if(navigator.network){
        var networkState = navigator.network.connection.type;

        if(networkState === Connection.NONE){
            navigator.notification.navigator.notification.alert(
                'This app requires a network connection to function.',  // message
                'No Network Connection',            // title
                'Continue'                  // buttonName
            ); 
        }
    }
}

/*
 * JavaScript Simple Template
 * Copyright (c) John Resig (jquery.com)
 */

/*
Examples:
 assert( tmpl("Hello, <%= name %>!", {name: "world"}) ==
  "Hello, world!", "Do simple variable inclusion." );

  var hello =  tmpl("Hello, <%= name %>!");
  assert( hello({name: "world"}) == "Hello, world!",
  "Use a pre-compiled template." );
 */
(function(){
  var cache = {};
  
  this.tmpl = function tmpl(str, data){
    // Figure out if we're getting a template, or if we need to
    // load the template - and be sure to cache the result.
    var fn = !/\W/.test(str) ?
      cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML) :
      
      // Generate a reusable function that will serve as a template
      // generator (and which will be cached).
      new Function("obj",
        "var p=[],print=function(){p.push.apply(p,arguments);};" +
        
        // Introduce the data as local variables using with(){}
        "with(obj){p.push('" +
        
        // Convert the template into pure JavaScript
        str
          .replace(/[\r\t\n]/g, " ")
          .split("<%").join("\t")
          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
          .replace(/\t=(.*?)%>/g, "',$1,'")
          .split("\t").join("');")
          .split("%>").join("p.push('")
          .split("\r").join("\\'")
      + "');}return p.join('');");
    
    // Provide some basic currying to the user
    return data ? fn( data ) : fn;
  };
})();

//#########################
// Application
//#########################

//**************************
// Helper Functions
//**************************

//**************************
// Models
//**************************
var Example = function(){

  return {
    init: function(){
    
    }
  };
}();

//**************************
// Templates/Views
//  - includes templates
//  - not initialized until page loads
//**************************
var Views = {
  init: function(){
    Views.test = tmpl("test");
  }
}

var EventListeners = function(){

  return {
    init: function(){
    
    }
  };
}();

//**************************
// Controllers/Routing
//**************************
function Controllers(){
  var StartController = function(){
    changePage(true, x$("#start"), x$(currentPage));
  };

  var AboutController = function(){
   x$("#about .scroller").html(Views.test({testoutput: "Hello"}));

   changePage(false, x$("#about"), x$(currentPage));
  };

  Hasher.add("/about", AboutController);
  Hasher.add("/start", StartController);
  Hasher.setup();

}

//**************************
// Initialization
//**************************

//prevent dragging,
document.addEventListener("touchmove", preventBehavior, false);

function onDeviceReady(){
  checkConnection();

  new FastClick(document.body); 

  Views.init();

  Example.init();

  Controllers();

  EventListeners.init()

  window.location = "#/start";
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" id="viewport" content="initial-scale=1.0,user-scalable=no">
    <title>Mobile App</title>

    
    <script src="js/json2.js" type="text/javascript"></script>
    <script src="javascript/phonegap-1.0.0.js" type="text/javascript"></script>
    
    <script src="js/xui.min.js" type="text/javascript"></script>
    <script src="js/jquerycompat.js" type="text/javascript"></script>
    
    <script src="js/iscroll.js" type="text/javascript"></script>

    <script type="text/javascript" charset="utf-8" src="js/fastclick.min.js"></script>

    <script type="text/javascript" charset="utf-8" src="js/hasher.js"></script>

    <script src="javascript/application.js" type="text/javascript"></script>

    <link rel="stylesheet" href="application.css" type="text/css" media="screen" />
  </head>
  <body onload="docReady();">
    <script type="text/tmpl" id="test">
      <p><%=testoutput%></p>
    </script>

    <div class="pages">
    
      <div class="page" id="start" >        
      
      	<div class="header">
          <h1>Mobile App</h1>
          <a class="button" href="#about">About</a>
        </div>
        
        <div class="content pinstripes wrapper">
          <div class="scroller">
            <p>test content</p>
          </div>
        </div>

      </div>
    
      <div class="page" id="about" >        
      
      	<div class="header">
          <a class="button leftButton back" href="#start">Back</a>
          <h1>About</h1>
          <a class="button" href="#about">About</a>
        </div>
        
        <div class="content pinstripes wrapper">
          <div class="scroller">
          </div>
        </div>

      </div>

    </div>
  </body>
</html>