Encontré un tutorial de como hacer pestañas rotar y me gustarÃa compartirlo con ustedes fue creado por Raymon Selda. El tutorial esta en Ingles y lo traducà en Español lo mejor que pude si ven un error ortográfico, me gustarÃa saberlo. Visite el tutorial en Ingles en el blog de Raymond Selda.
Hoy vamos a crear un rotador de pestañas (no estoy seguro de cómo llamarlo realmente) con el marco favorito de todos Javascript, jQuery y una interfaz de biblioteca llamada jQuery UI. Este efecto se puede utilizar de manera eficaz en su página de inicio a su clientela con sus productos y servicios.
Construir una estructura sólida - XHTML
Tenemos nuestra habitual envoltorio que envuelve los rotadores div que contiene las fichas estructuradas en forma de lista y el contenido de los fragmentos que vamos a girar. También la referencia de jQuery y jQuery UI en la sección de cabecera. El punto clave aquà son los nombres de clase ui-tabs-selected y ui-tabs-hide para la lista y el contenido de fragmentos. Esos nombres son las clases responsable de la rotación de nuestro contenido.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tabbed Content Rotator Using JQuery</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery-ui-personalized-1.5.3.packed.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="rotator">
<!-- Tabs -->
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><span>Maximize Profits</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><span>Flexible Technology</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><span>Practical Solutions</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><span>Customer Support</span></a></li>
</ul>
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<h2>Maximize Profits</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam.</p>
<p><a class="btn_get_started" href="#">Get Started</a> <a class="btn_learn_more" href="#">Learn More</a></p>
</div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<h2>Flexible Technology</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam.</p>
<p><a class="btn_get_started" href="#">Get Started</a> <a class="btn_learn_more" href="#">Learn More</a></p>
</div>
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<h2>Practical Solutions</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam.</p>
<p><a class="btn_get_started" href="#">Get Started</a> <a class="btn_learn_more" href="#">Learn More</a></p>
</div>
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<h2>Customer Support</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam.</p>
<p><a class="btn_get_started" href="#">Get Started</a> <a class="btn_learn_more" href="#">Learn More</a></p>
</div>
</div><!-- end rotator -->
</div><!-- end wrapper -->
</body>
</html>
Creamos estilos para el rotador y el envoltorio (wrapper)
Después de establecer nuestra estructura, ahora diseñaremos nuestro rotador con CSS. Asigne el ancho al envoltorio (wrapper), pongale un par de fronteras (borders) y centralizelo. A continuación, construimos un espacio para las pestañas mediante la adición de un relleno de fondo (padding) a nuestro rotador div.
- /* Tabs */
ul.ui-tabs-nav, li.ui-tabs-nav-item, li.ui-tabs-nav-item a:link, li.ui-tabs-nav-item a:visited {
margin:0;
padding:0;
border:0;
outline:0;
line-height:1.3;
text-decoration:none;
font-size:100%;
list-style:none;
float:left;
font-family:Arial, Helvetica, sans-serif;
}
- ul.ui-tabs-nav {
position:absolute;
bottom:0px;
left:0;
z-index:1;
width:100%;
background:#FFF url(images/uitabsbg.gif) repeat-x bottom right;
border-top:1px solid #FFF;
}
Estilos para las pestaña no seleccionada
Asigne estilos a las letras y los bordes de las pestañas. También repetimos la imagen de fondo de la ul.ui-tabs-nav.
- /* Non-Selected Tabs */
li.ui-tabs-nav-item a:link,
li.ui-tabs-nav-item a:visited {
font-size:.8em;
font-weight:normal;
color:#999;
background:#FFF url(images/uitabsbg.gif) repeat-x bottom left;
border-left:1px solid #FFF;
border-right:1px solid #c5ced9;
}
Estilo para propiedades del tipo “hover” de las pestañas
Creamos un relleno para las pestañas y a la propiedad “hover” le damos un fondo gráfico.
- /* Hovered Tab */
#rotator .ui-tabs-nav-item a:hover,
#rotator .ui-tabs-nav-item a:active {
background:#FFF url(images/uiactivetabbg.gif) repeat-x bottom left;
color:#333;
}
- #rotator .ui-tabs-nav-item a span {
float:left;
padding:1em;
cursor:pointer;
}
Estilos para las pestañas activas
Les damos a todos los enlaces el misma fondo gráfico. Básicamente, usted puede personalizar el gráfico de acuerdo a las necesidades de su diseño.
- /* Active Tab */
#rotator .ui-tabs-selected a:link,
#rotator .ui-tabs-selected a:visited,
#rotator .ui-tabs-selected a:hover,
#rotator .ui-tabs-selected a:active {
background:#fff url(images/uiactivetabbg.gif) repeat-x bottom left;
color:#333;
}
Estilos para el contenido de el panel
Ahora vamos a crear un estilo para el contenido de el panel. Esta es la sección que contiene el contenido que se está rotando. El punto clave aquà es el relleno que vamos a utilizar para incluir el texto en el contenido y hacer algo de espacio para el gráfico de fondo asociados con cada contenido girado. Luego utilizamos una clase para ocultar los otros contenidos.
- /* Content Panels */
#rotator .ui-tabs-panel {
font-family:Arial, Helvetica, sans-serif;
clear:left;
color:#000;
padding:40px 540px 15px 15px;
height:225px;
}
- #rotator .ui-tabs-hide {
display:none;
}
Estilo para el contenido
Vamos a crear un estilo para la cabecera (header), el párrafo y los enlaces dentro del contenido del panel.
- #rotator h2 {
color:#E75D00;
font-weight:normal;
margin:0;
font-size:1.8em;
line-height:1.2em;
}
- #rotator p {
font-size:1.1em;
margin:.5em 0;
color:#333;
}
- #rotator .btn_get_started {
float:left;
height:30px;
width:99px;
text-indent:-9999em;
margin-right:7px;
overflow:hidden;
background:transparent url(images/getstarted.gif) no-repeat
}
- #rotator .btn_learn_more {
float:left;
height:26px;
font-size:.9em;
}
Imágenes de fondo
Ahora vamos a aplicar las imágenes de fondo. Los 2 paneles primeros tienen las imágenes en la parte derecha del panel por lo que necesitamos colocar el gráfico a la derecha. Luego vamos a colocar las imágenes a la izquierda de los otros 2 paneles. También tomen nota de que hay que establecer un nuevo relleno para hacer algo de espacio para las imágenes que se colocan a la izquierda. Y eso es toda la CSS que necesitamos.
- /* Background Images */
#rotator #fragment-1 {
background:transparent url(images/coins.jpg) no-repeat top right;
}
- #rotator #fragment-2 {
background:transparent url(images/bearings.jpg) no-repeat top right;
}
- #rotator #fragment-3 {
background:transparent url(images/map.jpg) no-repeat top left;
padding:40px 15px 15px 540px;
}
- #rotator #fragment-4 {
background:transparent url(images/support.jpg) no-repeat top left;
padding:40px 15px 15px 540px;
}
Hacer girar los Contenidos
Ahora es el momento para la magia de jQuery! Si usted nota al principio cuando construimos nuestra estructura, le hicimos referencia a dos archivos de Javascript en la sección de la cabecera. La primera referencia es para jQuery y la segunda es para jQuery UI.
Para hacer que nuestro contenido gire sólo tenemos que invocar la función de rotar se incluye en la interfaz de usuario de la biblioteca de jQuery. Solo necesitas apuntar la función a la sección en las pestañas que contiene los enlaces, en este caso, entre # rotator> ul adentro de la función.
Voila! terminamos!
Rotadores de contenido son una de las maneras mas eficaces para mostrar sus productos y servicios utilizando poco espacio en la pantalla.
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=8c1b609f-cf9b-4952-95e6-daeb843a4438)
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=c67c27f1-027c-428a-9108-07be2b895ab7)
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=ef156358-e097-4973-8770-adbe9a566da3)
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=00aad689-c6f2-4cf7-87e4-267041f4ea36)
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=9e81856c-8923-441c-ac1d-fdc11359562f)
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=aba41b93-810d-433e-8c9f-260b4b7684e2)
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=2468cbb1-fc36-4d70-a4cb-1c17c58500f3)
