1 - Télécharger la librairie jQuery Mobile
Vous pouvez télécharger la librairie jQuery Mobile à cette adresse :
http://jquerymobile.com/download/
Téléchargez le fichier zip qui contient le .js et le .css
jQuery Mobile fonctionne sur la base de la librairie jQuery. Vous devez donc aussi télécharger celle-ci à cette adresse :
http://docs.jquery.com/Downloading_jQuery
Allez dans la partie "Download jQuery" et télécharger la dernière version "current release"
Remarques : Vous trouverez deux versions des librairies jQuery et jQuery Mobile. L'une "Minified" et l'autre "Uncompressed". Il s'agit en fait de deux librairies ayant les mêmes fonctionnalités. La version "Minified" étant une version très compacte au niveau du code. Voici pour exemple le poids des deux version de jQuery 1.6.2.
- Version jquery-1.6.2.js "Uncompressed" : 238 Ko
- Version jquery-1.6.2.min.js "Minified" : 94 Ko
Dans la suite de ce document, nous verrons qu'il n'est pas forcément nécessaire de télécharger les librairies jQuery et jQuery Mobile.
2 - Incorporer jQuery Mobile dans une page
Il faut incorporer les librairies jQuery et jQuery mobile dans l'entête de chaque page HTML. Il faut aussi incorporer la feuille de style jQuery Mobile pour obtenir toutes les fonctionnalités. Deux méthodes sont ici possibles.
- Soit incorporer les librairies en locales. Cette solution vous permettra de travailler avec tous les fichiers sur votre ordinateur. Une connexion permanente à internet n'est pas obligatoire.
- Soit incorporer les librairies en réalisant un lien depuis le site internet code.jquery.com. Une petite variante à cette solution consistera à travailler avec des fichiers distants dans leurs versions "current". Cette solution vous évitera de télécharger les librairies et vous permettra de travailler avec une version profitant des derniers débogages réalisés. Connexion internet permanente obligatoire.
- Cette solution est souvent nommée sous le terme "CDN" signifiant : Content Delivery Network (source wikipédia http://fr.wikipedia.org/wiki/
Content_Delivery_Network)
Voici le squelette d'une page de base avec les liens vers les librairies en ligne. (Version sept 2011)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile - Page de base</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://code.jquery.com/
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/
</head>
<body>
</body>
</html>
Cette page possède un doctyme HTML5
Elle comporte également une balise <meta name="viewport" ... />
<meta name="viewport" content="width=device-width, initial-scale=1">
Lorsque rien n'est précisé au niveau de la taille d'affichage d'un site, de nombreux appareils mobiles utilisent une taille par défaut de 900 px, cela afin de permettre un affichage plus ou moins correct des sites conçus pour les écrans d'ordinateurs. Dans le cas de l'utilisation de jQuery Mobile, le site est résolument réalisé pour être consulté sur un appareil mobile. Il est donc nécessaire de préciser que la largeur de la fenêtre sera celle de la largeur de l'écran de l'appareil, c'est ce que signifie content="width=device-width"
3 - Réaliser une première page
Comme toutes les pages web, une page jQuery mobile est composée de balises placées dans la balise <body> du document html. La conception d'une page avec jQuery mobile doit être réalisée à partir d'une balise <div> contenant l'attribut data-role="page" Le contenu immédiat de ce bloc est généralement réalisé à partir d'autres blocs <div> qui auront des attributs data-role appropriés à leur fonction. Vous trouverez en annexe une liste de toutes les valeurs de data-role de jQuery Mobile.
Considérons une page contenant une zone d'entête, une zone de contenu et une zone de pied. Le bloc général est le suivant : <div data-role = "page">...</div>. Pour réaliser la zone d'entête, on ajoutera un bloc <div> contenant l'attribut data-role = "header" ce qui donnera : <div data-role = "header">...</div>, pour réaliser la zone de contenu, nous ajouterons le bloc : <div data-role = "content">...</div> et pour le pied : <div data-role = "footer">...</div>.
L'exemple ci-dessous présente un document comportant une seule "page". Cette page contient un "header", une zone de "content" et un "footer"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile - Page 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://code.jquery.com/
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Titre</h1>
</div>
<div data-role="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac massa mauris. Donec velit neque, porta quis dapibus quis, suscipit et tortor. </p>
</div>
<div data-role="footer">
<footer>Pied</footer>
</div>
</div>
</body>
</html>
4 - Changer l'aspect d'une page
Avec jQuery mobile, il est très facile de modifier l'aspect général d'une page. Il suffit d'ajouter un attribut data-theme dans la balise <div> qui doit changer d'aspect.
jQuery Mobile est livré avec 5 thèmes déjà définis. On accède à ces thèmes en ajoutant l'attribut data-theme="a". La valeur "a" est le thème par défaut de jQuery Mobile. Les autres thèmes sont : "b" ; "c" ; "d" et "e".
Voici l'aspect de notre page précédente avec ces différents thèmes. Pour réaliser cela, nous avons simplement ajouté l'attribut data-theme à la balise <div> parent de chaque élément à modifier. Vous pourrez étudier le code en ouvrant chacune des pages.
<div data-role="page"
5 - Créer des liens
Ce paragraphe peut sembler inutile ici car vous maitrisez tous la réalisation de liens, cependant jQuery Mobile possèdent des caractéristiques surprenantes pour l'affichage de nouveaux contenus.
Tous d'abord, il existe deux méthodes pour réaliser des "pages" jQuery Mobile.
- La création de pages uniques contenant chacune un contenu différent. C'est le cas de site "classiques".
- La création de "zones", avec l'attribut
data-role="page", dans une même page. Ces différentes zones seront identifiées par un ID unique et leur affichage se fera au moyen d'un lien "ancre" de type :<a href="#contenu">lien vers contenu</a>.
Que vous ayez choisi de réaliser des liens vers des pages externes ou bien vers des ancres, jQuery Mobile affiche toujours celles-ci avec une transition. Généralement, il s'agira de la transition par défaut, le "glissé vers la gauche", mais vous pourrez, par la suite choisir votre propre transition. Voici, si cela était nécessaire, les deux codes pour l'écriture des liens.
- Lien vers une page externe nommée pageSeule.html
<a href="pageSeule.html">Lien vers une page seule</a> - Lien vers une zone de la page définie avec l'ID : "contenu2".
<a href="#contenu2">Lien vers une ancre de la page actuelle</a>
Voir le résultat
Explications de fonctionnement.
La transition du lien vers une page externe se réalise par un chargement via Ajax. Lorsque jQuery Mobile détecte la présence d'un lien externe, il analyse le lien, réalise une requête Ajax et affiche la page avec la transition choisie.
A propos des liens vers des pages externes.
Une transition sur un lien vers une page externe ne peut se faire QUE si cette page est située dans le même domaine que la page initiale.
Si la page à ouvrir n'est pas sur le même domaine, un message d'erreur s'affiche, précisant une erreur de chargement. Pour que la page s'affiche malgré tout, sans transition, il faut ajouter dans la balise <a> l'attribut rel="external" ou bien l'attribut data-ajax="false". Les documents ainsi ouverts rafraichiront l'ensemble de la page.
Les deux méthodes rel="external" et data-ajax="false" produisent un effet identique. Elles diffèrent seulement d'un point de vue sémantique. Utilisez rel="external" lorsque vous souhaitez ouvrir des pages placées sur des domaines différents et data-ajax="false" lorsque vous souhaitez ouvrir des pages placées sur votre domaine et pour lesquelles vous souhaitez un rafraichissement complet de la page.
Note : Avec la version 1.0a3 de jQuery Mobile, Un message d'erreur s'affiche également si vous essayez d'ouvrir une page en local sur votre disque.
6 - La zone d'entête
C'est dans cette zone que se situe généralement le titre de la page ainsi que les boutons de retour en arrière, celui pour revenir à la home ou d'autres boutons. On réalise généralement cette zone avec une balise h1, ce qui semble logique par rapport à notre titre de page.
Jqm propose de placer cette balise <h1>Titre</h1> à l'intérieur d'une balise <div> avec l'attribut data-role="header".
Voici donc le résultat :
<div data-role="header"><h1>Titre</h1></div>
Par défaut, la zone d'entête sera mise en forme avec le thème "a". Si vous souhaitez utiliser un autre thème, ajouter l'attribut data-theme dans la balise <div>
<div data-role="header" data-theme="e">
Placer des boutons
Pour placer des boutons dans cette zone, on créera simplement des liens avec la balise <a>, l'attribut href pointant vers la page souhaitée. Jqm transformera automatiquement ces liens en boutons.
<div data-role="header" >
<a href="#page">Retour</a>
<h1>Page 2</h1>
<a href="">Annuler</a>
</div>
Les boutons apparaissent ici dans l'ordre du code ci-dessus. Il n'est cependant pas nécessaire de placer les liens de part et d'autre du titre. En effet, par défaut, jqm place le premier lien sur la gauche de la zone header et le second lien sur sa droite.
Si vous souhaitez placer un seul bouton sur la partie droite, ajouter lui la classe : ui-btn-right.
Un simple retour à la page précédente
Pour réaliser un bouton de retour sur la page précédente, nous ajouterons l'attribut data-rel="back", au bouton. De cette manière un clic sur le bouton reculera d'un cran dans l'historique de navigation. Il ne sera donc pas nécessaire de renseigner la valeur de l'attribut href.
<div data-role="header" >
<a href="" data-rel="back">Retour</a>
<h1>Page 2</h1>
<a href="">Annuler</a>
</div>
Personnaliser l'entête
Pour personnaliser facilement la zone de header de quelque manière que ce soit, ajouter une balise <div>, avec un identifiant, à l'intérieur de la balise <div data-role="header" >…</div>. De cette manière jqm ne mettra pas en forme cette zone, mais conservera les fonctionnalités des liens (data-rel="back" par exemple ).
<div data-role="header">
<div id="zoneEntete">
<a href="#">1er lien dans le "header"</a> <a href="#">Le deuxième lien</a>
<h1>Titre</h1>
</div>
Une autre méthode, consistera à créer une nouvelle règle de style pour la classe .ui-bar-a. Cela modifiera à la fois l'entête et le pied de page.
7 - La zone de pied de page
Pour réaliser une zone de pied de page, nous construisons une structure similaire à celle de l'entête, avec un attribut data-role ayant la valeur "footer"
<div data-role="footer">
<h4>Pied de page</h4>
</div>
Placer des boutons
Contrairement à la zone d'entête, les boutons placés dans la zone de pied de page se positionnent les uns après les autres. Vous devez donc les organiser correctement.
<div data-role="footer"
<a href="">Annuler</a>
<a href="">Retour</a>
<a href="">Infos</a>
<h4>Pied de page</h4>
<a href="">Commander</a>
</div>
Dans le code ci-dessous, le lien "commander" à été placé avant la balise <h4>
<div data-role="footer"
<a href="">Annuler</a>
<a href="">Retour</a>
<a href="">Infos</a>
<a href="">Commander</a>
<h4>Pied de page</h4>
</div>
Il sera plus élégant de regrouper les boutons pour que leurs bords fusionnent. Cela sera réalisé en englobant les liens avec une balise <div> ayant les attributs :
data-role="controlgroup",
data-type="horizontal"
et class="ui-bar".
<div data-role="footer" data-position="inline">
<div data-role="controlgroup" class="ui-bar"
<a href="index.html" data-icon="delete">Remove</a>
<a href="index.html" data-icon="plus">Add</a>
<a href="index.html" data-icon="arrow-u">Up</a>
<a href="index.html" data-icon="arrow-d">Down</a>
</div>
</div>
8 - Positionner entête et pied de page en fixe
Lorsque la page renferme un contenu important, nous devons faire défiler la page du haut vers le bas. Ceci entraine une disparition de la zone de header, obligeant l'utilisateur à revenir en haut de la page pour cliquer sur le bouton de retour par exemple. Pour éviter cela, nous pouvons attribuer à la balise <div data-role="header"> une position fixe. Le comportement n'est pas tout à fait le même que dans un navigateur web. En effet, lors du défilement, la barre disparaît, puis se réaffiche lors de la stabilisation.
L'attribut à insérer est le suivant : data-position="fixed"
<div data-role="header" data-position="fixed">
Il sera également possible de placer cet attribut pour la zone de pied.
9 - Les transitions
Les applications mobiles nous ont maintenant habituées aux passages "en douceur" entre les pages. Jqm propose 6 transitions qu'il est très facile d'utiliser. Tout d'abord, une transition doit se faire entre deux pages appartenant au même domaine ou bien entre deux zones d'une même page. Voici un code fonctionnel. Par défaut ces pages s'afficheront avec la transition "slide".
<div data-role="header">
<h1>En-tête</h1> </div>
<div data-role="content">
<a href="#page2" data-role="button"> Lien vers l'ancre page2</a>
<a href="page.html" data-role="button">Lien vers une page</a>
</div>
Pour changer la transition, on ajoute l'attribut data-transition avec l'une des valeurs suivantes : "fade" ; "flip" ; "pop" ; "slidedown" ; "slideup".
<div data-role="header">
<h1>En-tête</h1> </div>
<div data-role="content">
<a href="#page2" data-role="button" data-transition="flip">Lien vers l'ancre page2</a>
<a href="page.html" data-role="button" data-transition="pop">Lien vers une page</a>
</div>
10 - Réaliser des boutons
Avec jQuery Mobile, un bouton est réalisé de trois manières.
1 - Soit en utilisant une balise <input> avec l'attribut type ayant l'une des valeurs suivantes : button ; submit ; reset ; image.
2 - Soit en utilisant la balise <button>.
3 - Soit en utilisant une balise <a> de lien et en lui ajoutant l'attribut data-role="button".
Icônes des boutons
Il est très facile d'ajouter une icône aux boutons. Cette icône s'ajoute avec l'attribut data-icon.
<input type="button" data-icon="check" value="data-icon='check'" />
Voici les différentes icônes possibles.
Position des icônes
Les icônes pourront être positionnées dans le bouton sur les quatre positions. La position gauche est celle par défaut et elle n'a pas besoin d'être précisée. Pour les autres positions nous utiliserons l'attribut data-iconpos.
<input type="button" data-icon="check" value="bouton" data-iconpos="right"/>
Icônes personnalisés
Bien que jQuery propose de nombreuses icônes pour les boutons, il est possible d'utiliser ses propres icônes. Pour cela, vous devez réaliser un document de taille 18px X 18px et l'enregistrer en png. Le nom ne doit évidemment pas comporter de caractères particuliers.
Pour assigner cette icône à un bouton, il suffira d'utiliser l'attribut data-icon, avec le nom de votre icône sans son extension.
Exemple. Nous avons réalisé une icône enregistrée sous le nom : puzzleic.png.
<input type="button" data-icon="puzzleic" value="bouton" />
Nous avons ensuite créé une nouvelle class portant le non ui-icon-puzzleic pour laquelle nous définissons la propriété background-image dans la classe ui-icon-puzzleic
.ui-icon-puzzleic{
background-image:url(images/puzzleic.png);
}
Cette nouvelle règle de style pourra être placée directement dans la page HTML, dans une zone <style>. Cette zone <style> devra être placée après la balise <link> de chargement des styles jQuery.
A propos des icônes. Les icônes, par défaut, de même couleur sont toutes regroupées dans un fichier png unique, placé dans le dossier image de jqm. icons-18-black.png pour les icônes noires.
11 - Réaliser des menus
Les menus sont simplement constitués d'une liste de liens, placés dans une balise <ul> ou <ol>. L'ensemble étant englobé dans un block <div> ayant l'attribut data-role="navbar". Jqm met automatiquement en forme cette construction.
La barre de navigation occupe l'ensemble de la place disponible. Suivant, sa position dans la page, (dans le header, le contenu ou le pied) la barre de navigation aura une mise en forme différente qui s'adaptera à son contexte
<div data-role="navbar">
<ul>
<li><a href="L1.html" >Lien-1</a></li>
<li><a href="L2.html">Lien-2</a></li>
</ul>
</div>
Navbar placée dans une zone "content"
Navbar placée dans une zone "header"
Les items du menu s'affichent automatiquement les uns à côté des autres lorsque leur nombre est inférieur à 5. Si les items comportent du texte très long, celui-ci sera coupé et remplacé par des points de suspension. Au-delà de 5, les items se rangerons par paire et s'afficheront sur des lignes différentes.
Modifier le theme
Pour modifier le thème de l'ensemble de la barre de navigation, on ajoutera l'attribut data-theme dans le bloc <div> de son parent, c'est à dire dans le <div data-role="header"> ou <div data-role="content">, par exemple. Pour changer le thème de l'un des items, on placera cet attribut dans sont lien.
<div data-role="content" data-theme="e">
<div data-role="navbar" >
<ul>
<li><a href="#" >Lien-1</a></li>
<li><a href="#">Lien-2</a></li>
</ul>
</div>
<p>Lorem ...</p>
</div>
<div data-role="content">
<div data-role="navbar" >
<ul>
<li><a href="#" data-theme="e">Lien-1</a></li>
<li><a href="#" data-theme="e">Lien-2</a></li>
</ul>
</div>
<p>Lorem ...</p> </div>
Ajouter une icône
Il est bien évidemment possible d'ajouter une icône aux items d'une barre de navigation. L'attribut est le même que pour l'ajout d'icône aux bouton : data-icon. Cet attribut sera à placer dans le lien.
<div data-role="navbar" >
<ul>
<li><a href="#" >Lien-1</a></li>
<li><a href="#" data-theme="e" data-icon="forward">Lien-2</a></li>
</ul>
</div>
12 - Eléments de formulaire
Notions générales
Par défaut les éléments de formulaire s'affichent dans les styles prévus par jqm. Pour annuler la mise en forme automatique, on ajoutera l'attribut data-role="none" dans la balise de l'élément.
Exemple
<div data-role="fieldcontain">
<label for="textinput">Saisie de texte :</label>
<input type="text" name="textinput" id="textinput" value="" data-role="none"/>
</div>
Il est conseillé d'entourer les éléments de formulaire par une balise <div> avec l'attribut data-role="fieldcontain". Cet attribut ajoutera au bas de chaque élément un petit filet de séparation.
<div data-role="fieldcontain">
<label for="textinput">Saisie de texte :</label>
<input type="text" name="textinput" id="textinput" value="" />
</div>
Pour les écrans de taille inférieure à 480px, jqm affiche la balise label en tant que bloc. Cela crée donc un retour à la ligne qui permet une mise en page plus appropriée pour cette taille d'écran. La copie d'écran précédente présente un écran de taille inférieur à 480px. La copie d'écran suivante présente un écran de taille supérieur à 480px.
Saisie de texte – input type="text"
<div data-role="fieldcontain">
<label for="textinput">Saisie de texte :</label>
<input type="text" name="textinput" id="textinput" value="" />
</div>
Zone de texte – textarea
<div data-role="fieldcontain">
<label for="textarea">Zone de texte:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea">
</textarea>
</div>
Mot de passe – input type="password"
<div data-role="fieldcontain">
<label for="passwordinput">Saisie du mot de passe :</label>
<input type="password" name="passwordinput" id="passwordinput" value="" />
</div>
Recherche – input type="search"
<div data-role="fieldcontain">
<label for="searchinput"> Rechercher</label>
<input type="search" name=" searchinput " id=" searchinput " value="" />
</div>
Menu de sélection – select
<div data-role="fieldcontain">
<label for="selectmenu" class="select">Options : </label>
<select name="selectmenu" id="selectmenu">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
</div>
<select name="selectmenu" id="selectmenu" data-native-menu="false">
Case à cocher
Les groupes de case à cocher se crées de manière classique en attribuant le même attribut name aux éléments de type "checkbox". Jqm, peut afficher ces groupes de 2 manières. Les cases sont placées les unes au dessous des autres. Les cases sont placées les unes à côté des autres.
Exemple : cases les unes au dessous des autres. L'attribut data-role="fieldcontain" permet de regrouper le groupe de case.
<div data-role="fieldcontain" >
<fieldset data-role="controlgroup" >
<legend>Option</legend>
<input type="checkbox" name="checkbox1" id="checkbox1_0" class="custom" value="" />
<label for="checkbox1_0">Option</label>
<input type="checkbox" name="checkbox1" id="checkbox1_1" class="custom" value="" />
<label for="checkbox1_1">Option</label>
<input type="checkbox" name="checkbox1" id="checkbox1_2" class="custom" value="" />
<label for="checkbox1_2">Option</label>
<input type="checkbox" name="checkbox1" id="checkbox1_3" class="custom" value="" />
<label for="checkbox1_3">Option</label>
</fieldset>
</div>
Pour afficher les cases les unes à côté des autres, on place l'attribut data-type="horizontal" dans la balise <fieldset> contenant les cases. Il est à noter que l'aspect final n'est pas toujours heureux.
<fieldset data-role="controlgroup" data-type="horizontal">
Boutons radio
La réalisation de groupe de bouton radio suit le même principe que les cases à cocher. Le positionnement horizontal se réalise en ajoutant l'attribut data-type="horizontal" à la balise <fieldset>.
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Option</legend>
<input type="radio" name="radio1" id="radio1_0" value="" />
<input type="radio" name="radio1" id="radio1_1" value="" />
<label for="radio1_1">Option</label>
</div>
La glissière
<div data-role="fieldcontain">
<label for="slider">Valeur :</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>
Le bouton bascule
Ce bouton doit être réalisé en utilisant une balise select pour laquelle on donne deux option : oui/non (par exemple). On ajoutera l'attribut data-role="slider" à la balise <select>
<div data-role="fieldcontain" >
<label for="flipswitch">Je serai présent</label>
<select name="flipswitch" id="flipswitch" data-role="slider">
<option value="off">Non</option>
<option value="on">Oui</option>
</select>
</div>
Les Menus
Liste de base
La réalisation d'un menu en liste est très classique. On ajoute seulement l'attribut data-role="listview" à la balise <ul> ou <ol>
<ul data-role="listview">
<li><a href="#">Page</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Page</a></li>
</ul>
Liste en block
On ajoute l'attribut data-inset="true" dans la balise <ul>
<ul data-role="listview" data-inset="true">
Liste avec icône particulière
On ajoute l'attribut data-icon="plus"
<li data-icon="plus">
Liste fractionnée
C'est une liste qui possède deux parties ayant des liens différents. Généralement le second lien permet d'avoir une info sur la page à ouvrir. Ce type de liste est réalisé de manière simple, avec deux liens placés l'un à côté de l'autre.
<ul data-role="listview" data-split-icon="info">
<li>
<a href="page1.html">Page 1</a>
<a href="page1-info.html" title="info">Info</a>
</li>
<li>
<a href="page1.html">Page 2</a>
<a href="page2-info.html" title="info">Info</a>
</li>
<li>
<a href="page1.html">Page 3</a>
<a href="page3-info.html" title="info">Info</a>
</li>
</ul>
Liste avec sous liste
Pour réaliser un menu ouvrant sur un autre menu, il n'est pas utile de réaliser plusieurs pages. Deux listes imbriquées suffisent. Jqm créera automatiquement une nouvelle page avec le deuxième niveau de liste. Le titre de cette nouvelle page sera donné par le texte situé immédiatement après le début de la balise <li> parent.
<ul data-role="listview" data-inset="true">
<li>Sous liste 1
<ul>
<li>Sous liste 1.1</li>
<li>Sous liste 1.1</li>
</ul>
</li>
<li><a href="#">Sous liste 2</a></li>
<li>Sous liste 3</li>
</ul>
Liste avec vignette
Pour réaliser une telle liste, il faut garder à l'esprit le fait que nous sommes avec une DTD pour HTML5. Cela change un certain nombre de chose et donne notamment la possibilité de placer des éléments de type bloc à l'intérieur de la balise <a> qui est de type inline.
Nous allons donc placer dans une balise <a> Les éléments qui constitueront notre élément de liste, a savoir une image, un titre et un texte. Jqm mettra automatiquement en forme cette structure.
<li>
<a href="#p2">
<img src="images/ptites/portrait-2.jpg" width="75" height="75">
<h3>Portrait 2</h3>
<p>Vagabond</p>
</a>
</li>
Note. Pour ceux qui utiliseraient une version 1.0a de jqm. Dans cette version la structure de la liste était être un peu différente, vous devez modifier votre structure si vous utilisez maintenant une version de jqm supérieur.
Réaliser des zones dépliables
Eléments dépliables simples
Un élément dépliable est constitué de deux parties. Une partie, toujours visible sur laquelle on cliquera pour déplier la seconde partie.
Dans le code html, cela se traduira par un élément <hn> et un élément <p> ou <div>. Il est obligatoire de créer un élément h, vous ne pourrez pas le remplacer par un élément <p> ou <div>. En revanche, le niveau de l'élément <hn> n'a pas d'importance. Par défaut jqm affiche tous les niveaux<hn> dans le même corps. Les deux éléments seront ensuite placés dans un bloc <div> qui précisera le caractère dépliable de l'ensemble grâce à l'attribut data-role="collapsible".
<div data-role="collapsible"><!-- élément repliable 1-->
<h3>En-tête</h3>
<p>Contenu de l'élément repliable 1</p>
</div>
<!—fin de l'élément repliable 1-->
<div data-role="collapsible" data-collapsed="true"><!-- élément repliable 2, replié-->
<h3>En-tête</h3>
<p>Contenu de l'élément repliable 2</p>
</div>
<!—fin de l'élément repliable 2-->
Groupe d'éléments dépliables
Pour réaliser un groupe d'élément dépliables, on entoure les éléments avec une balise <div> qui a l'attribut data-role="collapsible-set". Les éléments ainsi regroupés se présentent collés les uns aux autres et les premiers et derniers éléments ont des bords arrondis.
<div data-role="collapsible-set"><!--groupe des élts repliables-->
<div data-role="collapsible"><!-- élément repliable 1-->
<h3>En-tête</h3>
<p>Contenu de l'élément repliable 1</p>
</div>
<!—fin de l'élément repliable 1-->
<div data-role="collapsible" data-collapsed="true"><!-- élément repliable 2, replié-->
<h3>En-tête</h3>
<p>Contenu de l'élément repliable 2</p>
</div>
<!—fin de l'élément repliable 2-->
</div>
<!—fin du groupe-->
Liens utiles
- Téléchargement de ce support
Ici pas de pdf, vous choisissez la commande Imprimer de votre navigateur, puis vous enregistrez en pdf. Le document est conçu pour cela. - sheet cheat jQueryMobile
- Documentation sur jQuery Mobile - en
- Documentation sur jQuery - en
Aide mémoire
| Attributs | Valeurs | Utilisations |
| data-ajax | "false" | Permet d'afficher une page sans requête ajax (a utiliser pour accéder par ex à une ancre d'une page externe) |
| data-back-btn-text | string | |
| data-backbtn | "false" | Pour retirer le bouton de retour lorsqu'il est placé automatiquement |
| data-close-btn-text | string | |
| data-collapsed | "true" | Spécifie que l'élément est replié |
| data-counttheme | "a" | "b" | "c" | "d" | "e" | Thème des info de compteur (créé avec la classe ui-li-count) |
| data-direction | "reverse" | Placé sur un bouton, permet de faire une transition inverse de celle qui à ouvert la page |
| data-dividertheme | "a" | "b" | "c" | "d" | "e" | Spécifie le thème des éléments li de division (avec list-divider) |
| data-filter | "true" | Permet de créer un champ de recherche dans une liste |
| data-fullscreen | "true" | Affiche le contenu de la zone "content" sur l'ensemble de l'écran. (fais passer dessous header et footer en position fixed) |
| data-icon | "check" | "delete" | "search" | "arrow-l" | "arrow-r" | "arrow-d" | "arrow-u" | "plus" | "minus" | "gear" | "refresh" | "forward" | "back" | "grid" | "star" | "alert" | "info" | "home" | Permet de spécifier une icône sur un élément bouton ou menu |
| data-iconpos | "right" | "top" | "bottom" | "notext" | Permet de positionner l'icône d'un bouton. |
| data-inline | "true" | Permet de mettre des boutons les uns à côté des autres |
| data-inset | "true" | Permet de créer une page de sous liste d'une liste |
| data-native-menu | "false" | Désactive l'aspect classique d'un menu select et affiche une mise en forme jqm. |
| data-placeholder | Dans une balise select, permet de préciser que cette ligne (la 1ere) ne fait pas partie des options. | |
| data-rel | "back" | "dialog" | "back" - crée un bt de retour. "dialog" - crée une boîte de dialogue |
| data-role | "none" | Permet de désactiver la mise en forme de l'élément |
| data-role | "button" | Spécifie que cet élément est un bouton |
| data-role | "collapsible" | Spécifie que cet élément est un élément dépliable |
| data-role | "collapsible-set" | Permet de regrouper des éléments dépliables (collapsible) |
| data-role | "content" | Spécifie que cet élément est une zone de contenu |
| data-role | "controlgroup" | Permet de regrouper des boutons |
| data-role | "footer" | Spécifie que cet élément est un pied de page |
| data-role | "header" | Spécifie que cet élément est un entete |
| data-role | "list-divider" | Spécifie que cet élément est un séparateur de liste |
| data-role | "listview" | Spécifie que cet élément est une liste de menu |
| data-role | "navbar" | Spécifie que cet élément est une barre de navigation |
| data-role | "page" | Spécifie que cet élément est une page |
| data-split-icon | string icon | Permet de définir l'icône des menus fractionnés |
| data-split-theme | "a" | "b" | "c" | "d" | "e" | Permet de choisir le thème de la partie fractionnée d'un menu fractionné |
| data-state | "collapsed" | Précise qu'un élément dépliable est déplié par défaut |
| data-theme | "a" | "b" | "c" | "d" | "e" | Permet de choisir le thème d'une page ou d'un élément |
| data-title | string | Remplace la balise html title pour les pages multiples |
| data-transition | "slide" | "slideup" | "slidedown" | "pop" | "fade" | "flip" | Affiche une page avec la transition |
| data-type | "horizontal" | Permet de placer des boutons les uns à côté des autres. S'utilise avec data-role="controlgroup"; |
| data-role | "fieldcontain" | Permet de regrouper des éléments de formulaire |
| data-add-back-btn | "true" | Premet d'ajouter un bouton de retour |
| data-position | "fixed" | Placé sur le header ou le footer, ces éléments resteront toujours en place. |
| data-filter-placeholder | string | Permet d'écrire quelques mots d'aide dans un champ de recherche crée avec data-filter |
| data-filter-theme | "a" | "b" | "c" | "d" | "e" | Pour changer le thème du champ de recherche créé avec data-filter |
| Thierry Audoux - Septembre 2011 | ||
A propos
Je suis enseignant dans plusieurs écoles et notamment à Gobelins, l'école de l'image. Je m'imtéresse à de nombreuses technologies et les technologies Mobiles bouleversent actuellement notre paysage web. Mon métier me conduit à découvrir et à faire découvrir de nouveaux outils et jQuery Mobile m'a semblé intéressant. Ayant décidé de l'enseigner cette année 2011-2012, j'ai réalisé un suppport de cours à partir des documents que jai pu glanner sur le web.
Le but de ce site est principalement la mise en ligne de ce support de cours et, plus largement, de faire connaître la librairie jQuery Mobile aux internautes francophones. Les informations présentes dans ce document proviennent principalement du site jQuery Mobile Anglais. Il ne s'agit pas d'une traduction du site, mais plutôt d'une adaptation.
Ce site à été réalisé pour une consultation sur un écran d'ordinateur et également pour une visualisation sur un smartphone ou une tablette.
N'hésitez pas à me laisser vos commentaires