Après 5 versions Alpha, 3 Beta et 2
RC, jQuery Mobile sort en version finale 1.0. Ce framework dérivé de jQuery permet de créer des
UI, ayant l'aspect application iOS pour terminaux mobiles facilement. Il est basé sur les nouveaux standards du web HTML5 et CSS3, donc compatible avec la majorité des navigateurs web mobile, mais ceux qui ne supporteront pas HTML5 et CSS3 auront une interface graphique de moindre qualité.
Nouveaux éléments d'interface proposés
Comment utiliser jQuery Mobile ?
jQuery Mobile doit être utilisé avec la version 1.6.4 de jQuery. Pour utiliser la version 1.7, il va falloir attendre jQuery Mobile 1.1.
Voici le code à insérer dans vos pages :
Code : HTML | <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
|
Éléments de formulaire
jQuery Mobile permet de créer des interfaces spéciales mobiles avec des boutons type radio ou checkbox très facilement, ainsi que des listes d'options et des boutons d'envoi.
Vous pouvez tester tous les éléments formulaire de jQuery Mobile sur
ThemeRoller.
Liste checkbox :
Les listes de choix sont très connues. Les listes de type checkbox permettent de choisir plusieurs entrées dans toute une liste.
Boutons type checkbox avec jQuery Mobile.
Boutons radio :
Les listes de choix sont très connues. Les listes de type radio permettent de choisir une entrée sur plusieurs.
Boutons type radio avec jQuery Mobile.
Boutons ON/OFF :
Le bouton ON/OFF, peu utilisé sur le web, permet de choisir entre deux possibilités
Bouton ON/OFF avec jQuery Mobile.
Listes déroulantes (type selection) :
Comme sur iOS, jQuery Mobile 1.0 permet de faire des listes déroulantes dans les formulaires très accessibles. On clique dessus, et les différentes options s'affichent.
Listes de sélection avec jQuery Mobile.
Zone de texte monoligne :
Nous pouvons, grâce à ce framework, faire de belles zones de texte monolignes accessibles aux terminaux mobiles.
Zone de texte monoligne avec jQuery Mobile.
Le slider :
Déjà disponible dans
jQuery UI, le slider permet à l'utilisateur de sélectionner des nombres facilement. Il est revisité ici pour les téléphones.
Slider avec jQuery Mobile.
Le bouton :
jQuery Mobile permet de faire des gros boutons facilitant l'usage avec des petits écrans.
Bouton avec jQuery Mobile.
Éléments de présentation
Comme dans l'interface d'iOS, jQuery Mobile permet de créer des interfaces mobiles avec des outils type barre de menu ou de pied de page.
Éléments de mise en page / variation de la mise en page
Comme il a été dit précédemment, jQuery Mobile permet de créer des interfaces utilisateurs de type iOS. En effet, le
framework propose diverses barres d'en-tête ou de pied de page avec la possibilité de faire des boutons pour retourner à l'accueil ou enregistrer des données. Quelques exemples :
Barre d'en-tête avec le bouton accueil.
Barre avec boutons de gestion, ici pour enregistrer un contact.
De plus, les interfaces s'adaptent à la résolution de l'écran, notamment grâce aux Media Queries CSS3. Voici deux exemples :
Interface mobile.
Interface tablette/ordinateur.Quels navigateurs sont supportés par jQuery Mobile ?
Le site de jQuery Mobile propose
une liste des différents navigateurs supportés, séparés en quatre catégories :
- La première, identifiée par le A dans le tableau ci-dessous, Haute Qualité : le navigateur peut gérer des requêtes de type Ajax et les transitions entre les pages sont animées. Ces navigateurs sont activement testés mais, ne recevront pas forcément toutes les capacités de jQuery Mobile.
- La seconde, identifiée par le B dans le tableau ci-dessous, qualité moyenne : le navigateur ne peut gérer des requêtes de type AJAX, les transitions entre les pages ne sont pas animées mais les autres fonctionnalités sont toujours présentes ;
- La troisième, identifiée par le C dans le tableau ci-dessous, faible qualité : fonctionnalités basiques. Par contre, "l'expérience" HTML reste fonctionnelle ;
- L'avant-dernière, identifiée par une case vide dans le tableau ci-dessous, aucune information : peut fonctionner mais n'a pas été assez testé ou débuggé.
- Et enfin le F, qui signifie que ce ne sera pas compatible du tout.
La suite ?
Pour l'instant, aucune nouvelle version de jQuery Mobile est en développement. Cependant, nous pouvons espérer des nouveautés comme l'amélioration de la rapidité ou de nouveaux éléments d'interface. Nous savons néanmoins une chose, c'est que la nouvelle version sera compatible avec
au minimum la version 1.7.1 du framework principal.
Sources :
Trouvez une formation
Précédente
Suggestions
Flux RSS News
Twitter
Facebook
Google+
25 Participations
Connectez-vous !
Connectez-vous !
Revenir à la liste des news
Lire aussi