mirror of
https://github.com/Doodle3D/doodle3d-connect.git
synced 2024-12-26 02:23:48 +01:00
63 lines
2.8 KiB
HTML
63 lines
2.8 KiB
HTML
|
<?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') { ?>
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>Ajax optimized persistent toolbars - jQuery Mobile Demos</title>
|
||
|
|
<link rel="shortcut icon" href="../favicon.ico">
|
||
|
|
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
|
||
|
|
<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.2.min.css">
|
||
|
|
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
|
||
|
|
<script src="../js/jquery.js"></script>
|
||
|
|
<script src="../_assets/js/index.js"></script>
|
||
|
|
<script src="../js/jquery.mobile-1.4.2.min.js"></script>
|
||
|
|
<script>
|
||
|
|
$(function(){
|
||
|
|
$("[data-role='navbar']").navbar();
|
||
|
|
$("[data-role='header'], [data-role='footer']").toolbar();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div data-role="header" data-position="fixed" data-theme="a">
|
||
|
|
<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
|
||
|
|
<h1>Fixed external header</h1>
|
||
|
|
</div><!-- /header -->
|
||
|
|
<?php } ?>
|
||
|
|
<div data-role="page" class="jqm-demos">
|
||
|
|
|
||
|
|
<div class="ui-content jqm-content jqm-fullwidth" role="main">
|
||
|
|
|
||
|
|
<h1>Ajax optimized Persistant Toolbars</h1>
|
||
|
|
|
||
|
|
<p>These pages have been optimized on the server side to check if the request is coming from an Ajax request and if so they only send the actual page div instead fo the entire page. If you navigate to any of the pages in the nav bar at the bottom and inspect the return data you will see it contains no head, toolbars, html tag, or body tag.</p>
|
||
|
|
|
||
|
|
<p>However if you refresh the page all of these things will be present. This is done by checking the HTTP_X_REQUESTED_WITH header </p>
|
||
|
|
|
||
|
|
<pre><code>
|
||
|
|
if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') {
|
||
|
|
</code></pre>
|
||
|
|
|
||
|
|
<p>All of the markup not needed when being requested via Ajax is wrapped in if statements like the one above.</p>
|
||
|
|
|
||
|
|
</div><!-- /content -->
|
||
|
|
|
||
|
|
</div><!-- /page -->
|
||
|
|
|
||
|
|
<?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') { ?>
|
||
|
|
<div data-role="footer" data-position="fixed" data-theme="a">
|
||
|
|
<div data-role="navbar">
|
||
|
|
<ul>
|
||
|
|
<li><a href="index.html" data-prefetch="true" data-transition="none">Info</a></li>
|
||
|
|
<li><a href="page-b.html" data-prefetch="true" data-transition="flip">Friends</a></li>
|
||
|
|
<li><a href="page-c.html" data-prefetch="true" data-transition="turn">Albums</a></li>
|
||
|
|
<li><a href="page-d.html" data-prefetch="true" data-transition="slide">Emails</a></li>
|
||
|
|
</ul>
|
||
|
|
</div><!-- /navbar -->
|
||
|
|
</div><!-- /footer -->
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
<?php } ?>
|