Eléments partagés entre plusieurs pages avec jQueryMobile

Version imprimable

Bonjour,

Je découvre jQueryMobile et j'essaie de m'habituer à la logique de cette librairie et beaucoup de choses m'échappent encore. J'ai parcouru le web en long en large et en travers et je n'arrive pas à faire un système de navigation entre pages dont les pages partagent certains éléments (header, footer, divs).

Dans un monde où tout serait simple voici ce que je veux faire (j'ai essayé de prendre une syntaxe pseudo XML que j'espère lisible à défaut d'être correcte puisque justement je ne sais pas le faire) en évitant d'écrire du code deux fois :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <page_1> <header_commun> <onglet href=page1 /><onglet href=page2 /> </header_commun> <content> <data_1 /> <data_commune /> </content> <footer_commun /> </page_1> <page_2> <header_commun> <onglet href=page1 /><onglet href=page2 /> </header_commun> <content> <data_2 /> <data_commune /> </content> <footer_commun /> </page_2>
Idéalement quand je clique sur l'onglet page1/page2 ça va à la bonne page grâce à data-role="navbar" en mettant le bon hashtag (ça j'y arrive à peu près).

Mais comment faire pour ne pas réécrire les parties communes (<header_commun>, <data_commune> et <footer_commun> dans mon exemple ?

Merci d'avance à vous tous pour vos lumières en espérant de ne pas poser une question de béotien.

Figogo

11/02/2012, 11h38
Bovino

Je suis pas sûr d'avoir compris ton problème, mais si ce que tu cherches, c'est une navigation par onglet, tu peux regarder du coté de Mise en place d'une navigation par onglets avec jQuery.
12/02/2012, 12h33
figogo

Bonjour

En effet, je souhaite faire une navigation par onglet mais en jquery mobile pour profiter de ce que jquery mobile offre (gestion automatisée des pages des transitions et de l'historique pour plus de fluidité) tout en conservant un code propre.

Or je n'arrive pas à utiliser un code commun pour les headers, les footers et autres éléments de contenu simplement. Pour l'instant je copie tout plusieurs fois et je trouve ça peu satisfaisant.

Je me demandais s'il n'existait pas une solution consistant à utiliser $(".myClassForThePages").append(myFooter) et $(".myClassForThePages").prepend(myHeader) sur toutes mes pages pour ajouter des éléments communs. Mais je n'arrive pas encore bien à le faire avec mes onglets et je me disais que jquery mobile était conçu pour faire ça sans ce type de hack. Peut-être ai-je tord cela dit.

En tout cas merci pour votre aide !

Alors pour ceux qui suivent et que ça intéresse. Voici le fruit de mes recherches.

JQuery Mobile ne semble pas permettre nativement de faire ce que je voulais faire : des pages (data-role="page") différentes au sein d'une même page web avec un header comprenant un onglet de navigation commune.

Mais, on peut tout de même se servir de JQM comme base pour faire cela, et au passage récupérer les jolis boutons et autres effets. J'ai trouvé deux solutions :

1/ On crée bien les pages et on ajoute le header à chacune d'elles (soit en recopiant le code, soit en faisant $(".myClassForPages").prepend($("#myHeader")[0]). En faisant cela on crée donc plusieurs headers, il faudra alors contourner le comportement classique de navbar car les onglets sont dupliqués. En effet, JQM gère tout seul navbar sur le principe qu'il y en a qu'une seule. Il faut donc ajouter et supprimer la classe "ui-btn-active" à la main avec addClass et removeClass en détournant l'événement "click" de la navbar. Mais pour ce qui est de la gestion des pages (et des window.location.hash) ça devrait fonctionner à peu près correctement.

2/ On simule l'existence des pages mais avec un contenu normal qu'on affiche et cache en fonction du bouton qui est cliqué. Dans ce cas-là, on doit aussi reprogrammer les clicks sur les onglets navbar avec
Code:

1 2 3 4 5 6 $('[data-role="navbar"] a').on("click", function(a) { hideSomeContent(); showMyContent($(this).attr("href")); window.location.hash = $(this).attr("href"); return false; // ne pas oublier ce return false sinon l'événement est déclenché deux fois !! }
Ne pas oublier de lire le hashcode au chargement de la page et le tour est joué.

Voilà ce n'était pas si simple et on est obligé de passer par quelques bidouilles mais j'espère que ces pistes feront gagner du temps aux autres car il m'en a fallu pour en venir à bout. Pour info j'ai choisi la deuxième option qui est plus propre car elle ne crée pas d'éléments DOM inutiles.