A estas alturas, probablemente haya oído hablar del nuevo paquete de software CS5 de Adobe. Además, probablemente hayas visto sus páginas de productos, donde presentan las nuevas funciones de la suite. Además del excelente diseño, también implementaron una solución interesante para mostrar las nuevas funciones de las que son capaces sus productos:usar sugerencias deslizables contextuales.
Conociendo la importancia de los estándares HTML, estamos creando un conjunto de sugerencias deslizables contextuales con jQuery y CSS3, que son ideales para páginas de productos y recorridos en línea. Como beneficio adicional, son compatibles con SEO, por lo que todo el contenido es visible para los motores de búsqueda.
La idea
La idea principal es crear un conjunto fácilmente configurable de diapositivas contextuales. Cada uno se puede abrir en una de cuatro direcciones:abajo a la derecha (predeterminado), abajo a la izquierda , arriba a la izquierda y arriba a la derecha , y cada uno puede estar en uno de los tres colores:verde (predeterminado), azul y rojo .
Para crear un elemento deslizable, debe incluir una etiqueta p de párrafo normal en la página. Esto significa que todo el contenido es visible para los motores de búsqueda de forma semántica. Los párrafos se reemplazan con el marcado de las diapositivas mediante jQuery al cargar la página, con los atributos de título, clase y estilo del párrafo pasados al elemento recién creado.
Paso 1 - XHTML
Ahora echemos un vistazo a la estructura de las etiquetas de párrafo que debe agregar a la página y cómo están configuradas.
demostración.html
<div class="main">
<p title="A New Tutorial Every Week" style="top:200px;left:120px;">
This slideout is going to open to the bottom-right (the default).
</p>
<p title="2200+ Twitter Followers" class="openTop openLeft blue" style="top:400px;left:650px;">
This slideout is going to open to the top-left.
</p>
<p title="Over 5000 RSS Subscribers" class="openTop red" style="top:500px;left:90px;">
This slideout is going to open to the top-right.
</p>
</div> Como puede ver, cada una de las etiquetas contiene un estilo , una clase (opcional) y un título atributo. Como se discutió anteriormente, estos se copian en las diapositivas cuando jQuery reemplaza el marcado.
El estilo El atributo contiene las coordenadas relativas al elemento div principal, lo que significa que las diapositivas se colocan exactamente en el mismo lugar que los párrafos.
La clase El atributo es opcional y especifica una serie de opciones para las diapositivas. Puede elegir la dirección en la que se abren las diapositivas y su color.
marcado deslizable
<div class="slideOutTip openLeft blue" style="left:100px;top:200px">
<div class="tipVisible">
<div class="tipIcon"><div class="plusIcon"></div></div>
<p class="tipTitle">The title of the slideout</p>
</div>
<div class="slideOutContent">
<p>Slideout Content</p>
</div>
</div>
Paso 2:CSS
Ahora echemos un vistazo más de cerca al estilo. Aquí solo se presentan los estilos utilizados directamente por las diapositivas. Puedes ver el resto de estilos en estilos.css en el archivo de descarga.
estilos.css - Parte 1
.slideOutTip{
/* The main wrapping div of the slideout tips */
position:absolute;
padding:3px;
top:0;
left:0;
background-color:#111;
font-size:13px;
color:white;
overflow:hidden;
height:22px;
}
.slideOutTip:hover{
/* Applying a CSS3 outer glow on hover */
-moz-box-shadow:0 0 1px #999;
-webkit-box-shadow:0 0 1px #999;
box-shadow:0 0 1px #999;
}
/* The holder for the title and the icon: */
.tipVisible{ cursor:pointer; height:22px; }
.tipTitle{
float:left;
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
white-space:nowrap;
line-height:22px;
padding-right:5px;
}
.tipIcon{
width:20px;
height:20px;
float:left;
background-color:#61b035;
border:1px solid #70c244;
margin-right:8px;
/* CSS3 Rounded corners */
-moz-border-radius:1px;
-webkit-border-radius:1px;
border-radius:1px;
} El tipVisible contiene el tipTitle y icono de punta divs, flotaba a la izquierda dentro de él. Estos son los únicos divs que son visibles para el usuario cuando se carga la página. En el paso de jQuery del tutorial, verá que también vinculamos un detector de eventos para el evento de clic en tipVisible , que desliza el contenido para abrirlo.
estilos.css - Parte 2
/* Three color themes */
.green .tipIcon{ background-color:#61b035; border:1px solid #70c244; }
.blue .tipIcon{ background-color:#1078C7; border:1px solid #1e82cd; }
.red .tipIcon{ background-color:#CD3A12; border:1px solid #da421a; }
.plusIcon{
/* The plus icon */
width:13px;
height:13px;
background:url('img/plus.gif') no-repeat center center;
margin:4px;
/* Defining a CSS3 animation. Currently only works in Chrome and Safari */
-webkit-transition: -webkit-transform 0.2s linear;
-moz-transition: -moz-transform 0.2s linear;
transition: transform 0.2s linear;
}
.slideOutTip.isOpened{ z-index:10000; }
.slideOutTip.isOpened .plusIcon{
/* Applying a CSS3 rotation to the opened slideouts*/
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
/* Special rules for the left and top - opening versions */
.openLeft .tipIcon{
/* Floating the title and the icon to the right */
margin:0 0 0 8px;
float:right;
}
.openLeft .tipTitle{ float:right; padding:0 0 0 5px; }
.openLeft .slideOutContent{ margin-top:22px; }
.openLeft.openTop .slideOutContent{ margin-top:0; }
.slideOutContent{
/* Hiding the div with the slide out content: */
display:none;
padding:10px;
font-size:11px;
}
/* Hiding the original paragraphs if they have not been replaced (JS disabled): */
.main > p{ display:none; } La versión predeterminada de la diapositiva se abre en la parte inferior derecha. Puede cambiar esto asignando el openLeft o abrir parte superior class a la p original que agregas a la página (recuerda que las clases de las etiquetas p se copian a la estructura del slideout). También puede cambiar el color del icono a azul o rojo asignando también los respectivos nombres de clase.
Aquí se utilizan varias reglas CSS3. A lo largo del habitual border-radius (para esquinas redondeadas) y box-shadow (para un efecto de brillo exterior), agregué transform:rotate(45deg) propiedad, que gira el signo más cuando se abre la diapositiva.
Si ve el ejemplo en Safari /Cromo (o versión 3.7 de Firefox , que aún no se ha lanzado), incluso puedes ver que la rotación está animada. Esto se hace con la transición de CSS3 property, dentro de la cual especificamos la propiedad que se va a animar, la duración del efecto y el tipo de animación.
Por último, usamos .main> p para ocultar las etiquetas p que están directamente dentro del div principal, por lo que si JavaScript está deshabilitado, no verá los párrafos. Alternativamente, puede diseñarlos e incorporarlos en su diseño para una solución alternativa adecuada.
Paso 3:jQuery
Cuando se carga la página, jQuery recorre todos los elementos de párrafo en el div principal y los reemplaza con el marcado de las diapositivas. Más tarde vincula detectores de eventos para el evento de clic y desliza el contenido para abrirlo en la dirección que se especificó con los nombres de clase cuando ocurre el evento. Veamos cómo funciona esto.
script.js - Parte 1
$(document).ready(function(){
/* The code here is executed on page load */
/* Replacing all the paragraphs */
$('.main p').replaceWith(function(){
/*
The style, class and title attributes of the p
are copied to the slideout:
*/
return '\
<div class="slideOutTip '+$(this).attr('class')+'" style="'+$(this).attr('style')+'">\
\
<div class="tipVisible">\
<div class="tipIcon"><div class="plusIcon"></div></div>\
<p class="tipTitle">'+$(this).attr('title')+'</p>\
</div>\
\
<div class="slideOutContent">\
<p>'+$(this).html()+'</p>\
</div>\
</div>';
});
$('.slideOutTip').each(function(){
/*
Implicitly defining the width of the slideouts according to the
width of its title, because IE fails to calculate it on its own.
*/
$(this).width(40+$(this).find('.tipTitle').width());
});
/* Listening for the click event: */
$('.tipVisible').bind('click',function(){
var tip = $(this).parent();
/* If a open/close animation is in progress, exit the function */
if(tip.is(':animated'))
return false;
if(tip.find('.slideOutContent').css('display') == 'none')
{
tip.trigger('slideOut');
}
else tip.trigger('slideIn');
}); A partir de la versión 1.4 de la biblioteca jQuery, replaceWith () El método puede tomar una función como parámetro. Esto es realmente útil, ya que nos permite generar dinámicamente el marcado. El esto apunta al elemento, por lo que podemos obtener fácilmente los valores de los diferentes atributos y el contenido del párrafo.
script.js - Parte 2
$('.slideOutTip').bind('slideOut',function(){
var tip = $(this);
var slideOut = tip.find('.slideOutContent');
/* Closing all currently open slideouts: */
$('.slideOutTip.isOpened').trigger('slideIn');
/* Executed only the first time the slideout is clicked: */
if(!tip.data('dataIsSet'))
{
tip .data('origWidth',tip.width())
.data('origHeight',tip.height())
.data('dataIsSet',true);
if(tip.hasClass('openTop'))
{
/*
If this slideout opens to the top, instead of the bottom,
calculate the distance to the bottom and fix the slideout to it.
*/
tip.css({
bottom : tip.parent().height()-(tip.position().top+tip.outerHeight()),
top : 'auto'
});
/*
Fixing the title to the bottom of the slideout,
so it is not slid to the top on open:
*/
tip.find('.tipVisible').css({position:'absolute',bottom:3});
/*
Moving the content above the title, so it can
slide-open to the top:
*/
tip.find('.slideOutContent').remove().prependTo(tip);
}
if(tip.hasClass('openLeft'))
{
/*
If this slideout opens to the left, fix it to the right so
the left edge can expand without moving the entire div:
*/
tip.css({
right : Math.abs(tip.parent().outerWidth()-(tip.position().left+tip.outerWidth())),
left : 'auto'
});
tip.find('.tipVisible').css({position:'absolute',right:3});
}
}
/* Resize the slideout to fit the content, which is then faded into view: */
tip.addClass('isOpened').animate({
width : Math.max(slideOut.outerWidth(),tip.data('origWidth')),
height : slideOut.outerHeight()+tip.data('origHeight')
},function(){
slideOut.fadeIn();
}); Estamos vinculando dos eventos personalizados a la diapositiva:"slideIn " y "sldieOut ". De esta manera, es más fácil iniciar la apertura y el cierre simplemente activando el evento respectivo.
Dependiendo de si uno de los 'openLeft ' o 'abrir a la derecha ' se asignan a la diapositiva, aplicamos algunas reglas adicionales a los elementos, para que puedan abrirse correctamente.
Luego de esto asignamos el isOpened clase al slideout. No solo marca la diapositiva como abierta, sino que también aplica un índice z de 10000 para que se muestre encima de todos los demás elementos de la página.
script.js - Parte 3
}).bind('slideIn',function(){ // Binding the slideIn event to .slideOutTip
var tip = $(this);
/* Hide the content and restore the original size of the slideout: */
tip.find('.slideOutContent').fadeOut('fast',function(){
tip.animate({
width : tip.data('origWidth'),
height : tip.data('origHeight')
},function(){
tip.removeClass('isOpened');
});
});
});
}); /* Closing $(document).ready() */ El cierre del slideout consiste en ejecutar una animación que devuelve el elemento a su tamaño original (guardado con el data() método) y eliminar el isOpened clase.
¡Con esto, nuestras diapositivas contextuales están completas!
Conclusión
Los deslizables son ideales para presentar solo los aspectos más destacados de un producto, con los detalles perfectamente ocultos. Puede incorporar fácilmente imágenes, videos o cualquier otro contenido multimedia enriquecido para crear una experiencia única para sus visitantes.