• alex88
  • $.newbie_poster();
  • Déconnecté
  • Inscrit : 27-04-2012
  • Messages : 5

Sujet : jquery mobile pagebeforeload

Bonjour
Je cherche a utiliser la méthode:
Code :Sélectionner tout - Visualiser dans une fenêtre à part

$( document ).bind( "pagebeforeload", function( event, data )

de jquery mobile, par contre je ne trouve pas d'exemple ni ne comprend vraiment a quoi ca sert reellement. http://mobile.jquery-fr.com/docs/api/events.html
Si quelqu'un a une idée, merci de m'eclairer.

2 Réponse de forresst Dernière modification par forresst (27-04-2012 10:50:22)

  • Inscrit : 30-01-2012
  • Messages : 15

Re : jquery mobile pagebeforeload

Un début de réponse en ce qui concerne la chronologie des évènements de jQuery Mobile : http://mobile.jquery-fr.com/docs/api/events-nav.html

Regarde le paragraphe "Chronologie", cela t'explique brièvement l'ordre des évènements.

Grâce aux évènements, tu peux interagir à différents stades du chargement et de l'amélioration de la page.

En tout cas quel est ton besoin exactement ? Cela me permettrai d'être plus précis dans la réponse.

http://forresst.github.com/

de forresst le site Web

3 Réponse de alex88

  • alex88
  • $.newbie_poster();
  • Déconnecté
  • Inscrit : 27-04-2012
  • Messages : 5

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.

  • Inscrit : 30-01-2012
  • Messages : 15

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.

http://forresst.github.com/

de forresst le site Web

5 Réponse de alex88

  • alex88
  • $.newbie_poster();
  • Déconnecté
  • Inscrit : 27-04-2012
  • Messages : 5

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....

6 Réponse de alex88

  • alex88
  • $.newbie_poster();
  • Déconnecté
  • Inscrit : 27-04-2012
  • Messages : 5

Re : jquery mobile pagebeforeload

Personne n'a d'idée? J'ai toujours pas trouver la solution.

7 Réponse de Lochar

  • Lochar
  • Moderator
  • Déconnecté
  • Inscrit : 06-01-2012
  • Messages : 72

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,

Développeur web (html/css/js/php) chez Kalidev

8 Réponse de alex88

  • alex88
  • $.newbie_poster();
  • Déconnecté
  • Inscrit : 27-04-2012
  • Messages : 5

Re : jquery mobile pagebeforeload

j'ai trouvé la solution en utilisant  'pageinit'.
En fait, dans toutes les en-tetes, on importe tous les fichiers( css et scripts) qu'on utilisera. donc toutes les pages contiennent ces en-tetes.

<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>

puis pour appeler les fonctions contenues ds jqm, on utilise pageinit :

$("#Id_de_la_page").live('pageinit', function() {
                /*
on appelle les fonctions ici
*/
            });
<div data-role="page" id="Id_de_la_page">

.
Attention l'appel de la page se fait imperativement à l'interieur de la balise  data-role. Details :http://mobile.jquery-fr.com/docs/pages/ … pting.html