SummArg | Cursos y recursos para webmasters

01/04/2012

Método simple para paginar columnas generadas por columnizer

Comparto con ustedes un modesto método para generar una suerte de paginación de columnas generadas por jQuery Columnizer. Es útil para una cantidad moderada de columnas a organizar. Si quieren descargar el ejercicio completo y funcionando (el CSS es mas largo de lo que publicamos aquí), pueden hacerlo desde el siguiente link.

Descargar: Columnizer y Paginación (156)

Primero generamos un HTML conteniendo la siguiente estructura de contenidos:

<div id="pageWrapper">
 <div id="listas">
 <div id="list1">
 <ul>
 <li>Elemento de lista 1</li> <!--- colocar una buena cantidad de elementos li para que columnizer tenga contenidos --->
 <li>Elemento de lista 1</li>
 <li>Elemento de lista 1</li>
 <li>Elemento de lista 1</li>
 <li>Elemento de lista 1</li>
 <li>Elemento de lista 1</li>
 </ul>
 </div>
 <div id="list2">
 <ul>
 <li>Elemento de lista 2</li> <!--- colocar una buena cantidad de elementos li para que columnizer tenga contenidos --->
 <li>Elemento de lista 2</li>
 <li>Elemento de lista 2</li>
 <li>Elemento de lista 2</li>
 <li>Elemento de lista 2</li>
 <li>Elemento de lista 2</li>
 </ul>
 </div>
 <div id="list3">
 <ul>
 <li>Elemento de lista 3</li> <!--- colocar una buena cantidad de elementos li para que columnizer tenga contenidos --->
 <li>Elemento de lista 3</li>
 <li>Elemento de lista 3</li>
 <li>Elemento de lista 3</li>
 <li>Elemento de lista 3</li>
 <li>Elemento de lista 3</li>
 </ul>
 </div>
 <div id="list4">
 <ul>
 <li>Elemento de lista 4</li> <!--- colocar una buena cantidad de elementos li para que columnizer tenga contenidos --->
 <li>Elemento de lista 4</li>
 <li>Elemento de lista 4</li>
 <li>Elemento de lista 4</li>
 <li>Elemento de lista 4</li>
 <li>Elemento de lista 4</li>
 </ul>
 </div>
 </div>
<ul class="paginas">
 <li><a href="#" id="link1">1</a></li>
 <li><a href="#" id="link2">2</a></li>
 <li><a href="#" id="link3">3</a></li>
 <li><a href="#" id="link4">4</a></li>
 </ul>
</div>

Entre etiquetas <head> vinculamos jQuery y jQuery Columnizer, así como la plantilla de estilos.

<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
 <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
 <script type="text/javascript" src="jquery.columnizer.min.js"></script>

La plantilla de estilos debe contener el tamaño de #listas y de cada una de las listas (#list1, #list2, #list3, #list4).

#listas{
width: 800px;
height:400px;
float:left;
padding: 40px 0 0 0px;
display:block;
}
#list1, #list2, #list3, #list4 {
font-family:arial;
font-size:13px;
color: #40566e;
font-weight:bold;
width: 800px;
height:400px;
float:left;
}
#lista ul {
list-style-type: none;
width: 240px;
float:left;
}

Y también debe dar estilo a la barra en donde colocaremos la paginación.

.paginas {
width: 700px;
height:30px;
margin-left:40px;
float:left;
display:block;
}
.paginas li {
padding: 5px;
width:10px;
height:20px;
float:left;
margin-right:20px;
}
.paginas li a{
font-family:arial;
font-size:14px;
font-weight:bold;
line-height:18px;
text-decoration:none;
color:#d1dfea;
}
.paginas li a:hover {
color: #7589a0;
font-weight:bold;
}

Ahora si pasamos a nuestra tarea de aplicar un poco de la magia de jQuery y del plugin que acabamos de descargar. Nuestro código se ubicará antes del cierre de la etiqueta </body>. Para que Columnizer funcione en cada una de los ID que contienen una lista, necesitamos colocar el código de la siguiente manera:

<script type="text/javascript">
 $(function(){
 $("#list1").columnize({
 width:200,
 height:400
 });
 $("#list2").columnize({
 width:200,
 height:400
 });
 $("#list3").columnize({
 width:200,
 height:400
 });
 $("#list4").columnize({
 width:200,
 height:400
 });
 });
 </script>

De este modo le indicamos a Columnizer que queremos que cada listado de elementos se divida en columnas de 200px de ancho por 400px de alto. Pero de este modo nos quedan las 4 listas publicadas de manera consecutiva, por lo que necesitamos hacer visible una lista y ocultar las otras tres. Para ello utilizaremos las funciones show() y hide() de jQuery. Mas específicamente necesitamos decirle que cuando detecte que se realiza un click() en un elemento #linkX determinado, muestre la #listX y oculte las demás.

Al final de la función colocamos cómo queremos que se inicien los elementos en cuanto a su visibilidad, o sea cómo se verán por defecto antes de que el usuario clickee algo, y en ese espacio aprovechamos a pasarle los parámetros a Columnizer.

<script type="text/javascript">
 $(function(){
 $("#link1").click(function () {
 $("#list1").show(100);
 $("#list2").hide(100);
 $("#list3").hide(100);
 $("#list4").hide(100);
 });
 $("#link2").click(function () {
 $("#list2").show(100);
 $("#list1").hide(100);
 $("#list3").hide(100);
 $("#list4").hide(100);
 });
 $("#link3").click(function () {
 $("#list3").show(100);
 $("#list2").hide(100);
 $("#list1").hide(100);
 $("#list4").hide(100);
 });
 $("#link4").click(function () {
 $("#list4").show(100);
 $("#list2").hide(100);
 $("#list1").hide(100);
 $("#list3").hide(100);
 });
 $("#list1").show();
 $("#list1").columnize({
 width:200,
 height:400
 });
 $("#list2").columnize({
 width:200,
 height:400
 });
 $("#list2").hide();
 $("#list3").columnize({
 width:200,
 height:400
 });
 $("#list3").hide();
 $("#list4").columnize({
 width:200,
 height:400
 });
 $("#list4").hide();
});
});
</script>

Para completar podemos colocar unas líneas extra antes de las últimas llaves de cierre });, en donde buscamos el link dentro de .paginas y le añadimos a cada link que sea clickeado la clase .actual y la removemos de cualquier otro elemento. Esto nos facilitará colorear diferente al link activo y ofrece al usuario una mejora visual importante para facilitar su navegación.

$(".paginas").find("a").click( function(){
 $(this)
 .parent().addClass("actual")
 .siblings().removeClass("actual");
 });
 });

En nuestro estilo el agregamos un fondo azul y cambiamos el color del link activo.

.paginas li.actual a {
 color: #eef3fa;
 }
 .paginas li.actual {
 background: #40566e;
 padding: 5px;
 width:10px;
 height:20px;
 color: #eef3fa;
 }

El resultado será el que vemos en la siguiente imagen. Pueden descargar el ejercicio desde aquí: Columnizer y Paginación (156)

Dejar un comentario