1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
| <!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="jquery/themes/Theme-annuaire-V1.min.css" />
<link rel="stylesheet" href="jquery/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="jquery/jquery.mobile.structure-1.4.5.min.css" />
<script src="jquery/jquery-1.11.3.min.js"></script>
<script src="jquery/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script>
$(document).on("pageinit", ".actus-page", function() {
var $page = $(this),
page = "#" + $page.attr("id"),
next = $page.jqmData("next"),
prev = $page.jqmData("prev");
if (next) {
$page.on("swipeleft", function() {
$.mobile.changePage(next, {
transition: "slide"
});
});
}
if (prev) {
$page.on("swiperight", function() {
$.mobile.changePage(prev, {
transition: "slide",
reverse: true
});
});
}
});
</script>
</head>
<body>
<div data-role="page" id="page1" data-next="#page2" data-prev="#page3" class="actus-page">
<div data-role="header" data-position="fixed" data-id="headernav" data-visible-on-page-show="false">
<h1>Header1</h1> <a href="index.html" class="ui-btn-left" data-icon="home">Home</a>
<div data-role="navbar">
<ul>
<li> <a href="#page1" class=" ui-btn-active ui-state-persist"><b>Description</b></a> </li>
<li> <a href="#page2" class="tab"><b>Illustration</b></a> </li>
<li> <a href="#page3" class="tab"><b>Complications</b></a> </li>
</ul>
</div>
</div>
<div data-role="content">
<p>Description</p>
</div>
</div>
<div data-role="page" id="page2" data-next="#page3" data-prev="#page1" class="actus-page">
<div data-role="header" data-position="fixed" data-id="headernav" data-visible-on-page-show="false">
<h1>Header1</h1> <a href="index.html" class="ui-btn-left" data-icon="home">Home</a>
<div data-role="navbar">
<ul>
<li> <a href="#page1"><b>Description</b></a> </li>
<li> <a href="#page2" class="ui-btn-active ui-state-persist"><b>Illustration</b></a> </li>
<li> <a href="#page3" <b>Complications</b></a> </li>
</ul>
</div>
</div>
<div data-role="content">
<p>Illustration</p>
</div>
</div>
<div data-role="page" id="page3" data-next="#page1" data-prev="#page2" class="actus-page">
<div data-role="header" data-position="fixed" data-id="headernav" data-visible-on-page-show="false">
<h1>Header1</h1> <a href="index.html" class="ui-btn-left" data-icon="home">Home</a>
<div data-role="navbar">
<ul>
<li> <a href="#page1"><b>Description</b></a> </li>
<li> <a href="#page2"><b>Illustration</b></a> </li>
<li> <a href="#page3" class="ui-btn-active ui-state-persist"><b>Complications</b></a> </li>
</ul>
</div>
</div>
<div data-role="content">
<p>Complications</p>
</div>
</div>
</body>
</html> |
Partager