Jquery mobile

jQuery mobile – les bases

Voyelle - 6 place de l'église à St Jean Sur Vilaine - contact@voyelle.fr 1


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


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)



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"


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-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-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-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


Curseur (slider)

Les balises inputs avec type="range" sont améliorés automatiquement, pas de
data-role requis.

 data-track-theme = Lettre échantillon (a-z) - Ajouté à l'élément formulaire



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.



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


Jquery mobile

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Jquery mobile

Ähnlich wie Jquery mobile (10)

Mehr von Voyelle Voyelle

Mehr von Voyelle Voyelle (20)

Jquery mobile