JQuery Mobile

Table of contents

1. Couverture
2. Page de titre
3. Copyright
4. Du même auteur
5. Avant-propos
6. Table des matières
7. Première Partie: Afficher les composants graphiques
   1. Chapitre 1: Installation de jQuery Mobile
      1. Installation d’un serveur web
      2. Installation de jQuery Mobile
         1. Installation sous un serveur PHP
         2. Installation indépendante d’un type de serveur
      3. Paramétrages spécifiques à l’iPhone
         1. Rendre l’application accessible depuis le bureau de l’iPhone
         2. Supprimer l’affichage de la barre d’adresse du navigateur
         3. Définir une image affichée au démarrage
   2. Chapitre 2: Afficher des fenêtres
      1. Une première fenêtre
      2. Et si on n’utilise pas de fenêtres ?
      3. Passer d’une fenêtre à l’autre
      4. Cas des fenêtres situées dans des pages HTML différentes
      5. Conserver les fenêtres en mémoire via l’attribut data‐dom‐cache
      6. Anticiper le chargement des fenêtres via l’attribut data‐prefetch
      7. Transitions entre les fenêtres
      8. Fenêtres superposées
         1. La fenêtre superposée est définie par les attributs du lien
         2. La fenêtre superposée est définie par ses propres attributs
      9. Utiliser les thèmes CSS
         1. Indiquer un nouveau thème pour une fenêtre
         2. Créer ses propres thèmes
   3. Chapitre 3: Afficher des listes
      1. Afficher une liste simple
      2. Ajouter des liens
      3. Afficher une liste numérotée contenant des liens
      4. Insérer des séparateurs dans les listes
      5. Ajouter une fonction de recherche dans une liste
      6. Afficher un compteur dans un élément de liste
      7. Inclure une image 80 × 80 dans les éléments de liste
      8. Inclure une image 20 × 15 dans les éléments de liste
      9. Personnaliser les listes
         1. Modifier l’icône affichée dans les listes
         2. Supprimer l’icône affichée dans les listes
         3. Afficher des listes avec des bords arrondis
         4. Positionner du texte à droite dans les éléments de liste
      10. Utiliser les thèmes CSS
          1. Plusieurs thèmes dans une liste
          2. Personnaliser les séparateurs dans les listes
          3. Personnaliser les compteurs affichés dans les listes
   4. Chapitre 4: Afficher des boutons
      1. Définir un bouton avec jQuery Mobile
      2. Que deviennent les anciens boutons définis par HTML ?
      3. Associer une icône à un bouton
      4. Définir un bouton sous forme d’icône (sans texte)
      5. Définir la largeur du bouton
      6. Juxtaposer les boutons verticalement
      7. Juxtaposer les boutons horizontalement
      8. Personnaliser les boutons
      9. Utiliser les thèmes CSS
   5. Chapitre 5: Afficher des données sous forme de tables
      1. Afficher un tableau sur deux colonnes
      2. Afficher un tableau sur plusieurs colonnes
      3. Plusieurs lignes dans le tableau
      4. Insérer des boutons dans les tableaux
      5. Personnaliser les tableaux
         1. Un tableau aéré et centré
         2. Alterner les lignes paires et impaires (en créant ses propres styles)
         3. Utiliser les styles définis par jQuery Mobile
         4. Aligner les boutons côte à côte
      6. Utiliser les thèmes CSS
   6. Chapitre 6: Afficher les éléments de formulaires
      1. Les champs de saisie
         1. Saisie sur une ligne
         2. Saisie sur plusieurs lignes
         3. Champs de recherche
      2. Les listes de sélection
         1. Listes de sélection simple
         2. Listes de sélection multiple
         3. Grouper les éléments dans la liste
         4. Modifier l’icône affichée pour la liste
      3. Les cases à cocher
         1. Afficher une case à cocher
         2. Disposer les cases à cocher verticalement
         3. Disposer les cases à cocher horizontalement
      4. Les boutons radio
         1. Disposer les boutons radio verticalement
         2. Disposer les boutons radio horizontalement
      5. Les interrupteurs
      6. Les sliders
      7. Mieux disposer les éléments sur l’écran
         1. Les menus en accordéon
         2. Espacer les groupes d’informations
      8. Utiliser les thèmes CSS
      9. Et si on veut conserver l’aspect d’origine des éléments ?
   7. Chapitre 7: Afficher les barres d’outils
      1. Les barres d’outils header et footer
         1. Header
         2. Footer
      2. Les barres d’outils de type fixe
      3. Gérer les fenêtres en mode plein écran
      4. Créer des boutons dans une barre d’outils header
         1. Insérer un ou plusieurs boutons
         2. Simuler le bouton Back
         3. Renommer le bouton Back
      5. Créer des boutons dans une barre d’outils footer
         1. Insérer un ou plusieurs boutons
         2. Grouper les boutons
      6. Utiliser les barres de navigation
         1. Insertion dans une barre d’outils header
         2. Insertion dans une barre d’outils footer
         3. Insertion en dehors d’une barre d’outils
         4. Répartir les boutons dans plusieurs lignes de la barre de navigation
      7. Insérer des icônes dans les barres de navigation
         1. Insérer une icône standard
         2. Insérer une icône personnalisée
      8. Créer un footer persistant dans les fenêtres
         1. Barre d’outils simple
         2. Barre de navigation
      9. Utiliser les thèmes CSS
