Changer code php via un bouton (changer affichage Mosaique ou liste)

Changer code php via un bouton (changer affichage Mosaique ou liste) - PHP - Programmation

Marsh Posté le 23-01-2013 à 20:45:27    

Bonjour,
 
Je souhaiterais pouvoir faire un système qui permettrais de switcher d'un mode d'affichage a un autre.
Exemple ebay: http://www.zupmage.eu/up/xopgNpXYRQ.png
 
J'ai les 2 codes php/css qui permettrais de mettre en Mosaique ou liste.
 
Il me faudrait donc un systeme qui permettrais de switcher un code php spécifique d'une page, a un autre, via un bouton.
 
J’espère que c'est clair  :p  
 
Merci beaucoup
Cordialement.


Message édité par Dale Mears le 23-01-2013 à 21:05:10
Reply

Marsh Posté le 23-01-2013 à 20:45:27   

Reply

Marsh Posté le 23-01-2013 à 21:12:28    

C'est assez simple
 
Tu fais ta structure du style
 
<div id='products' class='list'>
  <div class='product'>...</div>
  <div class='product'>...</div>
  <div class='product'>...</div>
  <div class='product'>...</div>
  <div class='clear'></div>
</div>
 
avec un CSS
 
#products {...}
#products .product {...}
#products.list .product {display:block;}
#products.mosaic .product {float:left;}
.clear{clear:both;}
 
Ensuite, au clic, tu changes juste la classe via JQuery :
 
if ($('#products').hasClass('list')) {
  $('#products').removeClass('list');
  $('#products').addClass('mosaic');
}
 
idem dans l'autre sens pour l'autre bouton.
 
Puis tu fais un appel AJAX pour sauvegarder le choix d'affichage en session.


Message édité par CyberDenix le 25-01-2013 à 21:38:39

---------------
Directeur Technique (CTO)
Reply

Marsh Posté le 23-01-2013 à 23:56:24    

Merci beaucoup pour votre réponse rapide !

Reply

Marsh Posté le 24-01-2013 à 19:32:22    

L'affichage grâce aux .Class fonctionne très bien !
 
Mais j'ai encore un petit problème.
 
Comment sauvegarder l'affichage avec AJAX ? Si vous pouviez me donner la direction a prendre, je pourrais me débrouiller par la suite.
 
Merci


Message édité par Dale Mears le 24-01-2013 à 22:01:37
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed