Jquery mobile

2,262
-1

Published on

bases pour appré

Published in: Self Improvement
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,262
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
54
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Jquery mobile

  1. 1. jQuery mobile – les basesVoyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 1
  2. 2. 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
  3. 3. 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><!-- /header --> <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><!-- /content --> </div><!-- /page --> </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
  4. 4. 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
  5. 5. jQuery mobile – les basesBoutonLiens avec data-role="button". Les boutons basés sur linput et les élémentsbutton sont améliorés automatiquement, donc aucun data-role nest requis.• data-corners = true | false• data-icon = home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search• data-iconpos = left | right | top | bottom | notext• data-iconshadow = true | false• data-inline = true | false• data-shadow = true | false• data-theme = Lettre échantillon (a-z)Plusieurs boutons peuvent être placés dans un conteneur avec lattribut data-role="controlgroup" dun ensemble vertical groupé. Ajouter lattribut data-type="horizontal" pour placer les boutons côte à côte. Voyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 5
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. jQuery mobile – les basesListeOL ou UL avec data-role="listview" data-count-theme = Lettre échantillon (a-z) data-dividertheme = Lettre échantillon (a-z) data-filter = true | false data-filter-placeholder = string data-filter-theme = Lettre échantillon (a-z) data-inset = true | false data-split-icon = home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search data-theme = Lettre échantillon (a-z) Voyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 12
  13. 13. jQuery mobile – les basesElément de listeLI au sein dune liste data-icon = home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search data-role = list-divider data-theme = Lettre échantillon (a-z) - peut également être défini sur chaque LI Voyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 13
  14. 14. 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
  15. 15. 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
  16. 16. jQuery mobile – les basesListe déroulanteTous les éléments select du formulaire sont auto-améliorés, aucun data-rolerequis. data-icon = home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search data-iconpos = left | right | top | bottom | notext data-inline = true | false data-native-menu = true | false data-overlay-theme = Lettre échantillon (a-z) - Thème de superposition pour les selects non natifs data-placeholder = true | false - Ajouté à loption data-role = none (empêche lauto-amélioration dutiliser le contrôle natif) data-theme = Lettre échantillon (a-z) - Ajouté à lélément formulairePlusieurs selects peuvent être encapsulés dans un fieldset avec un attributdata-role ="controlgroup" dun ensemble vertical groupé. Ajouter les donnéesde type="horizontal" pour afficher des selects côte à côte. Voyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 16
  17. 17. 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
  18. 18. jQuery mobile – les liensEn savoir plus :• Le site de jQuery mobile - http://jquerymobile.com/• jQuery Mobile Tutoriels et exemples en Français - http://jquery- mobile.touraineverte.com/index.html Voyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 18
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×