web-dev-qa-db-fra.com

Déplacement d'éléments dans DOM pour une conception Web réactive

Une brève explication

J'ai créé un site Web réactif qui a effectivement trois vues (ordinateur de bureau, tablette, mobile). La plupart de la conception est modifiée via CSS à l'aide de requêtes multimédias (comme cela devrait être le cas pour les sites Web réactifs). Cependant, une partie de la conception est trop complexe pour être simplement manipulée via CSS car le HTML doit être déplacé dans le DOM. Je sais que cela ne semble pas trop génial, mais je ne vois pas comment je suis censé reproduire cette conception sans déplacer certains éléments dans mon code HTML.

Donc, avec ce qui précède à l'esprit, je prévois maintenant d'écrire une fonction qui crée des événements personnalisés pour chacune des différentes "vues réactives". Lorsque chaque événement est déclenché (en synchronisation avec les requêtes des médias CSS), il exécute du Javascript pour déplacer/animer tous les éléments qui ne peuvent pas être suffisamment manipulés à l'aide de CSS.

Ma question

Est-ce la meilleure méthode pour y parvenir? Si non, quelles autres options ai-je? Existe-t-il des bibliothèques existantes que je pourrais consulter et apprendre?

Ma véritable question est la suivante: quelle est la meilleure méthode pour déplacer des éléments dans le DOM pour une conception Web réactive?

Plus d'explications

Si ce qui précède n'était pas clair, lisez ce qui suit:

Considérez ces trois vues différentes:

Responsive Views

Considérez maintenant le code pour les deux premières vues:

Burea

<div id="some_container">
    <nav>
        <ul>
        </ul>
    <nav>
    <p>Some Text</p>
    <!-- The rest of the content -->
</div>

Tablette

<div id="some_container">
    <p>Some Text</p>
    <nav>
        <ul>
        </ul>
    <nav>
    <!-- The rest of the content -->
</div>

Notez que la balise nav a été déplacée sous la balise p ...

javascriptjqueryhtmlcssresponsive-design
25
Ben Carey

Vous pouvez essayer ceci:

En supposant ce HTML:

<div id="some_container">
    <nav id="n1">
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </nav>
    <p>Some Text</p>
    <nav id="n2">
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </nav>
</div>

Vous n'aurez besoin que des css suivants:

#n1{
    display:none;
}

@media only screen 
and (min-width : 600px) {
    #n1{
        display:block;
    }
    #n2{
        display:none;
    }
}

exemple Fiddle

Cela bascule essentiellement celle des deux sections de navigation que vous voyez, en fonction de la taille de l'écran. Il présente l'inconvénient de dupliquer du HTML dans votre source (la différence dans la quantité de données est vraiment négligeable), mais vous n'aurez pas besoin de JavaScript pour obtenir l'effet, et les appareils désactivés JS n'en afficheront qu'un ul.

La grande chose à propos de cette façon est qu'elle est très évolutive. Besoin de cet "effet" sur une autre page? Vous n'aurez qu'à modifier [u] cette page [/ u]. Pas besoin de jouer avec JavaScript, de coder en dur de nouvelles classes/cas.

5
Cerbrus

Je vous suggère d'utiliser .insertAfter() et .resize() / .ready() pour déplacer les éléments en fonction de la taille de la page:

$(window).resize(){
    resize();
}

$(document).ready(){
    resize();
}

function resize(){
    if($(window).width() < 480)
    {
        //Mobile
        $("#some_container nav").insertAfter("#some_container p");
    }
    else if($(window).width() < 800)
    {
        //Tablet
        $("#some_container nav").insertAfter("#some_container p");
    }
    else
    {
        //Desktop
        //Leave original layout
    }
}
5
David

La bibliothèque enquire.js résout ce problème en vous permettant de déclencher des fonctions JS en réponse à des requêtes de médias CSS. Vous pouvez donc exécuter votre logique detach () et append () en fonction de différentes tailles d'écran. Il est léger pour démarrer.

Voir: http://wicky.nillia.ms/enquire.js/

4
jasperjohnny

Il existe de nombreuses méthodes comme appendTo

//check for the window width
if($(window).width() < 700){
  //append to the p  
  $('#some_container nav').appendTo('#some_container p');
}
2
Bhojendra Rauniyar

