Dulces pestañas AJAX con jQuery 1.4 y CSS3

Organizar el contenido de una página de una manera intuitiva y llamativa es imprescindible en el diseño web moderno. Un principio que existe desde hace algún tiempo es dividir el texto en pestañas. Esto le permite exprimir mucho más contenido en un espacio aparentemente limitado y proporcionar una forma estructurada de acceder a él.

Hoy estamos creando una página de pestañas impulsada por AJAX con CSS3 y la versión 1.4 de jQuery recientemente lanzada, así que asegúrese de descargar el archivo zip desde el botón de arriba y continúe con el paso uno.

Paso 1:XHTML

Como de costumbre, comenzamos con el marcado XHTML.

demostración.html

<ul class="tabContainer">
    <!-- The jQuery generated tabs go here -->
</ul>

<div class="clear"></div>

<div id="tabContent">
    <div id="contentHolder">
        <!-- The AJAX fetched content goes here -->
    </div>
</div>

Si cree que el marcado parece demasiado simple para ser verdad, tiene razón. Como puede ver, nos falta el código de las pestañas, porque jQuery lo inserta dinámicamente al cargar la página. Esto hace que sea extremadamente fácil agregar nuevas pestañas, ya que solo necesita agregarlas en el lado de JavaScript (más sobre eso en un momento).

demostración.html

<li>
    <a href="#" class="tab green">Tab two
        <span class="left"></span>
        <span class="right"></span>
    </a>
</li>

Este es el marcado que jQuery inserta para cada pestaña. Consiste en un elemento LI colocado dentro del .tabContainer lista desordenada anterior y contiene un hipervínculo con dos tramos. Estos muestran la parte izquierda y derecha de la imagen de fondo y, por lo tanto, permiten que las pestañas se estiren y den espacio para la etiqueta de texto en el interior.

Observe también el verde clase del vínculo:determina el fondo, el color del texto y el estado de desplazamiento de la pestaña, como verá en el siguiente paso de este tutorial.

Paso 2:CSS

Con el marcado en su lugar, podemos echar un vistazo más detallado al estilo de la página de pestañas.

estilos.css - Parte 1

.tabContainer{
    /* The UL */
    float:right;
    padding-right:13px;
}

#contentHolder{
    background-color:#EEEEEE;
    border:2px solid #FFFFFF;
    height:300px;
    margin:20px;

    color:#444444;
    padding:15px;
}

#tabContent{
    background-color:#333;
    border:1px solid #444;
    margin-top:-15px;
    width:100%;
}

#tabContent, .tabContainer li a,#contentHolder{
    -webkit-box-shadow:0 0 2px black;
    -moz-box-shadow:0 0 2px black;
    box-shadow:0 0 2px black;
}

.tabContainer li{
    /* This will arrange the LI-s next to each other */
    display:inline;
}

.tabContainer li a,.tabContainer li a:visited{
    /* Styling the hyperlinks of the tabs as colorful buttons */

    float:left;
    font-size:18px;

    /* display:block allows for additinal CSS rules to take effect, such as paddings: */
    display:block;

    padding:7px 16px 1px;
    margin:4px 5px;
    height:29px;

    /* Giving positioning */
    position:relative;

    /* CSS3 text-shadow */
    text-shadow:1px 1px 1px #CCCCCC;
}

Aquí usamos una serie de reglas CSS3 que se suman a la sensación general de la página. Primero está el box-shadow propiedad, que agrega una sombra debajo de las pestañas, el #tabContent div y #contentHolder .

Después de esto tenemos la text-shadow propiedad, que agrega una sombra de color claro (más un brillo exterior en este caso), que agrega una sensación de inserción al texto de las pestañas.

estilos.css - Parte 2

#overLine{
    /* The line above the active button. */
    position:absolute;

    height:1px;
    background-color:white;
    width:90px;

    float:left;
    left:1px;
    top:-5px;
    overflow:hidden;
}

#main{
    margin:0 auto;
    position:relative;
    width:700px;
}

ul .left{
    /* The left span in the hyperlink */

    height:37px;
    left:0;
    position:absolute;
    top:0;
    width:10px;
}

ul .right{
    /* The right span in the hyperlink */

    height:37px;
    right:0;
    position:absolute;
    top:0;
    width:10px;
}

/* Styling the colors individually: */

