IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Eléments partagés entre plusieurs pages avec jQueryMobile


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    15
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2006
    Messages : 15
    Par défaut Eléments partagés entre plusieurs pages avec jQueryMobile
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    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.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    15
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2006
    Messages : 15
    Par défaut
    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 !

  4. #4
    Membre averti
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    15
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2006
    Messages : 15
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

Discussions similaires

  1. Réponses: 10
    Dernier message: 04/08/2006, 10h12
  2. [POO] Conserver un objet PHP 5 entre plusieurs pages
    Par Invité dans le forum Langage
    Réponses: 24
    Dernier message: 20/05/2006, 14h13
  3. [AJAX] Appel de plusieurs pages avec Ajax
    Par shadowbob dans le forum Général JavaScript
    Réponses: 16
    Dernier message: 13/02/2006, 18h29
  4. Partager du code Javascript entre plusieurs pages HTML
    Par oceane751 dans le forum Général JavaScript
    Réponses: 29
    Dernier message: 10/01/2006, 15h20
  5. Partage de variables entre plusieurs pages
    Par bud_gw dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 27/12/2005, 15h42

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo