Quelqu'un peut m'expliquer jQuery Mobile ?

Bonjour,

Je suis webmaster professionnel depuis plus de 10 ans et je suis en train de travailler sur un nouveau site. J'ai besoin qu'il soit responsive et que la version "portable" se rapproche au maximum d'une application.

Je me suis renseigné sur les différentes solutions et jQuery Mobile me semble être la meilleure. Je connais très bien jQuery et jQuery UI.

J'ai donc inclus les fichiers de jQuery Mobile, j'ai très facilement inclus un panneau de navigation adapté aux mobiles, mais il y a des comportements que je ne comprends pas du tout : avec une résolution "bureau" (1000px minimum), jQuery Mobile applique le style pour mobile : il me change mes boutons de formulaire, mon CSS... Et ce n'est pas du tout adapté... Comment faire pour lui dire de n'agir que sous une certaine largeur en pixels (comme les media queries pour le css) ?

Merci d'avance pour vos réponses, je ne trouve rien dessus depuis des heures... Je comprends que c'est une solution très simple pour faire son site mobile (site à part), mais comment faire un site responsive et faire cohabiter correctement les différentes versions ?
Modifié par vince-nantes (24 Aug 2015 - 17:00)

bonjour
une réponse 2 mois après le post mais bon , ce serait intéressant d'avoir votre feedback !
1)documentation
vous parler de layout donc il faut allez vers la documentation
single page layout http://demos.jquerymobile.com/1.2.1/docs/pages/page-anatomy.html
static http://api.jquerymobile.com/grid-layout/

puis comprendre comment ajouter des selecteurs et le code MQ css pour rendre le layout RWD .

responsive http://demos.jquerymobile.com/1.3.0-rc.1/docs/content/content-grids-responsive.html

2)étudier le code final
JQuery mobile a pour role de rajouter ENORMEMENT de wrapper div et de sélecteur css après chargement de la page. Comparez et regardez le code source HTML sur le serveur et le code de la même page dans le navigateur après que cette même page est été "compute" par le script jquery mobile !!
AVANT
< data-role="page header footer content" >
APRES
aria-level ="?"
tabindex="?"
role="?"
class="ui-mobile-viewport ui-page ui-body-x ui-page-active ui-content ui-footer ui-bar-x "

? différentes valeurs ajoutées par JQM
x signifie selon les cas pour JQM a ou b ou c

il faut coder ( nom des sélecteurs et contenu css ) les selecteurs css en focntion des noms des sélecteurs générés par JQM dans votre page de rendu .

3) mixer des layouts ?
vous parlez de version portable , mixez vous plusieurs layouts ( framework layout) ?
sinon un avis ci dessous pour un mix jquery UI et JQuery Mboile
https://forum.jquery.com/topic/mixing-jquery-mobile-with-jquery-ui-widgets-don-t

Looks like the class names in jQuery UI and jQuery Mobile frequently overlap but have different style rules and semantics. This seems like a poor (hopefully temporary) design decision because it makes using jQuery UI compatible widgets very hard to use in jQuery mobile (without a lot of custom hacking in either their or the jQM code)


NB je n ai pas le code source donc difficile d 'aider ....( 1000 px sur même type d 'écran ?......, design mobile first =default implicit MQ range ) ..
Modifié par 75lionel (01 Nov 2015 - 19:01)

Bonjour et merci pour ta réponse, tu me sembles bien connaître le sujet

En effet, la réponse à ma problématique semblait être la suivante d'après ce que je lis :

75lionel a écrit :

responsive http://demos.jquerymobile.com/1.3.0-rc.1/docs/content/content-grids-responsive.html

Comme je n'ai pas eu de réponses plus tôt et que l'apprentissage de jQuery Mobile me semblait somme toute assez fastidieux (nouveau langage à apprendre quasiment), je me suis tourné vers des plugins jQuery responsive ligthweight (=légers) et pour l'instant je ne regrette pas mon choix :
- jQuery Mobile semble faire presque 400ko (js+css minimisés), alors que l'ensemble de mes plugins fait moins de 100ko : sur mobile ça va beaucoup jouer en temps de chargement ! Du coup sûrement un meilleur SEO (référencement) également.
- Intégration facile avec des media queries
- Meilleure maîtrise du code et des éventuels bugs
- Je me doute que tout le code de JQM a été écrit pour obtenir le même affichage sur tous les terminaux mobiles, mais pour l'instant j'obtiens un affichage impeccable sur tous les mobiles testés

