<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
#_header{
	top: 0;
	position: fixed;
	width: 100%;
}
#_headerTitle{
	text-align: center;
	padding: 10px;
}
#_footer{
	bottom: 0;
	position: fixed;
	width: 100%;
}
#_tabHeader{
	width: 100%;
}
._right{
	text-align: right;
}
</style>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="panel" id="myPanel" data-theme="b"> 
  <h1>Logo Client</h1>
    <a href="#" class="ui-btn">Approve PO</a> 
    <a href="#" class="ui-btn">Approve SJ</a> 
    <a href="#" class="ui-btn">Jadwal Pembelian</a> 
  </div> 

  <div data-role="header" id="_header">
    <div id="_headerTitle">RasioJaya Application Mobile</div>
    <div data-role="navbar">
      <ul>
        <li><a href="#myPanel" data-icon="bullets">Menu</a></li>
        <li><a href="#" data-icon="home">Home</a></li>
        <li><a href="#" data-icon="refresh">Refresh</a></li>
      </ul>
    </div>
  </div>

  <div data-role="main" class="ui-content">
  <?php for($a = 1; $a <= 30; $a++){ ?>

  <div><?php echo $no++ ?></div>
  
  <?php } ?>
  </div>

  <div data-role="footer" id="_footer">
    <h1>www.rasiojaya.com</h1>
  </div> 
</div> 

</body>
</html>
