Disposition animée

Question

Je voudrais créer une page où la disposition change au lieu de charger une nouvelle page. L'idée serait que l'utilisateur clique sur un élément, puis réorganise tous les éléments d'une page. Je peux comprendre comment faire ceci mais ce que je ne peux pas comprendre est comment créer des liens pour chaque page. Donc, si l'utilisateur clique sur l'élément A et obtient la mise en page A, je voudrais avoir un lien pour cela.

Si l'utilisateur clique sur l'élément B et obtient la mise en page B, je voudrais créer un lien pour cela.

Des idées?

Answer 1

Si vous utilisez jQuery, vous pouvez essentiellement utiliser n'importe quel élément comme un lien/bouton ou autre.

Jquery nous permet de joindre des écouteurs d'événements de toutes sortes pour les événements déclenchés par des interactions utilisateur -

• clics de souris
• doubles cicks
• touche du clavier vers le bas/haut
• etc ...

Ces actions peuvent être attachées à n'importe quel élément de votre code HTML. il pourrait être -

• une étiquette <a>
• une étiquette <img>
• un <td> ou <tr> dans une structure de table
• un élément <div> générique
• etc ...

Vous pouvez lier un clic même sur n'importe quel élément et le déclencher votre changeLayout() fonction (ou quelque chose de similaire). La syntaxe pour un simple (simple) cliquez sur gestionnaire ressemble à ceci -

$("#elementSelector").on('click',function(){ 
    // user has clicked the element! 
    // do some cool animations and stuff! 
}); 

Cette fonction sera déclenchée pour tout élément avec un attribut id égal à elementSelector.

Quelques exemples d'éléments qui correspondent à la description -

• <div id="elementSelector"></div>
• <a href="#" id="elementSelector"></a>
• <td id="elementSelector"></td>

Answer 2

Vous pouvez changer une classe sur votre corps HTML. Cela vous permettrait d'utiliser différentes parties de votre CSS en fonction de la mise en page.Chaque lien pourrait définir la classe en utilisant jQuery:

// In your javascript (within jQuery ready function) 
$('#layoutTwoOne').click(function(event) { 
    $('body').removeClass('layoutTwo').addClass('layoutOne'); 
}); 
$('#layoutTwoLink').click(function(event) { 
    $('body').removeClass('layoutOne').addClass('layoutTwo'); 
}); 

Dans votre HTML:

<a href="#" id="layoutOneLink">Switch to Layout One</a> 
<a href="#" id="layoutTwoLink">Switch to Layout Two</a> 

Dans votre CSS:

body.layoutOne { 
    background-color: black; 
} 
body.layoutTwo { 
    background-color: white; 
} 
body.layoutOne div { 
    /* Some special css for all divs in layout one */ 
} 

Le code pourrait être plus axée sur les données. C'est un peu un hack, mais il fera ce dont vous avez besoin. :)