Je vais tester mon site en production sur le long terme pour vraiment analyser l'expérience utilisateur et me pencher sur JQM quand j'aurai le temps pour voir si c'est plus adapté, j'en doute aujourd'hui.

Pour répondre à ta question sur les layouts, mon site est codé en html5 et il s'adapte aux différentes résolutions selon 3 layouts pour l'instant : mobile (400px max), tablette ou grand mobile (700px max) et PC (full).

Je veux bien avoir ton avis également par rapport à ma réponse et ton expérience
Modifié par vince-nantes (02 Nov 2015 - 14:27)

bonsoir
JE connais le sujet mais je n'ai pas pratiqué. J ai étudié JQuery Mobile après avoir étudié de nombreux layout photoshop ( variable) ,publisher ,word doc (dot template) , css grid layout puis Framework responsive dont bootstrap ( plusieurs versions) et grid responsive sass ( susy ...). L'étude personnel avait pour but de connaitre le choix et les problèmes que chaque framework essaie de contourner / résoudre. Sachant déjà les incompatibilités bootstrap et jquery je considère JQuery Mobile comme une sorte de template single page ( mustache sans data que pour le style ) avec ajout de nombreux sélecteurs. Rien que le nombre et nom de ces sélecteurs m'ont fait arrêter l'étude de ce framework . JQuery mobile possède aussi un thème roller . Si je me mets du point de vue du designer ; je ne pense pas que la l'utilisation de l'outil roller permet de masquer le fait que site utilise JQuery mobile ( variation du thème mais toujours le même thème ) .

Sinon je ne comprend pas comment passer de jquery a jquery mobile sur un même site qui obligerait d'ajouter de nombreux data-role="" a coté des sélecteurs du template responsive sans savoir les incompatibilités que cela créerait ( par non connaissance de la façon est implémenté les sélecteurs dynamique par défaut ajouté et déja implémenté par JQuery mobile . En gros pour chaque type de tag html , JQuery mobile ajoute différents attributs/valeur inline à ce tag html sans touché le contenu ( text ) . Chaque * présent dans data HTML5 sous la syntax data-*="value" ( *=role / value=page, header content ...) est décrit ici .
Voici des examples provenant du code généré par Dreamweaver CS5 comparable aux examples JQueryMobile de w3schools.com
un layout grid contiendra class="ui-grid-a"
un block collapside contiendra une hiearche de sélecteur data-role avec pour valeur collapside-set puis collapside puis data-collapsed="true"
un radio button contiendra <a data-role="button" >
........

contiendra data-role="fieldcontain"


En revenant sur le sujet , je pense que JQmobile s éxecutera dans tous les cas sauf si il y a un moyen de dire au browser que data-role="header" ne doit s appliquer que pour un interval de breakpoint. Dans un sens data-role="header" sera converti en <tag class="ui-header > text </tag> ) ..donc ui-header et tous les autres sélecteurs ajoutés à la page du client par JQuery mobile devront avoir leur définition css active dans un intervale de breakpoint ou ajouter( toggle) un sélecteur dans le body pour dire que JQueryMobile est actif et redéfinir tous les sélecteurs jquery Mobile dans le contexte de ce sélecteur ( imbrication de layout / template ?!! qui demande de l expérience ) .

Ce principe exposé ici doit être suffisant pour maitriser JQuery si je ne me trompe pas car je ne suis pas utilisateur de JQuery Mobile ( Dreamweaver CS5 l implémente mais bon ce n'est qu un outil utile si on comprend la logique derrière tout ça ) .

sinon je suis ??? amateur ayant commencé HTML avec une licence de hot metal pro ( softquad) !! et bien loin de connaitre JQuery mobile

cordialement
Modifié par 75lionel (02 Nov 2015 - 20:06)