Con JQuery podemos crear cosas realmente sorprendentes y divertidas, como menús, carruseles o pestañas . Es muy enorgullecedor recrear algo que ya existe y con lo que estás disfrutando, pero realizarlo con otro lenguaje. Con JQuery podemos crear el selector de ventanas de Opera Mobile, así, varias ventanas que están superpuestas una debajo de otra, teniendo sólo una porción de estas visibles. La que está en la parte superior es la única que se encuentra visible. Al elegir otra ventana, veremos un bonito efecto.

Estructura

Estas ventanas no son más que la creación de una lista. Cada elemento LI puede tener el contenido que deseemos, mientras que el primer LI será la ventana elegida. Esta es su estructura:

<ul id="container">
    <li class="current"></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Definimos el porcentaje de la ventana que se esconde y asignamos una ID a cada ventana:

var itemWidth = $("#container li").width();
// Esconder el 50% de cada ventana
var itemPosition = itemWidth * 50 / 100;
// Deslizar el 60% de la anchura de la ventana
var itemMove = itemWidth * 60 / 100;        

// Movemos ventanas debajo de otra y asignamos una ID a cada una
$("#container li").each(function(i) {
    $(this).attr("id", i).css("z-index", 100 - i).css("left", itemPosition * i);
});

Cuando un usuario hace click en una ventana, se determina la posición de la ventana clickada y la elegida previamente. Si la ventana clickada está en el lado izquierdo de la ventana elegida anteriormente, todas las ventanas que hemos clickado antes estarán en el lado de la izquierda y viceversa.

$("#container li").click(function(e) {
    // Obtenemos id's de la ventana actual y la otra sue el usuario ha hecho click
    var currentID = parseInt($(".current").attr("id"));
    var clickedID = parseInt($(this).attr("id"));

    if (currentID != clickedID) {
        if (clickedID > currentID) {
            // deslizar ventanas a la izquierda
        }
        else {
            // deslizar ventanas a la derecha
        }
    }
});

Antes de que deslicemos las ventanas necesitamos eliminar la clase .current de la anterior “elegida” y asignarla a la ventana clickada.

var currentZ = 99;
var current = $(this);
setTimeout(function() { $(".current").removeClass("current"); current.css("z-index", currentZ).addClass("current"); }, 500);

También podemos estlizar los enlaces como texto normal así no cabe duda que las ventanas semi-escondidas no se pueden clickar. Así los usuarios pueden acceder únicamente al contenido de la ventana elegida.

Eso es todo, espero que os haya gustado, si tenéis dudas ya sabéis, a los comentarios o al foro.

Ejemplo y descarga

Vía | Jankoatwarspeed