Créer un header bar fixe avec un contenu qui change
Bonjour,
Je recherche un exemple pour réaliser un header fixe avec une tab bar pour une application mobile.
Lorsque je swipe le contenu de la page, je souhaite que seul le contenu bouge et pas toute la page.
J'arrive à faire le swipe d'une page à l'autre mais mon header bouge aussi. Lorsque je fais le swipe, on voit partir le texte du header courant.
Je n'ai rien trouvé sur ce sujet de probant, pourtant ce type d'animation est courante sur des applications mobiles.
Merci d'avance pour vos réponses.
Code:
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> |
