WebCssDesign

Switcher de présentation CSS et jQuery

• Accueil
• Ajax
• Switcher de présentation CSS et jQuery

Voici un petit script permettant de switcher une présentation à l’aide de CSS et de jQuery

Il peut en effet être utile d’apporter à l’utilisateur la possibilité de changer la présentation du contenu d’une page afin que celui-ci puisse trouver plus rapidement et plus simplement les informations qu’il recherche.
Pour ce faire il suffit de créer une liste (ul li)

<ul class="display">
	<li></li>
	<li></li>
	<li></li>
</ul>

de mettre en place deux classes différentes l’une permettant d’afficher la liste avec l’image (dans cet exemple) et le texte de description et la deuxième classe laissant apparaître que l’image.

<li>
	<div class="content_block">
		<a href="#"><img src="sample.gif" alt="" /></a>
		<h2><a href="#">Image Name</a></h2>
		<p><!—Description here--></p>
	</div>
</li>

Le CSS

ul.display li a {
	color: #e7ff61;
	text-decoration: none;
}
ul.display li .content_block {
	padding: 0 10px;
}
ul.display li .content_block h2 {
	margin: 0;
	padding: 5px;
	font-weight: normal;
	font-size: 1.7em;
}
ul.display li .content_block p {
	margin: 0;
	padding: 5px 5px 5px 245px;  /*--The left padding keeps the
content from flowing under the image--*/
	font-size: 1.2em;
}
ul.display li .content_block a img{ /*--Double border technique--*/
	padding: 5px;
	border: 2px solid #ccc;
	background: #fff;
	margin: 0 15px 0 0;
	float: left;
}

Ensuite à l’aide de jQuery, sur un clic faire un switch de classe.

Exemple:

$(document).ready(function(){

	$("a.switch_thumb").toggle(function(){
	  $(this).addClass("swap");
	  $("ul.display").fadeOut("fast", function() {
	  	$(this).fadeIn("fast").addClass("thumb_view");
		 });
	  }, function () {
      $(this).removeClass("swap");
	  $("ul.display").fadeOut("fast", function() {
	  	$(this).fadeIn("fast").removeClass("thumb_view");
		});
	}); 

});

Pour la démonstration c’est par ici : Switch affichage CSS jQuery