La création de contenu en double pour résoudre les problèmes de conception réactive n'est pas une bonne pratique. Cela rend le balisage plus difficile à maintenir (en particulier lorsqu'un autre développeur prend le contrôle du projet et ne se rend pas compte qu'il doit être mis à jour à plusieurs emplacements), il augmente la taille du fichier (si la taille du fichier n'était pas importante, nous ne le ferions pas minimiser notre CSS/JS ou GZIP notre HTML), et les technologies d'assistance et autres agents Web qui ne prennent pas en compte CSS le voient comme du contenu répété.

C'est juste désordonné, et je ne vois pas comment quelqu'un pourrait considérer cela comme une meilleure pratique.

Bien que JavaScript ne soit pas idéal non plus, je ne vois aucun problème s'il est utilisé comme une forme d'amélioration progressive. Je me suis récemment retrouvé à l'utiliser assez souvent pour que je crée un plugin jQuery: https://github.com/thomashigginbotham/responsive-dom

Exemple d'utilisation:

var $mainNav = $('.main-nav');

$mainNav.responsiveDom({
    appendTo: '.sidebar',
    mediaQuery: '(min-width: 600px)'
});
1
Thomas Higginbotham

Je viens d'écrire un plugin jQuery qui fait exactement cela, jetez un oeil ici . Fondamentalement, il crée automatiquement une série de dispositions en termes de lignes et de colonnes, qui sont ensuite utilisées pour les différentes vues comme vous le montrez ci-dessus

0
James Ellis-Jones

Si vous ne voulez pas créer de javascript, utilisez la technique de la grille.

<div class="main_container">
    <nav class="grid_nav">
        <ul>
        </ul>
    <nav>
    <div class="grid_text">
        <p>Some Text</p>
    </div>
    <!-- The rest of the content -->
</div>

.main_container{
  display: grid;
  @media screen and (max-width: 500px) { //mobile
    grid-template-rows:    1fr 1fr;
    grid-template-areas: "gridnav"
                         "gridtext";
  }
  @media screen and (min-width: 500px) {//web
    grid-template-rows:    1fr 1fr;
    grid-template-areas: "gridtext"
                         "gridnav";
  }
}

.grid_nav{
  grid-area: gridnav;
}
.grid_text{
  grid-area: gridtext;
}

Mais ce n'est que lorsque les mouvements sont à l'intérieur du "main_container"

cordialement...

0
Johnattan Tibocha

Je fais exactement cette chose en ce moment avec la navigation que je dois déplacer dans l'en-tête pour le bureau et juste en dessous de l'en-tête pour un menu de hamburger sur mobile. J'ai un écouteur d'événements sur la fenêtre en cours de redimensionnement qui appelle une fonction qui vérifie la taille de l'écran et la transmet à ma fonction toggleNavigation. J'ai ceci séparé parce que j'ai quelques autres fonctions en dehors de celle qui sont appelées dans le checkBreakPoint qui ne sont pas répertoriées. Ensuite, pour m'assurer qu'il ne déplace pas constamment mon dom ou ne le ré-ajoute pas, je vérifie d'abord dans quel conteneur parent il se trouve et ne le déplace que s'il n'est pas dans celui que j'attends pour cette taille d'écran. Mon projet nécessite qu'il n'ait pas de dépendances externes, donc cela se fait simplement en Javascript et ensuite j'utilise des requêtes multimédias pour styliser les éléments en fonction de la taille de l'écran.

var mainNav = document.getElementById('rww_main_nav'); //element I want to move
var tieredHeader = document.getElementById('rww_tiered_header'); //where it should be on mobile
var branding = document.getElementById('rww_branding'); //where it should be on desktop

window.addEventListener("resize", checkBreakPoint);

function checkBreakPoint() {
        //width of viewport
        var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
        toggleNavLocation(w);
}

function toggleNavLocation(screensize) {
    if (screensize > 999) {
        if (mainNav.parentElement.id === 'rww_tiered_header') {
            branding.appendChild(mainNav);
        }
    } else {
        if (mainNav.parentElement.id === 'rww_branding') {
            tieredHeader.appendChild(mainNav);
        }
    }
}
0
crumdev