Mon premier test avec jquery mobile

**radjiv97441** · 14/01/2018, 08h32

Bonjour, pourquoi j'ai un bug d'affichage entre ces deux pages (voir pièce jointe).
En jouant un peu sur la navigation des pages et le pop up,
le pop up me renvois sur la mauvaise la mauvaise page, alors que rien ne spécifie les pop up de quitter la page.
Je ne vais pas me lancer dans un code qui bug !

Les js necessaire sont sur jquery : http://jquerymobile.com/resources/do...bile-1.4.2.zip

(en pièce jointe les deux pages)
Page 1

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<body>
<!--  signale à jQuery Mobile qu il s agit d une page à interpréter. -->
<div data-role="page" data-theme="a" id="home">
<!--  signale l entête à jQuery Mobile -->
	<div data-role="header" ><a href="#" data-icon="home">Accueil</a><h1>TEST<br/><br/></h1></div> 
<!--  signale le contenu de la page à jQuery Mobile -->
	<div data-role="content" data-theme="c" style="font-size:32px;">  
		<h4>Page 1</h4> 
         Bonjour 1<br>Bonjour 1<br>Bonjour 1<br>Bonjour 1<br>Bonjour 1<br>Bonjour 1<br>Bonjour 1<br>Bonjour 1<br>
         Bonjour 1<br>Bonjour 1<br>Bonjour 1<br>Bonjour 1<br>Bonjour 1<br>Bonjour 1<br>Bonjour 1<br>Bonjour 1<br>
         Bonjour 1<br>Bonjour 1<br>Bonjour 1<br>Bonjour 1<br>Bonjour 1<br>Bonjour 1<br>Bonjour 1<br>Bonjour 1<br>
         Bonjour 1<br>Bonjour 1<br>Bonjour 1<br>Bonjour 1<br>Bonjour 1<br>Bonjour 1<br>Bonjour 1<br>Bonjour 1<br>
    </div> 
<!--  signale le pied de page à jQuery Mobile -->
<!-- L attribut data-position="fixed" force le pied de page à se positionner en bas de l écran -->
	<div data-role="footer" class="ui-bar" data-position="fixed" data-theme="b"> 
		<div data-role="navbar"> 
			<ul> 
			<li><a href="index2.html">Allez vers page 2</a></li> 
			<li><a href="#confirmation1" data-role="button" data-inline="true" data-transition="flip">Affiche div1</a></li>
            <a href="index2.html" class="ui-shadow ui-btn ui-corner-all ui-btn-inline" data-transition="pop">Allez vers page 2</a> 
			<li><a href="#">Module 1</a></li> 
			</ul> 
		</div> 
	</div> 
</div> 
<!-- ajout d une pop up -->
<div data-role="dialog" id="confirmation1" data-close-btn-text="Fermer la fenêtre">
	<div data-role="header"> <h1>Contenu du div</h1> </div> 
	<div data-role="content">   
		div1 <br>div1 <br>div1 <br>div1
		<!-- ferme la pop up avec une transition -->
		<p><a href="#home" data-role="button" data-transition="slideup">Retour vers home</a></p> 
	</div> 
 
</div> 
</body>

Page 2:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<body>
<!--  signale à jQuery Mobile qu'il s agit d une page à interpréter. -->
<div data-role="page" data-theme="a" id="home">
<!--  signale l entête à jQuery Mobile -->
	<div data-role="header" ><a href="#" data-icon="home">Accueil</a><h1>TEST 2<br/><br/></h1></div> 
<!--  signale le contenu de la page à jQuery Mobile -->
	<div data-role="content" data-theme="c" style="font-size:32px;">  
		<h4>Page 2</h4> 
         Page 2<br>Page 2<br>Page 2<br>Page 2<br>Page 2<br>Page 2<br>Page 2<br>Page 2<br>
         Page 2<br>Page 2<br>Page 2<br>Page 2<br>Page 2<br>Page 2<br>Page 2<br>Page 2<br>
         Page 2<br>Page 2<br>Page 2<br>Page 2<br>Page 2<br>Page 2<br>Page 2<br>Page 2<br>
    </div> 
<!--  signale le pied de page à jQuery Mobile -->
<!-- L attribut data-position="fixed" force le pied de page à se positionner en bas de l écran -->
	<div data-role="footer" class="ui-bar" data-position="fixed" data-theme="b"> 
		<div data-role="navbar"> 
			<ul> 
			<li><a href="index1.html" data-icon="home">Retour vers page 1</a></li> 
			<li><a href="#confirmation1" data-role="button" data-inline="true" data-transition="flip">Affiche div2</a></li>
            <a href="index1.html" class="ui-shadow ui-btn ui-corner-all ui-btn-inline" data-transition="pop">Affiche page 1</a> 
			<li><a href="#">Modules 1</a></li> 
			</ul> 
		</div> 
	</div> 
</div> 
<!-- ajout d une pop up -->
<div data-role="dialog" id="confirmation1" data-close-btn-text="Fermer la fenêtre">
	<div data-role="header"><h1>Contenu du div 2</h1></div> 
	<div data-role="content">   
		div 2 <br>div 2 <br>div 2 <br>div 2
		<!-- ferme la pop up avec une transition -->
		<p><a href="#home" data-role="button" data-transition="slideup">Retour vers home</a></p> 
	</div> 
</div> 
</body>

Merci de m'aider un peu.

Impossible de supprimer le message, j'avais pas vu qu'il y a avait une nouvelle version de jquery mobile

Mon premier test avec jquery mobile [UI Mobile]

jQuery

Discussions similaires

Partager

Partager