Sujet : jquery mobile pagebeforeload
$( document ).bind( "pagebeforeload", function( event, data )2 27-04-2012 10:49:47 Dernière modification par forresst (27-04-2012 10:50:22)
Re : jquery mobile pagebeforeload
Re : jquery mobile pagebeforeload
En fait, j'ai 2 pages html, l'une contient un lien vers le second, mais je clique sur le le lien, je vais bien sur la 2nde page mais les scripts sur cette seconde page ne sont pas exécutés (il faut actualiser la page pour qu'ils soient exécutés). En lisant plein de sujets, je crois que c'est parce que le DOM n'est pas rechargé et que pagebeforeload est peut être la solution.
Re : jquery mobile pagebeforeload
La solution serait plutôt d'utiliser, pagebeforecreate (A voir selon le besoin). En fait cet évènement permet d'exécuter un script avant l'amélioration de la page, car si ton script rajoute des données supplémentaires qui doivent être "reformattés" par jQuery Mobile, cela est la bonne solution.
Pour exemple, dans la documentation française, j'ai eu besoin de rajouter un bandeau en haut de la page pour aller vers le forum et la documentation de jQuery (Bandeau noir avec deux boutons : Documentation française jQuery et Forum français dédié à jQuery)
Imaginons que ta deuxième page à le div suivant avec la classe "type-page2" :
<div data-role="page" class="type-page2">Maintenant, tu veux rajouter un évènement qui sera exécuté seulement lorsque cette page sera chargée avant l'amélioration de jQuery Mobile.
Rajoutes un script js comme suit nommé "jqm.js" :
$( document ).bind( "mobileinit", function() {
// définition d'un bandeau d'entête de type ui-bar avec le nuancier a
var entete = $( '<div>' , {
'class': "ui-bar ui-bar-a"
});
// Ajout dans ce div du texte et de deux boutons
entete
.append( "<h1>JQuery Mobile, documentation en français </h1>" )
.append( "<a href='http://www.jquery-fr.com' class='ui-btn-right' data-mini='true'>Documentation française jQuery</a>" )
.append( "<a href='http://www.jquery-fr.com/forum' class='ui-btn-right' data-mini='true'>Forum français dédié à jQuery</a>" );
// Entête pour le site mobile.jquery-fr.com
$( 'div.type-page2' ).live( 'pagebeforecreate',function(event){
$( "div.type-page2" ).prepend( entete );
});
}); et places le ainsi dans la page html (Après jquery.js et avant jquery.mobile.js) :
<script src="/js/jquery.js"></script>
<script src="/js/jqm.js"></script>
<script src="/js/jquery.mobile.js"></script>Pour le jqm.js, voici l'explication : on définit la liaison de la page 2 avec l’évènement pagebeforecreate en sélectionnant la classe "type-page2".
Tout cela doit être définie dans $( document ).bind( "mobileinit", function() { } qui permet que cette liaison soit faite dès le début de l'initialisation de jQuery Mobile.
J'espère que mon exemple t'aideras.
Re : jquery mobile pagebeforeload
Merci.
Voila ce que je fais:
page1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Page 1</title>
<!--
<link rel="stylesheet" href="jquery.mobile-1.0.1.min.css" />
<script src="jquery.js"></script>
<script src="jquery.mobile-1.0.1.min.js"></script>
-->
</head>
<body>
<p align="center">
<a href="page2.html">Page 2</a>
</p>
</body>
</html> et pour page2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Page 2</title>
<link rel="stylesheet" href="jquery.mobile-1.0.1.min.css" />
<script src="jquery.js"></script>
<script src="jqm.js"></script>
<script src="jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role="page" class="type-page2">
<p align="center">page test</p>
</div>
</body>
</html>et pour jqm.js est le même que celui que tu m'as proposé. Ça marche comme cela ( si je commente l'importation de fichier des fichiers jquery -->page1;html) par contre si je supprime les commentaires (donc j'importe bien les fichiers jquery), la page2 n’exécute pas le script sauf si j'actualise. Je ne sais pas pourquoi, si t'as une idée....
Re : jquery mobile pagebeforeload
Personne n'a d'idée? J'ai toujours pas trouver la solution.
Re : jquery mobile pagebeforeload
Bonsoir,
Désolé, je n'ai jamais travaillé sur jQuery Mobile
Avez-vous essayé avec un autre évènements, à la place de "pagebeforeload" ?
Lochar,
Re : jquery mobile pagebeforeload
<link rel="stylesheet" href="jquery.mobile-1.0.1.min.css" />
<script src="jquery.js"></script>
<script src="jqm.js"></script>
<script src="jquery.mobile-1.0.1.min.js"></script>