Jquery mobile

jQuery mobile – les basesVoyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 1

jQuery mobile – les basesLa stratégie de jQuery mobile peut se résumer simplement : un systèmedinterface utilisateur unifiée, qui fonctionne en toute transparence sur toutesles plateformes mobiles populaires et construit sur la base éprouvée de jQueryet jQuery UI.Pour rendre cette compatibilité aussi large que possible, toutes les pagesjQuery Mobile sont construites sur une base propre, HTML sémantique, pourassurer la compatibilité avec à peu près nimporte quel dispositif du Web.Parmi les dispositifs qui interprètent CSS et JavaScript, jQuery Mobileappliquent des techniques damélioration progressives pour transformerdiscrètement la page sémantique dans une expérience riche, interactive quidémultiplie la puissance de jQuery et CSS. Voyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 2

jQuery mobile – les basesCode d’une page - structure<!DOCTYPE html><html> <head> <title>Titre de la Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Mon Titre</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true" data-filter="true"> <li><a href="#">Acura</a></li> <li><a href="#">Audi</a></li> <li><a href="#">BMW</a></li> <li><a href="#">Cadillac</a></li> <li><a href="#">Ferrari</a></li> </ul> </div> </div> </body></html>Se reporter à la page http://jquery-mobile.touraineverte.com/demos/1.0/docs/about/getting-started.html Voyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 3

jQuery mobile – les basesGestion des liensPar défaut, jQuery mobile charge les liens internes en ajax.Pour désactiver cette fonction, il vous faudra ajouter aux liens l’attribut data-ajax="false" ou rel="external".Gestion des tablettesPour obtenir un affichage adapté aux tablettes (medias queries et notions deresponsive design), la version de démos de jQuery mobile fournit un CSSspécifique que vous pouvez ajouter :Voir dans <link rel="stylesheet" href="docs/_assets/css/jqm-docs.css" /> Voyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 4

jQuery mobile – les basesCases à cocherLes labels et inputs avec type="checkbox" sont auto-améliorés, donc aucundata-role nest requis.• data-role = none (empêche lauto-amélioration dutiliser le contrôle natif)• data-theme = Lettre échantillon (a-z) - Ajouté à lélément formulaireBloc dépliableLe titre et le contenu sont placés dans un conteneur avec le data-role="collapsible«• data-collapsed = true | false• data-content-theme = Lettre échantillon (a-z)• data-theme = Lettre échantillon (a-z) Voyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 6

jQuery mobile – les basesAccordéonsUn certain nombre de collapsibles placés dans un conteneur avec data-role="collapsible-set«• data-content-theme = Lettre échantillon (a-z) - Définit toutes les collapsibles dans le jeu• data-theme = Lettre échantillon (a-z) - Définit toutes les collapsibles dans le jeuContenuContaineur avec data-role="content"• data-theme = Lettre échantillon (a-z)Conteneur de champContaineur avec data-role="fieldcontain" enroulé autour d’élément label/form Voyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 7

jQuery mobile – les basesBoîte de dialogueConteneur avec data-role="page" ou "dialog" liés au data-rel="dialog" surlancre.• data-close-btn-text = string (texte pour le bouton fermeture, dialogue uniquement)• data-dom-cache = true | false• data-id = string (id unique pour la page)• data-fullscreen = true | false (utilisé en conjonction avec les barres doutils fixes)• data-overlay-theme = Lettre échantillon (a-z) - Thème de superposition lorsque la page est ouverte dans une fenêtre de dialogue• data-theme = Lettre échantillon (a-z)• data-title = string (Titre utilisé lorsque la page est affichée) Voyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 8

jQuery mobile – les basesInterrupteurSélectionner avec data-role="slider", deux options uniquement data-role = none (empêche lauto-amélioration dutiliser le contrôle natif) data-theme = Lettre échantillon (a-z) - Ajouté à lélément formulaire data-track-theme = Lettre échantillon (a-z) - Ajouté à lélément formulairePied de pageConteneur avec data-role="footer« data-id = string (id unique, utile dans les pieds de page persistants) data-position = fixed data-theme = Lettre échantillon (a-z) Voyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 9

jQuery mobile – les basesEntêteConteneur avec data-role="header" data-add-back-btn = true | false (ajoute automatiquement le bouton Précédent. En-tête seulement) data-back-btn-text = string data-back-btn-theme = Lettre échantillon (a-z) data-position = fixed data-theme = Lettre échantillon (a-z) data-title = string (Titre utilisé lorsque la page est affichée) Voyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 10

jQuery mobile – les basesLienLiens, y compris ceux qui ont data-role="button", et les boutons de soumissionde formulaire partagent ces attributs data-ajax = true | false data-direction = reverse (animation inverse de transition de page) data-dom-cache = true | false data-prefetch = true | false data-rel = back (pour reculer dune étape dans lhistorique) = dialog (pour ouvrir un lien stylisé comme une boite de dialogue, non suivi dans lhistorique) = external (pour faire un lien vers un autre domaine) data-transition = slide | slideup | slidedown | pop | fade | flip Voyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 11

jQuery mobile – les basesPageConteneur avec data-role="page" data-close-btn-text = string (texte pour le bouton Fermer, boîte de dialogue uniquement) data-dom-cache = true | false data-id = string (id unique pour la page) data-fullscreen = true | false (utilisé en conjonction avec des barres doutils fixes) data-overlay-theme = Lettre échantillon (a-z) - Thème de la superposition lorsque la page est ouverte dans une boîte de dialogue data-theme = Lettre échantillon (a-z) data-title = string (Titre utilisé lorsque la page est affichée) Voyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 14

jQuery mobile – les basesBouton RadioLes balises labels et input de type="radio" sont améliorés automatiquement,pas de data-role requis data-role = none (empêche lauto-amélioration dutiliser le contrôle natif) data-theme = Lettre échantillon (a-z) - Ajouté à lélément formulaireCurseur (slider)Les balises inputs avec type="range" sont améliorés automatiquement, pas dedata-role requis. data-role = none (empêche lauto-amélioration dutiliser le contrôle natif) data-theme = Lettre échantillon (a-z) - Ajouté à lélément formulaire data-track-theme = Lettre échantillon (a-z) - Ajouté à lélément formulaire Voyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 15

jQuery mobile – les basesChamp de saisie & TextareaLes balises input type="text|number|search|etc." ou des éléments textareasont améliorés automatiquement, pas de data-role requis. data-role = none (empêche lauto-amélioration dutiliser le contrôle natif) data-theme = Lettre échantillon (a-z) - Ajouté à lélément formulaire Voyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 17

jQuery mobile – les liensEn savoir plus :• Le site de jQuery mobile - http://jquerymobile.com/• jQuery Mobile Tutoriels et exemples en Français - http://jquerymobile.touraineverte.com/index.html Voyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 18

Jquery mobile

by Voyelle on Jan 29, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 26

Statistics

Jquery mobile — Presentation Transcript