Jquery mobile

jQuery mobile – les bases

1 Voyelle - 6 place de l'église à St Jean Sur Vilaine - [email protected]



La stratégie de jQuery mobile peut se résumer simplement : un système d'interface utilisateur unifiée, qui fonctionne en toute transparence sur toutes les plateformes mobiles populaires et construit sur la base éprouvée de jQuery et jQuery UI. Pour rendre cette compatibilité aussi large que possible, toutes les pages jQuery Mobile sont construites sur une base propre, HTML sémantique, pour assurer la compatibilité avec à peu près n'importe quel dispositif du Web. Parmi les dispositifs qui interprètent CSS et JavaScript, jQuery Mobile appliquent des techniques d'amélioration progressives pour transformer discrètement la page sémantique dans une expérience riche, interactive qui démultiplie la puissance de jQuery et CSS.

Code 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

http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css



http://code.jquery.com/jquery-1.6.4.min.js



http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js



http://jquery-mobile.touraineverte.com/demos/1.0/docs/about/getting-started.html



Gestion des liens Par 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 tablettes Pour obtenir un affichage adapté aux tablettes (medias queries et notions de responsive design), la version de démos de jQuery mobile fournit un CSS spécifique que vous pouvez ajouter : Voir dans <link rel="stylesheet" href="docs/_assets/css/jqm-docs.css" />



Cases à cocher Les labels et inputs avec type="checkbox" sont auto-améliorés, donc aucun data-role n'est requis. • data-role = none (empêche l'auto-amélioration d'utiliser le contrôle natif) • data-theme = Lettre échantillon (a-z) - Ajouté à l'élément formulaire Bloc dépliable Le 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)



Accordéons Un 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

jeu Contenu Containeur avec data-role="content" • data-theme = Lettre échantillon (a-z) Conteneur de champ Containeur avec data-role="fieldcontain" enroulé autour d’élément label/form



Boîte de dialogue Conteneur avec data-role="page" ou "dialog" liés au data-rel="dialog" sur l'ancre. • 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 d'outils

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)



Interrupteur Sélectionner avec data-role="slider", deux options uniquement data-role = none (empêche l'auto-amélioration d'utiliser 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 Pied de page Conteneur 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)



Entête Conteneur 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)



Lien Liens, y compris ceux qui ont data-role="button", et les boutons de soumission de 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 d'une étape dans l'historique)

= dialog (pour ouvrir un lien stylisé comme une boite de dialogue, non suivi dans l'historique) = external (pour faire un lien vers un autre domaine)

data-transition = slide | slideup | slidedown | pop | fade | flip



Page Conteneur 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 d'outils

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)



Bouton Radio Les balises labels et input de type="radio" sont améliorés automatiquement, pas de data-role requis data-role = none (empêche l'auto-amélioration d'utiliser le contrôle natif) data-theme = Lettre échantillon (a-z) - Ajouté à l'élément formulaire Curseur (slider) Les balises inputs avec type="range" sont améliorés automatiquement, pas de data-role requis. data-role = none (empêche l'auto-amélioration d'utiliser 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



Liste déroulante Tous les éléments select du formulaire sont auto-améliorés, aucun data-role requis. data-icon = home | delete | plus | arrow-u | arrow-d | check | gear | grid |


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é à l'option data-role = none (empêche l'auto-amélioration d'utiliser le contrôle natif) data-theme = Lettre échantillon (a-z) - Ajouté à l'élément formulaire

Plusieurs selects peuvent être encapsulés dans un fieldset avec un attribut data-role ="controlgroup" d'un ensemble vertical groupé. Ajouter les données de type="horizontal" pour afficher des selects côte à côte.



Champ de saisie & Textarea Les balises input type="text|number|search|etc." ou des éléments textarea sont améliorés automatiquement, pas de data-role requis. data-role = none (empêche l'auto-amélioration d'utiliser le contrôle natif) data-theme = Lettre échantillon (a-z) - Ajouté à l'élément formulaire

jQuery mobile – les liens


En 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

http://jquerymobile.com/

http://jquerymobile.com/

http://jquery-mobile.touraineverte.com/index.html




Jquery mobile

Self Improvement

Transcript of Jquery mobile