Switch Mode: plugin jQuery para ver contenido en modo lista o iconos

Escrito por: Martín el 20-11-2009 08:22:51 y leído 1020 veces

Este plugin está más que interesante. Sirve, resumiendo, para ver listados con 2 diferentes presentaciones como puede ser la clásica lista (uno debajo de otro) o en modo iconos (en bloques uno al lado de otro).

El método de funcionamiento es muy simple, un enlace para hacer el cambio de modo y unas pocas líneas en tu archivo CSS te dejarán obtener cosas como ésta...

¿La implementación? Muy fácil, no requiere nada más que la librería jQuery instalada en la web (ver código 1), un poquito de CSS (ver código 2) y el html o php que muestre el contenido (ver código 3).

Su autor, publica una opción con un fade sobre el contenido, pero yo he decidido quitarlo en mi demo, por la simple razón que es un PNG transparente y luego tendrás problemas con el bendito IE6, además, no siempre necesitarás esconder contenido.

Código XHTML

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// List view
$('#controls a').click(function(){
// Get 'rel' variable
var r = $(this).attr('rel');
// Get current display mode
var c = $('#container').attr('class');
// Prevent redundant actions
if (r != c) {
// Toggle 'active' class to show selection
$('#controls a').removeClass('active');
$(this).addClass('active');
// Fade out function then callback to change the view mode
$('#container').fadeOut(100, function(){
// Change the layout based on clicked 'rel'
$('#container').removeAttr('class');
$('#container').addClass(r);
// Fade the container back in
$('#container').fadeIn(100);
});
}
});
});
</script>

Código CSS

html { width: 100%; height: 100%; overflow: scroll; font: normal 11px Arial, Helvetica, sans-serif; line-height: 170%; }
body { width: 700px; margin: 30px auto; padding: 10px 0; }

a { color: #4756b1; cursor: pointer; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Styling for the view mode switcher control */

#controls { padding: 5px 0; font-size: 14px; }
#controls .active { font-weight: bold; }

/* General styling of items */

#container { width: 700px; margin: 0; padding: 0; }
#container li { float: left; display: inline; list-style: none; margin: 20px 0 0 0; padding: 10px; border: 1px solid #ccc; }
#container li div a.overlay { display: block; position: absolute; margin: 0; }

/* Styling for list view mode */ 

#container.list li { width: 660px; margin: 20px 0 0 0; }
#container.list li div { height: 130px; overflow: hidden; }
#container.list li a.overlay { width: 660px; height: 130px; }
.list img {width:100px;float:left;margin:0 20px 0 0}
.list p{margin:0;}
/* Styling for icon view mode */

#container.icon li { width: 200px; margin: 10px 10px 0 0; }
#container.icon li div { height: 300px; overflow: hidden; }
#container.icon li a.overlay { width: 200px; height: 300px; }
.icon img {width:190px;margin:0 0 5px 0}
.icon p{margin:0;}

Código XHTML

<div id="controls"><a rel="list" class="active">Modo lista</a>  |  <a rel="icon">Modo iconos</a></div>
			
			<ul id="container" class="list">
				
				<li>
					<div>
					<a href="#link_to_item"><!-- Fade Overlay --></a>
					<h1>Soy un producto</h1>
					<p><img src='med.jpg' alt='imagen' />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque justo massa, vulputate in porttitor eu, ullamcorper ut odio. Suspendisse fermentum tellus eu dui elementum a pharetra lectus adipiscing. Integer commodo orci ut urna commodo sed fermentum felis feugiat. Sed sed lorem tellus. Nullam varius, lorem sit amet molestie condimentum, nibh arcu hendrerit libero, vitae bibendum mauris felis ac ipsum. Nam tristique fermentum lobortis.</p>
					</div>
					<a>Ver más »</a>
				</li>
				
				<li>
					<div>
					<a class="overlay" href="#link_to_item"><!-- Fade Overlay --></a>
					<h1>Soy un producto</h1>
					<p><img src='med.jpg' alt='imagen' />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque justo massa, vulputate in porttitor eu, ullamcorper ut odio. Suspendisse fermentum tellus eu dui elementum a pharetra lectus adipiscing. Integer commodo orci ut urna commodo sed fermentum felis feugiat. Sed sed lorem tellus. Nullam varius, lorem sit amet molestie condimentum, nibh arcu hendrerit libero, vitae bibendum mauris felis ac ipsum. Nam tristique fermentum lobortis.</p>
					</div>
					<a>Ver más »</a>
				</li>
				
				<li>
					<div>
					<a class="overlay" href="#link_to_item"><!-- Fade Overlay --></a>
					<h1>Soy un producto</h1>
					<p><img src='med.jpg' alt='imagen' />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque justo massa, vulputate in porttitor eu, ullamcorper ut odio. Suspendisse fermentum tellus eu dui elementum a pharetra lectus adipiscing. Integer commodo orci ut urna commodo sed fermentum felis feugiat. Sed sed lorem tellus. Nullam varius, lorem sit amet molestie condimentum, nibh arcu hendrerit libero, vitae bibendum mauris felis ac ipsum. Nam tristique fermentum lobortis.</p>
					</div>
					<a>Ver más »</a>
				</li>
				
				<li>
					<div>
					<a class="overlay" href="#link_to_item"><!-- Fade Overlay --></a>
					<h1>Soy un producto</h1>
					<p><img src='med.jpg' alt='imagen' />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque justo massa, vulputate in porttitor eu, ullamcorper ut odio. Suspendisse fermentum tellus eu dui elementum a pharetra lectus adipiscing. Integer commodo orci ut urna commodo sed fermentum felis feugiat. Sed sed lorem tellus. Nullam varius, lorem sit amet molestie condimentum, nibh arcu hendrerit libero, vitae bibendum mauris felis ac ipsum. Nam tristique fermentum lobortis.</p>
					</div>
					<a>Ver más »</a>
				</li>
				
				<li>
					<div>
					<a class="overlay" href="#link_to_item"><!-- Fade Overlay --></a>
					<h1>Soy un producto</h1>
					<p><img src='med.jpg' alt='imagen' />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque justo massa, vulputate in porttitor eu, ullamcorper ut odio. Suspendisse fermentum tellus eu dui elementum a pharetra lectus adipiscing. Integer commodo orci ut urna commodo sed fermentum felis feugiat. Sed sed lorem tellus. Nullam varius, lorem sit amet molestie condimentum, nibh arcu hendrerit libero, vitae bibendum mauris felis ac ipsum. Nam tristique fermentum lobortis.</p>
					</div>
					<a>Ver más »</a>
				</li>
				
				<li>
					<div>
					<a class="overlay" href="#link_to_item"><!-- Fade Overlay --></a>
					<h1>Soy un producto</h1>
					<p><img src='med.jpg' alt='imagen' />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque justo massa, vulputate in porttitor eu, ullamcorper ut odio. Suspendisse fermentum tellus eu dui elementum a pharetra lectus adipiscing. Integer commodo orci ut urna commodo sed fermentum felis feugiat. Sed sed lorem tellus. Nullam varius, lorem sit amet molestie condimentum, nibh arcu hendrerit libero, vitae bibendum mauris felis ac ipsum. Nam tristique fermentum lobortis.</p>
					</div>
					<a>Ver más »</a>
				</li>
				
				
			</ul>

Categorías: Switch Mode • Lista • Iconos • Jquery • Css • •