jQuery: Crea un seleccionador de ventana activa al estilo Opera Mobile

Siempre es divertido jugar con jQuery, especialmente cuando se trata de recrear algo que disfrutamos de usar. Tal es el caso del seleccionador de ventana activa con el que cuenta el navegador Opera Mobile. Aquí veremos cómo lograr este interesante efecto en nuestro sitio, en cualquier navegador.

En el efecto al que nos referimos, las ventanas abiertas están posicionadas una debajo de la otra, y sólo una porción de las mismas es visible. Sólo la que está por delante de la pila es la que resulta totalmente visible. El hacer clic sobre cualquiera de esas ventanas ocasiona, mediante un agradable efecto, que la ventana cliqueada se posicione en la parte superior de la pila y la ventana que ha dejado de ser activa se sitúe ahora al final de la misma.

Haz clic en este enlace para ver una demostración del efecto>>

En el caso de nuestras "ventanas", no son más que una lista desordenada de elementos li, cuyo contenido es propio.

Lo siguiente, con jQuery, son las variables de cúanto se esconderá cada ventana, y cúanto se deslizará a la izquierda o a la derecha. Luego, le asignamos una id a todas, que luego utilizaremos para posicionarlas.


var itemWidth = $("#container li").width();
var itemPosition = itemWidth * 50 / 100;
var itemMove = itemWidth * 60 / 100;
$("#container li").each(function(i) {
 $(this).attr("id", i).css("z-index", 100 - i).css("left", itemPosition * i);
});

Y ahora, la parte principal. Cuando un usuario hace clic sobre una ventana, muchas cosas pasan. Priero, se determina la posición de la ventana que ha sido cliqueada y de la ventana que fue elegida previamente. Si la ventana cliqueada está a la izquierda de la ventana elegida, todas las ventanas antes de la cliqueada se deslizarán a la izquierda. Si la ventana cliqueada está a la derecha de la ventana elegida, todas las ventanas después de la cliqueada se deslizarán a la derecha.


$("#container li").click(function(e) {
 // Get id's of the current window and the one that user clicked on
 var currentID = parseInt($(".current").attr("id"));
 var clickedID = parseInt($(this).attr("id"));
 if (currentID != clickedID) {
  if (clickedID> currentID) {
   // slide windows to the left
  }
  else {
   // slide windows to the right
  }
 }
});

Para deslizar las ventanas a la derecha, tomamos el id de la ventana cliqueada (sumándole 1 para prevenir que se deslice) y la colocamos en un bucle a través de todas las ventanas, hasta el final. En ese momento deslizamos todas las ventanas hacia la derecha, colocándolas por debajo de la ventana cliqueada (utilizando z-index) y finalmente las deslizamos de vuelta hacia la izquierda.


var i = 1;
var total = $("#container li").length;
for (j = clickedID + 1; j <= total; j = j + 1) {  $("#" + j).animate({ "left": "+=" + itemMove * i + "px" }, 500);  $("#" + j).animate({ "left": "-=" + itemMove * i + "px" }, 300);  $("#" + j).css("z-index", currentZ - i);  i = i + 1; }

Para el otro lado, es similar aunque más costoso.


var i = 1;
var total = clickedID - currentID + 1;
for (j = clickedID - 1; j>= 0; j = j - 1) {
 $("#" + j).animate({ "left": "-=" + itemMove * (i) + "px" }, 500);
 $("#" + j).animate({ "left": "+=" + itemMove * (i) + "px" }, 300);
 i = i + 1;
}
var i = 1;
setTimeout(function() {
 for (j = clickedID - 1; j>= 0; j = j - 1) {
  $("#" + j).css("z-index", total - i);
  i = i + 1;
 }
}, 500);

Pero antes de deslizar ventanas, debemos remover la clase .current de la vieja ventana elegisa y asignársela a la nueva ventana cliqueada.


var currentZ = 99;
var current = $(this);
setTimeout(function() { $(".current").removeClass("current"); current.css("z-index", currentZ).addClass("current"); }, 500);
[/javascipt]
Finalmente, agregamos unas líneas para que el deslizamiento no ocurra cuando se cliquea un enlace que contiene esa ventana:
[javascript]
if (currentID != clickedID) {
 e.preventDefault();

Haz clic en este enlace para ver una demostración del efecto>>

Esperamos que te sea de mucha utilidad.

Fuente original del artículo: Janko at Warp Speed
Traducción realizada por elWebmaster.com