ul a.green{ background:url(img/green_mid.png) repeat-x top center;  color:#24570f;}
ul a.green span.left{ background:url(img/green_left.png) no-repeat left top;}
ul a.green span.right{ background:url(img/green_right.png) no-repeat right top;}

/* .. Analogical styles for the red, blue and orange color .. */

/* The hover states: */
ul a:hover{ background-position:bottom center; text-decoration:none;}
ul a:hover span.left{ background-position:left bottom;}
ul a:hover span.right{ background-position:right bottom;}

.preloader{
    display:block;
    margin:120px auto;
}

En la segunda parte del código, puede ver que definimos diferentes fondos para el hipervínculo y los tramos izquierdo y derecho, según la clase de color que se le asigne. De esta manera, podemos cambiar con éxito una serie de estilos CSS y, como resultado, tener un diseño completamente diferente de la pestaña, simplemente configurando un nombre de clase diferente para el hipervínculo.

Paso 3:jQuery

Aquí es donde ocurre la magia. Primero necesitamos incluir la biblioteca jQuery en la página:

demostración.html

<link rel="stylesheet" type="text/css" href="styles.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

Incluimos la última versión de jQuery del CDN de Google e inmediatamente después, agregamos nuestro propio script.js archivo, que contiene todos nuestros scripts.

Aquí hay una explicación detallada de lo que hace exactamente jQuery:

  • La página se abre en el navegador de un visitante y la biblioteca jQuery se descarga de la Red de depósito de contenido de Google;
  • $(documento).listo() se pone en cola para su ejecución y la función que se proporciona como parámetro se ejecuta cuando el DOM ha terminado de cargarse;
  • El objeto Tabs se enlaza con $.each() método e individuo
  • los elementos se crean y se agregan al .tabContainer
      (cubierto en el paso uno);
    • Oyentes de eventos para el clic el evento en las pestañas está configurado.

    Puede ver el código a continuación:

    script.js - Parte 1

    $(document).ready(function(){
        /* This code is executed after the DOM has been completely loaded */
    
        /* Defining an array with the tab text and AJAX pages: */
    
        var Tabs = {
            'Tab one'   : 'pages/page1.html',
            'Tab two'   : 'pages/page2.html',
            'Tab three' : 'pages/page3.html',
            'Tab four'  : 'pages/page4.html'
        }
    
        /* The available colors for the tabs: */
        var colors = ['blue','green','red','orange'];
    
        /* The colors of the line above the tab when it is active: */
        var topLineColor = {
            blue:'lightblue',
            green:'lightgreen',
            red:'red',
            orange:'orange'
        }
    
        /* Looping through the Tabs object: */
        var z=0;
        $.each(Tabs,function(i,j){
            /* Sequentially creating the tabs and assigning a color from the array: */
    
            var tmp = $('<li><a href="#" class="tab '+colors[(z++%4)]+'">'+i+' <span class="left" /><span class="right" /></a></li>');
    
            /* Setting the page data for each hyperlink: */
    
            tmp.find('a').data('page',j);
    
            /* Adding the tab to the UL container: */
            $('ul.tabContainer').append(tmp);
        })
    

    La fuente anterior es la primera parte de script.js , que puede encontrar en el archivo de descarga. Puede agregar sus propias pestañas en la página insertando una nueva propiedad en el objeto Pestañas. La parte izquierda contiene el nombre de la pestaña entre comillas simples, y la parte derecha (después del punto y coma) contiene la URL AJAX que se obtendrá y mostrará en el #contentHolder div.

    En la siguiente segunda parte del script, verá jQuery 1.4 en acción, ya que creamos un nuevo elemento div (que actúa como la línea sobre la pestaña activa) y pasamos un objeto con las propiedades ID y CSS en lugar de configurarlas. por separado con .attr() y .css() métodos.

    script.js - Parte 2

      /* Caching the tabs into a variable for better performance: */
        var the_tabs = $('.tab');
    
        the_tabs.click(function(e){
    
            /* "this" points to the clicked tab hyperlink: */
            var element = $(this);
    
            /* If it is currently active, return false and exit: */
            if(element.find('#overLine').length) return false;
    
            /* Detecting the color of the tab (it was added to the class attribute in the loop above): */
    
            var bg = element.attr('class').replace('tab ','');
    
            /* Removing the line: */
            $('#overLine').remove();
    
            /* Creating a new div element with jQuery 1.4 by passing an additional object parameter: */
    
            $('<div>',{
                id:'overLine',
                css:{
                    display:'none',
                    width:element.outerWidth()-2,
                    background:topLineColor[bg] || 'white'
                }}).appendTo(element).fadeIn('slow');
    
            /* Checking whether the AJAX fetched page has been cached: */
    
            if(!element.data('cache'))
            {
                /* If no cache is present, show the gif preloader and run an AJAX request: */
                $('#contentHolder').html('<img src="img/ajax_preloader.gif" width="64" height="64" class="preloader" />');
    
                $.get(element.data('page'),function(msg){
                    $('#contentHolder').html(msg);
    
                    /* After page was received, add it to the cache for the current hyperlink: */
                    element.data('cache',msg);
                });
            }
            else $('#contentHolder').html(element.data('cache'));
    
            e.preventDefault();
        })
    
        /* Emulating a click on the first tab, so that the content area is not empty: */
        the_tabs.eq(0).click();
    
    });
    

    Observe el uso de jQuery data() método a lo largo del código. Asigna datos arbitrarios a un elemento llamando al método con dos parámetros $(‘#selector’).data(‘label’,”String Data”) . Esto asigna la cadena "Datos de cadena" al elemento y luego podemos acceder a él (o verificar si se ha configurado) llamando al método de datos sin el segundo parámetro.

    De esta manera, configuramos un sistema de almacenamiento en caché simple para las solicitudes de AJAX. La primera vez que se realiza una llamada AJAX, el texto de la respuesta (que se encuentra en el msg variable) se almacena en data('cache') . En llamadas consecutivas, buscamos esta variable de caché y la devolvemos en lugar de activar una nueva solicitud. De esta forma, eliminamos la carga innecesaria del servidor y mejoramos la capacidad de respuesta de las pestañas.

    ¡Con esto, nuestras dulces pestañas AJAX-ed están completas!

    Conclusión

    Hoy creamos AJAX:pestañas coloridas habilitadas con jQuery 1.4 y CSS3. También implementamos un mecanismo de almacenamiento en caché simple usando el método data(). El código fuente es fácilmente modificable y agregar nuevas pestañas es tan fácil como agregar nuevas propiedades al objeto Tabs.

    Si te gustó este tutorial, asegúrate de seguirnos en twitter para ver las primeras vistas previas y enlaces interesantes del mundo del desarrollo web.

    ¿Qué opinas? ¿Cómo mejorarías este ejemplo?