I have joined Anti-IF Campaign

Quelques pas avec jquery mobile : responsive interface Html5 avec « swipe gesture » pour la navigation

Le but de ce petit tutoriel est de prendre en main jquery mobile et de mettre en place un ensemble d’écrans avec une navigation par « swipe gesture », c'est-à-dire en passant à l’écran suivant ou précédent en glissant le doigt vers la gauche ou la droite.

Ce tutorial n’utilise qu’une seule page html et les éléments suivants :
jquery.mobile-1.1.0.min.css
jquery-1.7.2.min.js
jquery.mobile-1.1.0.min.js



La 1er étape est la construction de la page html contenant 5 écrans.
En nous appuyant sur la documentation de Jquery mobile (http://jquerymobile.com/demos/1.1.0/) et en utilisant les attributs html5 data-*, cette étape est facile.
Notons que les header et footer sont fixes (data-position) et ne disparaissent pas lors d'un clic (data-tap-toggle).
Nous obtenons le code suivant avec 5 écrans distincts :

<!DOCTYPE html>
<html>
<head>
    <title>Swipe on dynamic pages</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>

    <div id="page1" data-role="page" data-theme="a" >
       <div data-role="header" data-backbtn="false" data-position="fixed" data-tap-toggle="false">
          <h1>page 1</h1>
       </div>
       <div data-role="content">label 1</div>
       <div data-role="footer" data-position="fixed" data-tap-toggle="false">A propos</div>
    </div>

    <div id="page2" data-role="page" data-theme="a" >
       <div data-role="header" data-backbtn="false" data-position="fixed" data-tap-toggle="false">
          <h1>page 2</h1>
       </div>
       <div data-role="content">label 2</div>
       <div data-role="footer" data-position="fixed" data-tap-toggle="false">A propos</div>
    </div>

    <div id="page3" data-role="page" data-theme="a" >
       <div data-role="header" data-backbtn="false" data-position="fixed" data-tap-toggle="false">
          <h1>page 3</h1>
       </div>
       <div data-role="content">label 3</div>
       <div data-role="footer" data-position="fixed" data-tap-toggle="false">A propos</div>
    </div>

    <div id="page4" data-role="page" data-theme="a" >
       <div data-role="header" data-backbtn="false" data-position="fixed" data-tap-toggle="false">
          <h1>page 4</h1>
       </div>
       <div data-role="content">label 4</div>
       <div data-role="footer" data-position="fixed" data-tap-toggle="false">A propos</div>
    </div>

    <div id="page5" data-role="page" data-theme="a" >
       <div data-role="header" data-backbtn="false" data-position="fixed" data-tap-toggle="false">
          <h1>page 5</h1>
       </div>
       <div data-role="content">label 5</div>
       <div data-role="footer" data-position="fixed" data-tap-toggle="false">A propos</div>
    </div>
   
</body>
</html>


La 2ème étape correspond à la définition de l’enchainement des écrans les uns par rapport aux autres.
Je déclare pour chacun l’écran précédent et l’écran suivant en bouclant à l’infini.
Pour le 1er écran, le suivant est le 2ème écran et le précédent est le 5ème écran
Pour le 2ème écran, le suivant est le 3ème écran et le précédent est le 1er écran

Pour le 5ème écran, le suivant est le 1er écran et le précédent est le 4ème écran
Nous obtenons le code suivant pour la définition des enchaînements :

<!DOCTYPE html>
<html>
<head>
    <title>Swipe on dynamic pages</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>

    <div id="page1" data-role="page" data-prev-index="5" data-next-index="2" data-theme="a" >
       <div data-role="header" data-backbtn="false" data-position="fixed" data-tap-toggle="false">
          <h1>page 1</h1>
       </div>
       <div data-role="content">label 1</div>
       <div data-role="footer" data-position="fixed" data-tap-toggle="false">A propos</div>
    </div>

    <div id="page2" data-role="page" data-prev-index="1" data-next-index="3" data-theme="a" >
       <div data-role="header" data-backbtn="false" data-position="fixed" data-tap-toggle="false">
          <h1>page 2</h1>
       </div>
       <div data-role="content">label 2</div>
       <div data-role="footer" data-position="fixed" data-tap-toggle="false">A propos</div>
    </div>

    <div id="page3" data-role="page" data-prev-index="2" data-next-index="4" data-theme="a" >
       <div data-role="header" data-backbtn="false" data-position="fixed" data-tap-toggle="false">
          <h1>page 3</h1>
       </div>
       <div data-role="content">label 3</div>
       <div data-role="footer" data-position="fixed" data-tap-toggle="false">A propos</div>
    </div>

    <div id="page4" data-role="page" data-prev-index="3" data-next-index="5" data-theme="a" >
       <div data-role="header" data-backbtn="false" data-position="fixed" data-tap-toggle="false">
          <h1>page 4</h1>
       </div>
       <div data-role="content">label 4</div>
       <div data-role="footer" data-position="fixed" data-tap-toggle="false">A propos</div>
    </div>

    <div id="page5" data-role="page" data-prev-index="4" data-next-index="1" data-theme="a" >
       <div data-role="header" data-backbtn="false" data-position="fixed" data-tap-toggle="false">
          <h1>page 5</h1>
       </div>
       <div data-role="content">label 5</div>
       <div data-role="footer" data-position="fixed" data-tap-toggle="false">A propos</div>
    </div>
   
</body>
</html>


La 3ème et dernière étape correspond à la gestion de l’événement swipe.
On utilise Jquery pour capturer les événements : swiperight et swipeleft.
Lors de l’un de ces événements, on analyse l’écran courant ($.mobile.activePage) pour récupérer l’index du précédent et du suivant.
On déclenche alors un changement d’écran ($.mobile.changePage) en prenant bien en compte le sens du mouvement.
Nous obtenons le code suivant pour la gestion du swipe :

    <script>
       $(document).ready(function() {
          $("[data-role='page']").live('swiperight swipeleft', function(event) {
             var swipeindex = '';
             var reverseValue = false;
             if (event.type == "swiperight") {
                swipeindex = "#page" + $.mobile.activePage.data("prev-index");
                reverseValue = true;
             } else if (event.type == "swipeleft") {
                swipeindex = "#page" + $.mobile.activePage.data("next-index");
             }
            
             if (swipeindex != '#page') {
                $.mobile.changePage(swipeindex, { type : "get", transition : "slide", reverse : reverseValue });
             }
             event.preventDefault();
          });
       });
    </script>


Voila.

Vous pouvez trouver le code complet en suivant l’url : http://jsfiddle.net/asicfr/6sJHW/
Vous pouvez trouver la démo en suivant l’url : http://jsfiddle.net/asicfr/6sJHW/embedded/result/

1 commentaire:

  1. Bon travail!! mais est t il possible de naviguer dans la meme page et que seulement le data-role="content" change ???

    RépondreSupprimer