Activité n°5 : JQuery Mobile

Objectif

L’objectif est d’écrire une application web pour mobile.

Présentation

Une application web pour mobile est une application web “customisée” pour ce type de terminal (taille, tactile, performances, …) qui :

  • utilise une feuille de style CSS spécifique aux périphériques mobiles (media=“handheld” cf. media query du W3C)
  • fournit une interactivité imitant les applications natives (cf. 10 frameworks)

JQuery Mobile

JQuery Mobile est un framework d’interface optimisé pour les appareils mobiles tactiles. Son objectif est de permettre de rapidement développer des applications mobiles ou des applications web monopage en réponse à la grande diversité des Smartphones et tablettes sur le marché. Il est développé par l’équipe du projet JQuery. Il s’appuie sur l’utilisation des technologies du web : HTML5, CSS3, DOM, Javascript, Ajax.

De manière générale, on développe des documents HTML5 et jQuery Mobile ajoute des éléments et des attributs de style adaptées aux terminaux mobiles.

Les bibliothèques de jQuery Mobile sont requises et on peut :

  • soit stockées en local sur votre serveur
  • soit directement sur le serveur public jQuery.com

On effectue l’importation dans l’en-tête du document :

  • de la feuille de style spécifique mobile (.css)
  • de la bibliothèque JavaScript jQuery (.js)
  • de la bibliothèque JavaScript jQuery Mobile (.js)
<!DOCTYPE html> 
<html lang="fr"> 
    <head> 
        <title>Un titre !</title> 
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <!-- les bibliothèques pour jQuery Mobile -->
        <!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> -->
        <!-- <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> -->
        <!-- <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> -->
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head> 
    <body>
    </body>
</html>

Vous pouvez structurer l’application web suivant deux approches :

  • monopage : un document par page et on utilise des liens et l’id de la page (href=“page2.html#page2”)
  • multipages : un document contient n pages et on utilise les ancres de la balise a à partir de l’id des pages (href=“#page2”)

Les pages sont créés à partir de la balise section dans le document. On exploite ensuite les attributs fournis par JQuery Mobile :

  • data-role : précise la nature du bloc (page|header|content|footer)
  • data-position : spécifie où l’élément doit être positionné (top|bottom|right|left)
  • data-inset : spécifie si l’élément doit être contenu dans les marges ou à l’extérieur de celles-ci (true|false)
  • data-transition : spécifie quelle transition utiliser lors du chargement de nouvelles pages (slide|slideup|slidedown|pop|flip|fade)
  • data-theme : spécifie le thème graphique à utiliser pour les éléments d’un conteneur (a|b|c|d|e)

Activité n°5 : un exemple

<!DOCTYPE html> 
<html lang="fr"> 
    <head> 
        <title>Un site pour Mobile</title> 
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
        <style type="text/css">
        .center { text-align:center; }
        .margesinternes { margin:0.5em; }
        </style>
    </head> 
    <body>      
        <!-- une page -->
        <section id="page1" data-role="page" data-add-back-btn="true">
            <!-- en-tête -->
            <header data-role="header"><h1>Titre du site</h1></header>
            <h2 class="center">
                Un titre niveau 2
            </h2>     
            <h3 class="center">
                Un titre niveau 3
            </h3>
            <p class="center">
                <!-- un logo -->
                <img src="logo-montagne.jpg" alt="Un logo !" width="160" height="124" />
            </p>
            
            <!-- une vue dépliante -->
            <div data-role="collapsible" data-content-theme="a">
                <h3>La station</h3>
                <p>...</p>
                <img src="pistes.png" alt="" width="" height=""/>
            </div>                
            
            <div data-role="collapsible" data-content-theme="b">
                <h3>Ski de fond</h3>
                <p>Le domaine nordique est un paradis pour les fondeurs ...</p>            
            </div>    
            
            <div data-role="collapsible" data-content-theme="c">
                <h3>Ski alpin</h3>
                <p>La station vous offre une garantie d'enneigement ... </p>
                <!-- une grille à 2 colonnes -->
                <div class="ui-grid-a ui-responsive">
                    <div class="ui-block-a">
                        <div class="margesinternes">                       
                            <h3>Tarifs</h3>                        
                            <p>...</p>
                        </div>
                    </div>
                    <div class="ui-block-b">
                        <div class="margesinternes">
                            <h3>Les pistes</h3>                        
                            <img src="skieur.png" alt="" width="" height=""/>
                        </div>
                    </div>
                </div>
            </div>            
            
            <div data-role="collapsible" data-content-theme="d">
                <h3>Snowkite</h3>
                <p>Le snowkite est à la portée de tous ceux qui recherchent de nouvelles sensations sur la neige en skis ou en surf ...</p>            
                <img src="snow.png" alt="" width="" height=""/>
            </div>            
            
            <!-- une vue en liste -->
            <ul data-role="listview" data-inset="true">
                <li>
                  <a href="#page2" data-transition="slide">                  
                  <h3>En savoir plus ...</h3>
                  <p><img class="margesimg" src="station.png" alt="" /></p>
                  </a>              
                </li>
            </ul>
            <p></p>
            <!-- un pied de page -->
            <footer data-role="footer"><h1>©&nbsp;2016&nbsp;</h1></footer>
        </section>

        <!-- une deuxième page -->
        <section id="page2" data-role="page">
            <header data-role="header"><h1>Titre du site</h1></header>
            <h2 class="center">
                Un titre niveau 2
            </h2>     
            <h3 class="center">
                Un titre niveau 3
            </h3>
            <p class="center">
                <!-- un logo -->
                <img src="logo-montagne.jpg" alt="Un logo !" width="160" height="124" />
            </p>
            
            <div class="content" data-role="content">                
                <p class="center">Contact : 04.04.04.04.04</p>
                <p class="center">Horaires d'ouverture : <br/>
                du 1er Decembre au 31 Mars,<br/>
                de 9h à 12h et de 13h30 à 17h30.</p>                
            </div>
            
            <!-- des boutons -->
            <div class="center" data-role="controlgroup" data-type="horizontal" data-mini="true">
                <a href="#page1" data-role="button" data-icon="back" data-iconpos="left">Retour</a>
                <a href="mailto:info%40neige.com" data-role="button" data-icon="forward" data-iconpos="right" target="_blank">info(at)neige.com</a>
            </div>
            <footer data-role="footer" data-position="fixed"><h1>©&nbsp;2016&nbsp;</h1></footer>
        </section>
        
    </body>
</html>

On peut ajouter un bouton Retour, à placer dans l’en-tête du document :

<script>
    $.mobile.page.prototype.options.addBackBtn = "True";
    $.mobile.page.prototype.options.backBtnText = "Retour";
</script>

On peut utiliser le navigateur Firefox ou l’extension Ripple Emulator pour Chrome par exemple pour tester ou directement un smartphone.

Exemple : version mobile

Aller plus loin : on peut ensuite en faire une application hybride, c’est-à-dire encapsuler l’application web dans une application native (cf. cordova) -> Activité n°6 : Cordova.

Ressources

Retour