Cómo crear una plantilla de Tabbable

Cómo crear una plantilla de Tabbable


Aquí son una forma efectiva de crear diapositivas de contenido, navegación dinámica o widgets de ahorro de espacio para sus páginas web. Plantillas Tabbable son una solución eficaz para los desarrolladores que desean agilizar su proceso, o diseñadores que buscan crear un blog o e-commerce tema. Mientras pestañas pueden ser creadas usando CSS y HTML exclusivamente, la implementación más efectiva utiliza la función de pestañas jQuery UI para un rendimiento suave que se mantiene constante en todos los navegadores. Cuando se combina con las propiedades mejoradas de HTML5, el resultado es una solución moderna y elegante para la organización del contenido.

Instrucciones

1

Descargue el HTML5 Boilerplate (ver el enlace en la sección de Recursos), que servirá como base para la plantilla y ahorrar una gran cantidad de trabajo. Descomprimir el archivo en la ubicación elegida, y abra el archivo "index.html" en tu editor HTML o de texto favorito. Coloca el cursor en la línea en blanco después de "<div id =" "role =" main principal ">" y presionar "Enter" una vez.

2

Crear una lista desordenada con la etiqueta "ul" para mantener el nombre de cada ficha, y darle una clase de "pestañas". Esta clase define cómo aparecerá cada pestaña y ayuda a construir la estructura de su barra de navegación.

<Ul class = "pestañas">

&lt;li>Home&lt;/li>

&lt;li>Portfolio&lt;/li>

&lt;li>Bio&lt;/li>

&lt;li>Contact&lt;/li>

</ Ul>

3

Vincular cada nombre de la ficha en su lista usando la "a" etiqueta y use el nombre de la ficha para el valor "href", precedida por el signo de número (#). El signo "#" actúa como un ancla, que jQuery utilizará para mostrar los contenidos de cada pestaña cuando un usuario hace clic en la pestaña. Por ejemplo:

<Ul class = "pestañas">

&lt;li>&lt;a href="#home">Home&lt;/a>&lt;/li>

&lt;li>&lt;a href="#portfolio">Portfolio&lt;/a>&lt;/li>

&lt;li>&lt;a href="#bio">Bio&lt;/a>&lt;/li>

&lt;li>&lt;a href="#contact">Contact&lt;/a>&lt;/li>

</ Ul>

4

Introduzca un DIV con una clase de "tab_wrapper" debajo de la lista. Este contenedor celebrará página de contenido de cada ficha.

<Div class = "tab_wrapper">

</ Div>

Añadir DIVs para cada página de contenido dentro de la envoltura de pestaña, dando a cada uno la clase "contenido". Esta clase definirá disposición general del contenido de la página, como relleno, márgenes y los estilos especiales que desea solamente para aplicar a las páginas de ficha. Utilice la opción "href" valor de cada enlace de la ficha en su lista como el DIV valor "id":

<Div class = "tab_wrapper">

&lt;div id="home" class="content">

&lt;!--Content-->

&lt;/div>

&lt;div id="portfolio" class="content">

&lt;!--Content-->

&lt;/div>

&lt;div id="bio" class="content">

&lt;!--Content-->

&lt;/div>

&lt;div id="contact" class="content">

&lt;!--Content-->

&lt;/div>

</ Div>

5

Reemplazar "<! - Contenido ->" con el margen de beneficio para cada pestaña. Como se trata de una plantilla, sólo se inserte un esquema básico en lugar de contenido específico. Si va a crear una plantilla para una plataforma de blogs como WordPress o Tumblr, este sería un lugar apropiado para su contenido etiquetas de plantilla. Un ejemplo de cómo se puede establecer una sección de contenido sería:

<Div id = clase "hogar" = "contenido">

<H2> Título </ h2>

<Artículo>

<Section>

Lorem ipsum dolor sit amet, elit nisi nec purus, sed diam nonummy euismod nibh tincidunt ut laoreet dolore magna aliquam erat volutpat.

</ Section>

</ Article>

</ Div>

6

Abra el documento "style.css" ubicado en la carpeta "css" de la plantilla. Vaya a la sección "Estilos primarios", y añadir una definición de estilo para su clase "pestañas". Los parámetros principales que necesita para definir son un estilo de lista, altura y anchura. Un estilo de lista de "ninguno" permite que sus pestañas se alineen horizontalmente en la parte superior de la pestaña de contenido:

ul.tabs {

margin: 0;

padding: 0;

float: left;

list-style: none;

height: 32px;

border-bottom: 1px solid #999;

border-left: 1px solid #999;

width: 100%;

}

Añadir un estilo debajo de esta definición para sus enlaces de ficha. Para crear la apariencia de "pestañas", debe utilizar un tipo de pantalla de "bloque" y dar a cada enlace un poco de acolchado. Otros parámetros que pueden añadir incluyen color, estilos de fuente y una frontera. También crear estilos para el "flotar" y el estado "activo" de cada enlace para añadir variación al color o comportamiento.

ul.tabs li a {

display: block;

padding: 0 20px;

}

7

Crear estilos para su clases "contenido" "tab_container" y. Definir un desbordamiento de "oculto", y dar a su contenedor de la misma anchura que las pestañas. También añadir un "clear: both" parámetro para mantener el contenido de saltar al lado de la pestaña de navegación:

.tab_container {

overflow: hidden;

clear: both;

width: 100%;

}

8

Abra el "script.js" documento, que se encuentra en la carpeta "js" de la plantilla. Agregue el siguiente código justo debajo de la "/ *" línea:

$ (Document) .ready (function () {

$(".tab_content").hide(); //Hide all content

$("ul.tabs li:first").addClass("active").show(); //Activate first tab

$(".tab_content:first").show(); //Show first tab content

//On Click Event

$("ul.tabs li").click(function() {

$("ul.tabs li").removeClass("active"); //Remove any "active" class

$(this).addClass("active"); //Add "active" class to selected tab

$(".tab_content").hide(); //Hide all tab content

var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content

$(activeTab).fadeIn(); //Fade in the active ID content

return false;

});

});

Guarde todos los tres archivos. Ahora tiene una plantilla tabbable que puede utilizar para crear cualquier número de diseños de página web y temas.