8. Deuxième Partie: Manipuler les éléments avec JavaScript
   1. Chapitre 8: Conventions de jQuery Mobile
      1. L’objet $.mobile
      2. Initialisation de jQuery Mobile
      3. Options de configuration
         1. Options gérant les fenêtres
         2. Options gérant les listes
         3. Options gérant les barres de navigation
         4. Options gérant les boutons
         5. Options gérant les champs de saisie
         6. Options gérant les cases à cocher et les boutons radio
         7. Options gérant les listes de sélection
         8. Options gérant les sliders
         9. Options gérant les menus en accordéon
      4. Utilisation des namespaces
         1. Indiquer le namespace dans la page HTML
         2. Accéder à l’attribut dans le code JavaScript
         3. Les méthodes jqmData (name) et jqmData (name, value)
         4. Accéder à l’attribut dans les sélecteurs
      5. Événements virtuels
   2. Chapitre 9: Créer un composant jQuery Mobile
      1. Créer et utiliser un composant
      2. Être prévenu de la création du composant
      3. Transmettre des paramètres au composant
      4. Utiliser le composant au moyen d’un appel Ajax
         1. Avec la méthode de création du composant
         2. Avec l’événement create
      5. Ajouter des méthodes au composant
      6. Créer et gérer des événements sur le composant
      7. Remplacer deux événements par un seul
      8. Composants définis dans jQuery Mobile
   3. Chapitre 10: Manipuler les fenêtres
      1. Gérer les attributs des liens
         1. Lien vers une adresse e‐mail ou un numéro de téléphone
         2. Lien vers une fenêtre située dans la même page HTML
         3. Lien vers une fenêtre située dans une autre page HTML sur le même serveur
         4. Construction de la fenêtre par le serveur PHP
         5. Lien vers une autre page HTML située sur un autre serveur
         6. Inhiber le chargement d’une page HTML avec Ajax
         7. Cas des fenêtres superposées
      2. La méthode $.mobile.changePage (toPage, options)
         1. Afficher une fenêtre située dans la même page HTML
         2. Afficher une fenêtre située dans une autre page HTML
         3. Transmettre des données lors de l’affichage de la fenêtre
         4. Modifier la transition affichant la fenêtre
         5. Créer une fenêtre dynamiquement, puis l’afficher suite à un clic
      3. La méthode $.mobile.loadPage (url, options)
         1. Simuler l’attribut data‐prefetch en utilisant la méthode $.mobile.loadPage ()
      4. Processus de création des fenêtres
         1. Traitement de l’événement pagecreate
         2. Création des composants standards dans jQuery Mobile
         3. Synchronisation de la création des composants dans la fenêtre
      5. Fenêtres superposées
         1. Afficher une fenêtre superposée
         2. Fermer une fenêtre superposée
         3. Supprimer le bouton de fermeture de la fenêtre superposée
      6. Autres méthodes et propriétés
      7. Gérer les événements sur les fenêtres
         1. Création de la fenêtre
         2. Chargement de la fenêtre via Ajax
         3. Suppression de la fenêtre dans le DOM
         4. Affichage de la fenêtre
         5. Événements liés à la méthode $.mobile.changePage ()
         6. Mouvements dans la fenêtre
         7. Changement d’orientation de l’écran
      8. Personnaliser les fenêtres
      9. Exemples de manipulation des fenêtres
         1. Naviguer entre plusieurs fenêtres grâce aux événements « swipe »
         2. Créer une fenêtre dynamiquement puis l’afficher
   4. Chapitre 11: Manipuler les listes
      1. Créer dynamiquement une liste
         1. Liste sans images
         2. Liste avec images
      2. Transformer une liste HTML en une liste jQuery Mobile
      3. Récupérer une liste par un appel Ajax
      4. Insérer un élément dans une liste
      5. Supprimer un élément dans une liste
      6. Gérer les événements sur les listes
      7. Personnaliser les listes
      8. Exemples de manipulation des listes
         1. Créer des listes contenant des sous‐listes
         2. Modifier l’icône d’un élément de liste
         3. Gérer le clic sur l’icône d’un élément dans une liste statique
         4. Gérer le clic sur l’icône d’un élément dans une liste créée dynamiquement
            1. Solution 1
            2. Solution 2
         5. Permettre la suppression d’un élément de liste par un clic prolongé
         6. Permettre la suppression d’un élément de liste par un « swipe »
         7. Conserver l’aspect arrondi aux bords de la liste
   5. Chapitre 12: Manipuler les boutons
      1. Créer dynamiquement un bouton
      2. Transformer un élément HTML en un bouton jQuery Mobile
      3. Insérer des boutons via Ajax
      4. Gérer les événements sur les boutons
      5. Personnaliser les boutons
         1. Aspect général du bouton
         2. Aspect du bouton après un clic
      6. Exemples de manipulation des boutons
         1. Gérer un bouton à deux états (enfoncé/non enfoncé)
         2. Modifier dynamiquement le texte et l’icône du bouton
         3. Afficher dynamiquement un bouton de suppression sur un élément de liste
         4. Cacher le bouton de suppression par un clic à l’extérieur du bouton
   6. Chapitre 13: Manipuler les données sous forme de tables
      1. Créer dynamiquement un tableau
      2. Transformer un élément HTML en un tableau jQuery Mobile
         1. Tableau simple
         2. Tableau contenant des boutons
      3. Insérer des tableaux via Ajax
         1. Tableau simple
         2. Tableau contenant des boutons
      4. Insérer dynamiquement une nouvelle colonne
      5. Insérer dynamiquement une nouvelle ligne
      6. Gérer les événements sur les tableaux
      7. Exemple de manipulation des tableaux
         1. Un menu principal sous forme d’images dans un tableau
   7. Chapitre 14: Manipuler les champs de saisie
      1. Créer dynamiquement un champ de saisie
         1. Champ de saisie d’une seule ligne
         2. Champ de saisie multiligne
         3. Champ de recherche
      2. Transformer un élément HTML en champ de saisie jQuery Mobile
         1. Champ de saisie d’une seule ligne
         2. Champ de saisie multiligne
         3. Champ de recherche
      3. Insérer des champs de saisie par un appel Ajax
      4. Affecter et récupérer la valeur inscrite dans un champ de saisie
         1. Champs de saisie simple et multiligne
         2. Champs de recherche
      5. Gérer les événements sur les champs de saisie
      6. Personnaliser les champs de saisie
         1. Modifier l’aspect d’un champ de saisie qui n’a pas le focus
         2. Modifier l’aspect d’un champ de saisie qui a le focus
      7. Exemples de manipulation des champs de saisie
         1. Transmettre la valeur d’un champ de saisie sur le serveur via Ajax
         2. Afficher la réponse du serveur dans une nouvelle fenêtre
   8. Chapitre 15: Manipuler les listes de sélection
      1. Créer dynamiquement une liste de sélection
      2. Transformer un élément HTML en une liste de sélection jQuery Mobile
         1. Utiliser l’affichage natif des listes de sélection
         2. Utiliser l’affichage amélioré des listes de sélection
      3. Insérer une liste de sélection par un appel Ajax
      4. Ouvrir et fermer une liste de sélection
         1. Liste de sélection déjà présente dans le code HTML
         2. Liste de sélection créée dynamiquement
      5. Affecter et récupérer les éléments sélectionnés dans une liste
         1. Liste de sélection déjà présente dans le code HTML
         2. Liste de sélection créée dynamiquement
      6. Insérer et supprimer des éléments dans une liste de sélection
      7. Gérer les événements sur les listes de sélection
      8. Personnaliser les listes de sélection
      9. Exemples de manipulation des listes de sélection
         1. Transmettre la valeur d’une liste de sélection sur le serveur via Ajax
         2. Utiliser un bouton de type « submit » pour transmettre les informations
         3. Ajouter un élément de liste suite à un clic sur un bouton
         4. Effectuer un traitement lors d’un clic sur un élément quelconque de la liste
   9. Chapitre 16: Manipuler les cases à cocher
      1. Créer dynamiquement des cases à cocher
      2. Transformer un élément HTML en case à cocher jQuery Mobile
      3. Insérer des cases à cocher via Ajax
      4. Affecter et récupérer la valeur d’une case à cocher
         1. Case à cocher déjà présente dans le code HTML
         2. Case à cocher créée dynamiquement
      5. Insérer et supprimer une case à cocher dans une liste existante
      6. Gérer les événements sur les cases à cocher
      7. Personnaliser les cases à cocher
      8. Exemples de manipulation des cases à cocher
         1. Transmettre l’ensemble des valeurs des cases à cocher au serveur, puis afficher une autre fenêtre
         2. Utiliser un bouton de type « submit » pour transmettre les informations
   10. Chapitre 17: Manipuler les boutons radio
       1. Créer dynamiquement des boutons radio
       2. Transformer un élément HTML en bouton radio jQuery Mobile
       3. Insérer des boutons radio via Ajax
       4. Affecter et récupérer la valeur d’un bouton radio
          1. Bouton radio déjà présent dans le code HTML
          2. Bouton radio créé dynamiquement
       5. Insérer et supprimer un bouton radio dans une liste existante
       6. Gérer les événements sur les boutons radio
       7. Personnaliser les boutons radio
       8. Exemples de manipulation des boutons radio
          1. Transmettre le bouton radio sélectionné au serveur, puis afficher une autre fenêtre
          2. Utiliser un bouton de type « submit » pour transmettre les informations
   11. Chapitre 18: Manipuler les interrupteurs
       1. Créer dynamiquement un interrupteur
       2. Transformer un élément HTML en interrupteur jQuery Mobile
       3. Insérer un interrupteur via Ajax
       4. Affecter et récupérer la valeur d’un interrupteur
          1. Interrupteur déjà présent dans le code HTML
          2. Interrupteur créé dynamiquement
       5. Gérer les événements sur les interrupteurs
       6. Personnaliser les interrupteurs
       7. Exemples de manipulation des interrupteurs
          1. Transmettre la valeur de l’interrupteur au serveur, puis afficher une autre fenêtre
          2. Utiliser un bouton de type « submit » pour transmettre les informations
   12. Chapitre 19: Manipuler les sliders
       1. Créer dynamiquement un slider
       2. Transformer un élément HTML en slider jQuery Mobile
       3. Insérer un slider via Ajax
       4. Affecter et récupérer la valeur d’un slider
          1. Slider déjà présent dans le code HTML
          2. Slider créé dynamiquement
       5. Gérer les événements sur les sliders
       6. Personnaliser les sliders
       7. Exemples de manipulation des sliders
          1. Transmettre la valeur du slider au serveur
          2. Utiliser un bouton de type « submit » pour transmettre les informations
          3. Modifier l’opacité d’une image avec un slider
   13. Chapitre 20: Manipuler les menus en accordéon
       1. Créer dynamiquement un menu en accordéon
       2. Transformer un élément HTML en un menu en accordéon jQuery Mobile
       3. Insérer des menus en accordéon via Ajax
       4. Ouvrir et fermer un menu en accordéon
       5. Vérifier si un menu en accordéon est ouvert ou fermé
       6. Gérer les événements sur les menus en accordéon
       7. Personnaliser les menus en accordéon
       8. Exemples de manipulation des menus en accordéon
          1. Charger le contenu d’un menu en accordéon via Ajax
          2. Modifier dynamiquement le titre d’un menu en accordéon
          3. Produire un effet à l’ouverture et à la fermeture du menu en accordéon
   14. Chapitre 21: Manipuler les barres d’outils
       1. Créer dynamiquement une barre d’outils
       2. Transformer un élément HTML en une barre d’outils jQuery Mobile
       3. Insérer des barres d’outils via Ajax
       4. Insérer des barres de navigation via Ajax
       5. Gérer les événements sur les barres d’outils
       6. Personnaliser les barres d’outils
       7. Méthodes de gestion des barres d’outils de type fixe
       8. Exemples de manipulation des barres d’outils
          1. Gérer un système d’onglets dans une barre de navigation
          2. Gérer le contenu des onglets via Ajax
   15. Chapitre 22: Bases de données côté client
       1. Stockage permanent et stockage dans la session
       2. Création d’une base de données
       3. Utilisation de la base de données
          1. Exemple d’utilisation d’une base de données
          2. Amélioration du programme (suite)
   16. Chapitre 23: GPS et Google Maps
       1. Utiliser le GPS avec jQuery Mobile
       2. Intégrer une carte Google Maps à l’application
9. Troisième Partie: Étude de cas : développer une application de messagerie
   1. Chapitre 24: Cinématique de l’application
      1. Enchaînement des fenêtres
      2. Objectifs à traiter
   2. Chapitre 25: Étape n°1 : se connecter
      1. Côté client
      2. Côté serveur
   3. Chapitre 26: Étape n°2 : afficher les membres connectés
      1. Côté client
      2. Côté serveur
   4. Chapitre 27: Étape n°3 : envoyer des messages
      1. Côté client
      2. Côté serveur
   5. Chapitre 28: Étape n°4 : recevoir des messages
      1. Côté client
      2. Côté serveur
   6. Chapitre 29: Application complète
      1. Code HTML
      2. Code CSS
      3. Code JavaScript
      4. Images utilisées dans le script JavaScript
      5. Commandes SQL
      6. Programmes serveur
10. Index